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

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

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

HTML 和 CSS 基礎(chǔ)

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

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

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

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

另外，了解如何使用 CSS Tricks 的 Google 字體 的 API 基礎(chǔ)知識(shí)。 排版是界面的基本構(gòu)建塊。 如果你有時(shí)間，我強(qiáng)烈建議你閱讀這本免費(fèi)的在線書籍，Donny Truong 的 Professional Web Typography 它教你作為前端開發(fā)人員需要了解的關(guān)于排版的一切。

通過這些資源，不要太擔(dān)心記憶的問題。相反，重點(diǎn)是理解 HTML 和 CSS 如何協(xié)同工作。

練習(xí) HTML 和 CSS 基礎(chǔ)

現(xiàn)在你已經(jīng)對 HTML 和 CSS 有了基本的了解，讓我們來找點(diǎn)樂趣。在本節(jié)中，有兩個(gè)實(shí)踐旨在為你提供構(gòu)建網(wǎng)站和界面的實(shí)踐。我用“實(shí)踐”這個(gè)詞是因?yàn)樵趯?shí)踐中，你從失敗中學(xué)到的東西和你從成功中學(xué)到的一樣多。

實(shí)踐 1

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

通過使用 CodePen，你可以一石二鳥。一方面，你要練習(xí) HTML 和 CSS。另一方面，你創(chuàng)建一個(gè)基本的進(jìn)度組合。我們還將使用 Dribbble，這是一個(gè)充滿設(shè)計(jì)靈感的網(wǎng)站。

在 Dribbble 找到一個(gè)簡單到可以在幾個(gè)小時(shí)內(nèi)編寫代碼的設(shè)計(jì)。我選擇了一些設(shè)計(jì)讓你開始:1、2、3、4 和 5。我選擇了手機(jī)為先的網(wǎng)頁設(shè)計(jì)，因?yàn)樗鼈儽茸烂婢W(wǎng)頁設(shè)計(jì)要簡單。不過，也可以自由選擇桌面設(shè)計(jì)。

[[261962]]

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

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

如果你出來的與原設(shè)計(jì)不同，請不要?dú)怵H。 繼續(xù)練習(xí)不同的設(shè)計(jì)，你會(huì)發(fā)現(xiàn)每次都有進(jìn)步。

如果你沒有設(shè)計(jì)背景，很可能你的設(shè)計(jì)眼光不夠成熟。具有良好設(shè)計(jì)眼光的前端開發(fā)人員將能夠識(shí)別好的設(shè)計(jì)并***地復(fù)制它們。幾周前，我寫了一篇關(guān)于如何培養(yǎng)你的設(shè)計(jì)眼光的文章。

實(shí)踐 2

希望***個(gè)實(shí)踐讓你對編寫 HTML 和 CSS 有一定的信心。 對于實(shí)踐 2，我們將看一些網(wǎng)站，然后編寫一些組件。

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

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

同樣，實(shí)踐2的重點(diǎn)不是重新創(chuàng)建整個(gè)頁面。選擇幾個(gè)關(guān)鍵組件，如導(dǎo)航欄或英雄部分進(jìn)行編碼。我在網(wǎng)站列表旁邊提供了一個(gè)建議，但是請隨意選擇其他組件。

HTML 和 CSS ***實(shí)踐

到目前為止，你已經(jīng)學(xué)習(xí)了 HTML 和 CSS 的基礎(chǔ)知識(shí)。下一步是學(xué)習(xí)***實(shí)踐。***實(shí)踐是一組提高代碼質(zhì)量的非正式規(guī)則。

語義標(biāo)記

HTML　和　CSS　的***實(shí)踐之一是編寫語義標(biāo)記。好的　web　語義意味著使用適當(dāng)?shù)摹TML　標(biāo)簽和有意義的 CSS 類名來表示結(jié)構(gòu)的意義。

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

CSS 命名規(guī)范

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

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

CSS重置

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

跨瀏覽器支持

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

CSS 預(yù)處理器與 CSS 后處理器

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

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

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

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

網(wǎng)格系統(tǒng)和響應(yīng)能力

網(wǎng)格系統(tǒng)是CSS結(jié)構(gòu)，它允許你水平和垂直地堆疊元素。

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

網(wǎng)格系統(tǒng)的主要目的之一是為你的網(wǎng)站添加響應(yīng)性。響應(yīng)性意味著你的網(wǎng)站根據(jù)窗口寬度調(diào)整大小。很多時(shí)候，響應(yīng)是通過使用 CSS 媒體查詢實(shí)現(xiàn)的，CSS 規(guī)則只適用于特定的屏幕寬度。

[[261966]]

關(guān)于媒體查詢知識(shí)及擴(kuò)展可以看看以下幾篇文章：

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

實(shí)踐 HTML 和 CSS ***實(shí)踐

現(xiàn)在你已經(jīng)掌握了***實(shí)踐，讓我們進(jìn)行測試。下面兩個(gè)實(shí)踐的目標(biāo)是練習(xí)編寫干凈的代碼，并觀察***實(shí)踐對可讀性和可維護(hù)性的長期影響。

實(shí)踐 3

對于實(shí)踐 3，選擇你之前做過的項(xiàng)目，并使用你在這過程所學(xué)到的知識(shí)來重構(gòu)你的代碼。重構(gòu)意味著編寫代碼，使代碼更容易閱讀，更簡單。

能夠有效地重構(gòu)代碼是前端開發(fā)人員的一項(xiàng)重要技能。 編寫高質(zhì)量代碼是一個(gè)迭代過程。 CSS體系結(jié)構(gòu)：重構(gòu)你的 CSS 是重構(gòu)代碼的入門指南。

[[261967]]

在重構(gòu)代碼時(shí)，有幾件事需要問問自己。

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

*　你的 HTML 和 CSS 是語義化的嗎?當(dāng)你瀏覽你的代碼時(shí)，你能快速辨別結(jié)構(gòu)和關(guān)系的含義嗎?

•  你是否在代碼中反復(fù)使用相同的十六進(jìn)制顏色代碼? 將它重構(gòu)為一個(gè) Sass變量 是否更有意義?
•  你的代碼在 Safari 和 Chrome 上運(yùn)行得一樣的嗎?
•  你是否可以用類似于 Skeleton 的網(wǎng)格系統(tǒng)替換一些布局代碼?
•  你經(jīng)常使用 !important 標(biāo)志嗎?你怎么解決這個(gè)問題?

實(shí)踐 4

***一個(gè)實(shí)驗(yàn)把你學(xué)到的關(guān)于***實(shí)踐的知識(shí)運(yùn)用起來。然而，***實(shí)踐的效果通常不會(huì)變得明顯，直到你將它們應(yīng)用到一個(gè)更大的項(xiàng)目中。

在***一個(gè)實(shí)踐中，為自己建立一個(gè)作品集網(wǎng)站。作為前端開發(fā)者，你的作品集網(wǎng)站是你最重要的數(shù)字資產(chǎn)之一。作品集是一個(gè)展示你作品的網(wǎng)站。更重要的是，它是一個(gè)持續(xù)的記錄，幫助你跟蹤你的進(jìn)步和發(fā)展。所以即使你只有一兩件事要展示，也要展示出來。

[[261968]]

首先，跟隨阿德漢姆·達(dá)納韋的文章 《設(shè)計(jì)和開發(fā)作品集網(wǎng)站站的簡單工作流程》

如果你的***個(gè)作品集網(wǎng)站迭代并不***，那也沒關(guān)系。作品集網(wǎng)站需要經(jīng)歷許多迭代。還有，重要的是你要用自己的技能來建造它。

與時(shí)俱進(jìn)

雖然 HTML 和 CSS 不會(huì)很快過時(shí)，但是跟上前端環(huán)境的發(fā)展是很重要的。

[[261969]]

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

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

通過例子學(xué)習(xí)

***，***的學(xué)習(xí)方法是以身作則。這里有一套樣式指南和編碼規(guī)范，將教你如何成為一個(gè)更有效的前端。

樣式指南

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

•  Mapbox
•  LonelyPlanet
•  SalesForce
•  MailChimp

編碼規(guī)范

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

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

小結(jié)

希望在本文結(jié)束時(shí)，你已經(jīng)熟悉 HTML 和 CSS，并掌握了一些項(xiàng)目。 學(xué)習(xí)前端的***方式是建立項(xiàng)目和實(shí)踐。 請記住，每個(gè)前端開發(fā)人員都必須從某個(gè)地方開始。 從今天開始比明天開始更好。

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