如何從錯誤中學習網頁設計

Web 不是由一個單一的整體框架構成的。 由於其模塊化，要學習構成我們在互聯網上看到的一切的所有部分要困難得多。

任何人都必然會犯下會減慢開發時間、減慢程序或將錯誤引入程序的錯誤。 不僅如此，當你找工作時，有些錯誤會讓你處於劣勢。

存在最佳實踐以確保在設計網站或將其投入生產時盡可能少地出現問題。 以下是初級 Web 開發人員最常犯的五個錯誤以及如何避免這些錯誤。

過度依賴 jQuery

jQuery 是迄今為止世界上最流行的 JavaScript 框架。 一旦你創建它就在你的項目中採用它可能看起來很誘人，但不要這麼著急。

雖然 jQuery 確實提供了許多方便的方法來加速您的 Web 開發，但重要的是不要過多地使用它。 新的 Web 開發人員幾乎總是會錯誤地理解 jQuery 的 API 方法，而不是它們在底層的工作方式。

許多雇主認為 jQuery 是一種負擔，而不是一種很好的工具，因為一些開發人員無法完全理解JavaScript 是如何工作的。

使用 jQuery 沒有任何問題。 如果可以，請習慣於自己使用 JavaScript 方法。 僅依靠 jQuery 來實現那些需要一段時間才能實現的便捷方法。

過度依賴 CSS 框架

Semantic UI 和 Bootstrap 等 CSS 框架可以節省大量時間。 它們消除了對手動樣式的需求，並在您的應用程序中加入了響應式設計。

然而，就像 jQuery 一樣，很容易陷入從不編寫自己的 CSS 代碼的循環中。 歸根結底，您的網站看起來很一般，而且只完成了一半。 在極端情況下，它甚至可能看起來像十幾個與您有相同想法的其他網站。

如果您不是編寫 CSS 代碼的專家，您將有能力閱讀手冊，找到一位導師，他將為您提供所需的信息，就像研究指南將為我寫一篇研究論文並提供為您提供良好和定性的幫助。 有不同的框架可以更直觀地編寫代碼。

像 Bootstrap 這樣的框架可以讓您的生活更輕鬆。 為避免過度依賴，請自學 CSS 樣式，學習如何使用預處理器加快開發速度，並學習顏色理論以了解哪些顏色可以搭配，哪些不可以搭配。 一旦你正確理解了這些概念，你可能會意識到你甚至不再需要這些框架了。

沒有恢復工具

在您最需要的時候沒有恢復工具可能會導致您的網站崩潰並可能消亡。 每當您對您的網站進行更改時，您都冒著不好的風險。 為確保您有一個可以落入的安全網，請考慮使用恢復工具，例如 WP Reset。

當您的網站出現問題時，WP Reset 是您的最佳解決方案。 也許問題是無法訪問您的 WP 管理員或遇到死機白屏。 無論是什麼，WP Reset 都會為您提供支持。 它配備了有用的清潔工具，可讓您快速輕鬆地恢復您的網站。

此外，您可以使用它來快速安裝任何插件和主題，或者在它們出現故障時禁用它們。 此外，WP Reset 的快照功能會在您對其進行任何更改之前自動拍攝您網站的快照，如果事情沒有按計劃進行，您可以恢復該快照。

這個插件提供的最強大的選項是核重置選項，它允許您完全清除安裝，刪除所有插件、主題和數據庫條目。 但是，僅在您真正需要時才使用它。

忘記優化您的網站以提高速度

過度依賴 jQuery 的一個影響是傾向於養成反模式的習慣。 首次加載瀏覽器時，需要在加載頁面之前執行 JavaScript 和 CSS 代碼，具體取決於您放置腳本的位置。

正如您可以想像的那樣，擁有太多腳本會降低您的網站速度。 使用未使用的 CSS 類會增加您網站的包大小並同樣減慢它的速度。

速度優化有很多內容。 僅舉幾個因素：字體、圖像、附加的 JavaScript 和 CSS 文件以及文件壓縮都發揮著作用。 一旦你掌握了這些，看看像 Webpack 和 Rollup 這樣的包捆綁器，它們可以從你的文件中刪除未使用的 CSS 類和 JavaScript 方法。

輸入驗證不完整

您構建的任何網站的一些最重要的部分是表單。 由於這是一個人可以將信息傳遞到您的服務器的唯一方式，因此始終需要對它們進行一些健全性檢查。

互聯網上一些最常見的攻擊媒介仍然是 XSS 攻擊和 SQL 注入。 初級開發人員容易犯的錯誤是只在前端進行輸入驗證。

所有輸入驗證都是通過 JavaScript 完成的，這很容易禁用。 也就是說，Sytian Web Developer Philippines 的 Kenneth Sytian 建議始終在後端和前端執行輸入驗證。 此外，所有非字母數字字符都應該轉義以使注入攻擊不可能。

忽略SEO的重要性

僅僅建立漂亮的網站並發布它們是不夠的。 人們看到並欣賞您提供的內容同樣重要。 最好的方法是提高您的 SEO 知識和實施。

搜索引擎優化是一個漫長而復雜的過程，需要不斷研究以保持在不斷變化的遊戲規則循環中。 憑藉其拱形覆蓋範圍，不應忽視在開發過程結束時完成它。

需要積極處理某些做法，例如始終在圖像上使用描述性“alt”標籤。 想像一下，當您已經完成項目時，掃描所有文件以查找 alt 和元標記。

沒有網站圖標

由於設置起來非常瑣碎，因此很容易將 favicon 視為不必要的，但它的存在非常重要。 在現代網絡上，用戶通常會打開多個選項卡，以便他們以後可以再次訪問它們。 網站圖標充當一種書籤，因此您的網站一目了然。 缺少一個可能意味著用戶在此過程中失去興趣。

屢獲殊榮的 UX 設計師 Michelle Dipp 建議您使用可以在網上找到的免費圖形設計工具，而不是自己在 Photoshop 中生成。 您甚至可以找到一個提供網站圖標模板的模板，這樣您就可以輕鬆製作自己的模板。

忽略響應式設計

響應式設計是網站應該具備的最重要的東西之一。 互聯網上的大部分流量來自移動設備。 沒有一個根據屏幕尺寸顯示不同內容的網站會使您處於不利地位。 如果您的競爭對手提供相同的服務，則尤其如此。

改善用戶體驗的一種方法是在您的網站上實施粘性元素。 粘性元素是那些在用戶瀏覽時保持固定在頁面上的元素。 當元素固定後，訪問它們就更容易了，而且你知道它們總是在一個地方，這在手機上是必不可少的。

話雖如此，WP Sticky 是您可以用來製作粘性元素的完美插件。 WP Sticky 讓您無需編寫任何代碼即可將任意數量的元素設置為粘性； 你只需要從屏幕上選擇你的元素。

使用 WP Sticky，您可以使您的菜單、頁眉、頁腳等具有粘性。 此外，您可以調整元素的位置、不透明度，並在特定帖子中添加或刪除它。

此外，這是谷歌在對頁面進行排名時考慮的因素之一。 如果您的網頁在移動設備上沒有響應，您可能會收到來自網站管理員控制台的幾封電子郵件，警告您更新您的網站。

結論

正確的網頁設計需要時間。 有時間研究，有時間工作，甚至有更多時間習慣推薦的做法。 在開發期間犯錯並不是世界末日。 相反，把你遇到的任何挫折當作一種學習經歷。 使用它們提高您對正確網頁設計的知識和應用。

–

關於作者

Becky Holton 是 Bestdissertation.com 的一名記者和博主，該網站是最佳論文寫作服務。 她對教育技術、專家寫作感興趣，並隨時準備在澳大利亞寫作中支持信息豐富的演講。 在推特上關注她。