摘要：第一部分介紹了如何使用和開發接口。由于系統變得越來越復雜，人們提出了稱為預處理器和后處理器的工具來管理復雜性。當您第一次得知有預處理器和后處理器時，你很有可能在任何地方已經使用它們。我之前建議的文章，，也涵蓋了預處理器相關的知識。

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

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

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

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

在前端開發中，一切都從 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 有了基本的了解，讓我們來找點樂趣。在本節中，有兩個實踐旨在為你提供構建網站和界面的實踐。我用“實踐”這個詞是因為在實踐中，你從失敗中學到的東西和你從成功中學到的一樣多。

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

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

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

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

Twitter小部件

Article News Card

Simple Flat Menu

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

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

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

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

AirBnB: 嘗試復制他們的頁腳

PayPa:試著復制他們的導航欄l

Invision :嘗試復制頁面底部的注冊部分

Stripe: 嘗試復制他們的支付部分

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

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

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

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

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

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

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

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

自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 規則只適用于特定的屏幕寬度。

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

Intro to Media Queries

mobile-first

An Introduction to Mobile-First Media Queries

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

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

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

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

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

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

你是否在代碼中反復使用相同的十六進制顏色代碼? 將它重構為一個 Sass變量 是否更有意義?

你的代碼在 Safari 和 Chrome 上運行得一樣的嗎?

你是否可以用類似于 Skeleton 的網格系統替換一些布局代碼?

你經常使用 !important 標志嗎?你怎么解決這個問題?

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

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

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

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

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

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

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庫/框架添加交互性，共勉，同進步。

你的點贊是我持續分享好東西的動力，歡迎點贊！

干貨系列文章匯總如下，覺得不錯點個Star，歡迎 加群 互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。