我記得我剛開始學習前端開發的時候。我看到了很多文章及資料，被學習的資料壓得喘不過氣來，甚至不知道從哪里開始。

本指南列出前端學習路線，并提供了平時收藏的一些有效的資源。

為了使這本指南易于理解，我把它分成了兩部分。***部分介紹了如何使用 HTML 和 CSS開發接口。第2部分將介紹 Javascript、框架和設計模式。

HTML 和 CSS 基礎

在前端開發中，一切都從 HTM 和 CSS 開始。HTML 和 CSS 控制你在 Web 頁面上看到的內容。HTML 表示內容，而 CSS 處理樣式和布局。

首先，閱讀 Mozilla Developer Network(MDN)的 HTML 和 CSS 教程。MDN 逐章解釋了 HTML和 CSS 重要概念。此外，每個章節只有一頁長，交互演示鏈接到 CodePen 和 JSFiddle。

在完成這些教程之后，看看 CodeAcademy 的 Make a Website 課程。本教程只需要幾個小時就可以完成，對于使用 HTML 和 CSS 構建網站是一個很好的入門教程。如果wq 想了解更多， Building web forms 是 CodeAcademy 提供的另一篇教程，該教程將指導你構建和樣式化 web 表單。

要練習 CSS，可以試試 CSS Diner。這是一個有趣的 CSS 挑戰游戲。HTM L和CSS 的另一個重要方面是布局。LearnLayout 是一個交互式教程，向你展示如何使用 HTML 和 CSS 創建布局。

另外，了解如何使用 CSS Tricks 的 Google 字體 的 API 基礎知識。 排版是界面的基本構建塊。 如果你有時間，我強烈建議你閱讀這本免費的在線書籍，Donny Truong 的 Professional Web Typography 它教你作為前端開發人員需要了解的關于排版的一切。

通過這些資源，不要太擔心記憶的問題。相反，重點是理解 HTML 和 CSS 如何協同工作。

練習 HTML 和 CSS 基礎

現在你已經對 HTML 和 CSS 有了基本的了解，讓我們來找點樂趣。在本節中，有兩個實踐旨在為你提供構建網站和界面的實踐。我用“實踐”這個詞是因為在實踐中，你從失敗中學到的東西和你從成功中學到的一樣多。

實踐 1

在我們的***個實踐中，我們將使用 CodePen。CodePen 是一個前端平臺，你可以在這里編寫 HTML 和 CSS 代碼，而不必在本地存儲文件。它還提供了實時預覽，可以在保存代碼時立即更新。

通過使用 CodePen，你可以一石二鳥。一方面，你要練習 HTML 和 CSS。另一方面，你創建一個基本的進度組合。我們還將使用 Dribbble，這是一個充滿設計靈感的網站。

在 Dribbble 找到一個簡單到可以在幾個小時內編寫代碼的設計。我選擇了一些設計讓你開始:1、2、3、4 和 5。我選擇了手機為先的網頁設計，因為它們比桌面網頁設計要簡單。不過，也可以自由選擇桌面設計。

[[261962]]

在你決定了一個設計之后，繼續嘗試用 CodePen 編寫它。如果遇到困難，請記住StackOverflow 是你的朋友。另一個有用的實踐是訪問像 Medium、AirBnB和 Dropbox 這樣的網站，使用 inspector 工具查看它們是如何實現不同的布局和風格的。另外，看看 pens on CodePen,  我挑選了一些好的例子:

• Twitter小部件
• Article News Card 
• Simple Flat Menu

如果你出來的與原設計不同，請不要氣餒。 繼續練習不同的設計，你會發現每次都有進步。

如果你沒有設計背景，很可能你的設計眼光不夠成熟。具有良好設計眼光的前端開發人員將能夠識別好的設計并***地復制它們。幾周前，我寫了一篇關于如何培養你的設計眼光的文章。

實踐 2

希望***個實踐讓你對編寫 HTML 和 CSS 有一定的信心。 對于實踐 2，我們將看一些網站，然后編寫一些組件。

一些網站使用 CSS框架或 混淆它們的 CSS 類名，使你很難閱讀它們的源代碼。這就是為什么我選擇了幾個設計良好的網站，易于閱讀源代碼。

•  AirBnB: 嘗試復制他們的頁腳
•  PayPa:試著復制他們的導航欄l
•  Invision :嘗試復制頁面底部的注冊部分
•  Stripe: 嘗試復制他們的支付部分

同樣，實踐2的重點不是重新創建整個頁面。選擇幾個關鍵組件，如導航欄或英雄部分進行編碼。我在網站列表旁邊提供了一個建議，但是請隨意選擇其他組件。

HTML 和 CSS ***實踐

到目前為止，你已經學習了 HTML 和 CSS 的基礎知識。下一步是學習***實踐。***實踐是一組提高代碼質量的非正式規則。

語義標記

HTML　和　CSS　的***實踐之一是編寫語義標記。好的　web　語義意味著使用適當的　HTML　標簽和有意義的 CSS 類名來表示結構的意義。

例如，h1 標簽告訴我們它包裝的文本是一個重要的標題。 另一個例子是footer標簽 ，它告訴我們元素屬于頁面底部。 有關進一步，請閱讀 CSSTricks 的 正確的 HTML5 語義 和 什么是語義類名的構成要素。

CSS 命名規范

CS S的下一個重要的***實踐是正確的命名規范。良好的命名規范，如語義標簽，傳達了意義，并有助于使我們的代碼可預測、可讀和可維護。你可以在這篇 OOCSS、ACSS、BEM、SMACSS：它們是什么?我應該用什么? 中了解到不同的命名規范。

一般來說，我建議你嘗試一些簡單的命名規范，這些規范對你來說是直觀的。隨著時間的推移，你會發現最適合你的方法。要了解像 Medium 這樣的公司是如何利用像 BEM 這樣的命名約定的，請閱讀 Medium’s CSS is actually pretty f*ing good.。在這篇文章中，你還會了解到，提出一組有效的 CSS 約定是一個迭代過程。

CSS重置

從頁邊距到行高，每個瀏覽器都有一些小的樣式不一致。因此，需要重置 CSS。MeyerWeb 是一個受歡迎的重置。如果你想深入了解，可以閱讀 Create Your Simple Reset.css File。

跨瀏覽器支持

跨瀏覽器支持意味著你的代碼支持***的瀏覽器。像 transition 這樣的 CSS 屬性需要廠商前綴才能在不同的瀏覽器中正常工作。在本文中，我可以閱讀更多關于供應商前綴的信息，即 CSS供應商前綴。最重要的是，你應該跨多個瀏覽器(包括 Chrome、Firefox 和 Safari )測試你的網站。

CSS 預處理器與 CSS 后處理器

自20世紀90年代CSS引入以來，CSS走過了漫長的道路。由于UI系統變得越來越復雜，人們提出了稱為預處理器和后處理器的工具來管理復雜性。

CS S預處理程序是 CSS 語言擴展，它添加了一些額外的功能，比如變量、混合和繼承。兩個主要的CSS預處理程序是 Sass 和 Less。2016 年，Sass的使用范圍更加廣泛。Bootstrap是 一種流行的響應式 CSS 框架，它也正在從 Less 轉換到 Sass。而且，當大多數人談論 Sass時，他們實際上是在談論 SCSS。

CSS 后處理器在由預處理器手寫或編譯后對 CSS 應用更改。 例如，PostCSS 等一些后處理器具有自動添加瀏覽器供應商前綴的插件。

當您***次得知有 CSS預處理器和后處理器時，你很有可能在任何地方已經使用它們。 但是，從簡單開始，僅在必要時添加變量和 mixin 等擴展。 我之前建議的文章，Medium’s CSS is actually pretty f*ing good，也涵蓋了預處理器相關的知識。

網格系統和響應能力

網格系統是CSS結構，它允許你水平和垂直地堆疊元素。

Bootstrap，Skeleton 和 Foundation 等網格框架提供了管理布局中行和列的樣式表。 雖然網格框架很有用，但了解網格的工作原理也很重要。 理解CSS網格系統 和 Don’t Overthink Grids 這兩篇文章是很好的概述。

網格系統的主要目的之一是為你的網站添加響應性。響應性意味著你的網站根據窗口寬度調整大小。很多時候，響應是通過使用 CSS 媒體查詢實現的，CSS 規則只適用于特定的屏幕寬度。

[[261966]]

關于媒體查詢知識及擴展可以看看以下幾篇文章：

•  Intro to Media Queries
•  mobile-first
•  An Introduction to Mobile-First Media Queries

實踐 HTML 和 CSS ***實踐

現在你已經掌握了***實踐，讓我們進行測試。下面兩個實踐的目標是練習編寫干凈的代碼，并觀察***實踐對可讀性和可維護性的長期影響。

實踐 3

對于實踐 3，選擇你之前做過的項目，并使用你在這過程所學到的知識來重構你的代碼。重構意味著編寫代碼，使代碼更容易閱讀，更簡單。

能夠有效地重構代碼是前端開發人員的一項重要技能。 編寫高質量代碼是一個迭代過程。 CSS體系結構：重構你的 CSS 是重構代碼的入門指南。

[[261967]]

在重構代碼時，有幾件事需要問問自己。

*　你的取的類名是否有歧義?　6個月后，你還能理解你的類名是什么意思嗎?

*　你的 HTML 和 CSS 是語義化的嗎?當你瀏覽你的代碼時，你能快速辨別結構和關系的含義嗎?

•  你是否在代碼中反復使用相同的十六進制顏色代碼? 將它重構為一個 Sass變量 是否更有意義?
•  你的代碼在 Safari 和 Chrome 上運行得一樣的嗎?
•  你是否可以用類似于 Skeleton 的網格系統替換一些布局代碼?
•  你經常使用 !important 標志嗎?你怎么解決這個問題?

實踐 4

***一個實驗把你學到的關于***實踐的知識運用起來。然而，***實踐的效果通常不會變得明顯，直到你將它們應用到一個更大的項目中。

在***一個實踐中，為自己建立一個作品集網站。作為前端開發者，你的作品集網站是你最重要的數字資產之一。作品集是一個展示你作品的網站。更重要的是，它是一個持續的記錄，幫助你跟蹤你的進步和發展。所以即使你只有一兩件事要展示，也要展示出來。

[[261968]]

首先，跟隨阿德漢姆·達納韋的文章 《設計和開發作品集網站站的簡單工作流程》

如果你的***個作品集網站迭代并不***，那也沒關系。作品集網站需要經歷許多迭代。還有，重要的是你要用自己的技能來建造它。

與時俱進

雖然 HTML 和 CSS 不會很快過時，但是跟上前端環境的發展是很重要的。

[[261969]]

下面是一個網站、博客和論壇的列表，這些網站、博客和論壇閱讀起來既有趣且信息豐富。

•  CSSTricks
•  Smashing Magazine
•  Designer News
•  Nettuts+
•  CSS Wizard

通過例子學習

***，***的學習方法是以身作則。這里有一套樣式指南和編碼規范，將教你如何成為一個更有效的前端。

樣式指南

Web 樣式指南是可以在整個網站中重用的 CSS 組件和模式的集合。從這些樣式指南中需要注意的關鍵問題是，基于組件的 HTML 和 CSS 方法如何允許重用代碼來保持代碼的清爽(DRY)。

•  Mapbox
•  LonelyPlanet
•  SalesForce
•  MailChimp

編碼規范

編碼規范讓代碼易讀且可維護。其中一些鏈接(如 CSS Guidelines)是編寫更好的 HTML 和 CSS 的指南，而其他鏈接(如 Github internal CSS toolkit and Guidelines)是高質量代碼的例子。

•  CSS Guidelines
•  Github internal CSS toolkit and guidelines
•  AirBnB’s CSS Styleguide

小結

希望在本文結束時，你已經熟悉 HTML 和 CSS，并掌握了一些項目。 學習前端的***方式是建立項目和實踐。 請記住，每個前端開發人員都必須從某個地方開始。 從今天開始比明天開始更好。

本文是兩部分系列中的***部分。 第二篇文章介紹了如何使用 Javascript 和 Javascript庫/框架添加交互性，共勉，同進步。