版權申明：
此文章首發(fā)于公眾號程序員在深圳，搜索 studycode 即可關注
本文無需授權即可轉(zhuǎn)載姚炕，轉(zhuǎn)載時請務必注明作者
我還記得當我剛開始學習前端開發(fā)時摊欠，我被大量的技術文章淹沒，當時讓我非常困惑的是：我究竟需要學多少知識才算足夠柱宦，我甚至不知道從哪里開始些椒。
這篇指南會告訴你學習前端開發(fā)的方向，它會提供一些過去我在學習中遇到的非常有效的學習資源掸刊，并伴隨著我的一些注解免糕。
為了讓這篇指南更容易消化，我將它分成了兩部分，第一部分主要講HTML和CSS的開發(fā)接口石窑，第二部分主要講Javascript牌芋，框架，以及設計模式松逊，如果你對HTML和CSS很熟悉躺屁，你可以直接跳到第二部分，那里全都是Javascript经宏。
HTML和CSS基礎
在前端開發(fā)中犀暑，所有事物都以HTML和CSS開始，HTML和CSS控制了你在網(wǎng)頁上看到的內(nèi)容烁兰，HTML負責網(wǎng)頁內(nèi)容耐亏，而CSS負責樣式和布局。
開始前沪斟，讀一讀Mozilla開發(fā)網(wǎng)（MDN）上的HTML和CSS入門广辰，MDN將會講解HTML和CSS中重要的概念，另外主之，每章節(jié)僅僅只有一張紙那么長择吊，另外它還提供交互頁面的鏈接（CodePen和JSFiddle）幫助你學習。
完成這些入門教程后杀餐，可以學下CodeAcademy的課程Make a Website干发。完成這篇教程只需要幾個小時，它是使用HTML和CSS構建網(wǎng)站很好的入門教程史翘，如果你停不下來枉长，CodeAcademy還提供了另一個入門教程Building web forms，可以幫助你創(chuàng)建一個帶有樣式的表單琼讽。
如果想要做一些CSS的練習必峰，試試CSS Diner，它是一個有趣的CSS挑戰(zhàn)游戲钻蹬，另外一個重要的HTML和CSS概念是布局吼蚁，LearnLayout是一個教你如何使用HTML和CSS創(chuàng)建布局的交互式教程。
同樣的，要學會利用Google字體API使用Google字體的CSS技巧，Typography是一個排版組織（block of interfaces）坛悉，如果你有時間，我強烈建議你讀一讀這本免費的在線書籍Professional Web Typography旗国，作者是Donny Truong，你將學到作為前端工程師所需要了解的所有排版知識注整。
通過這些資源后能曾，不要擔心自己記不住度硝，而是將你的注意力集中在HTML和CSS在一起是如何工作的。
HTML和CSS基礎練習
目前你對HTML和CSS有了基本的認識寿冕，接下來我們玩點更有趣的蕊程。這一章節(jié)里，會有兩個實驗驼唱，它們會教你如何創(chuàng)建網(wǎng)站和界面藻茂。我用“實驗”這個詞的目的是：在實驗中，你從失敗中學到的東西將會和你從成功中學到的一樣多
實驗1
第一個試驗中玫恳，我們將學習使用CodePen捌治。CodePen是一個前端編輯網(wǎng)站，在那里纽窟，你無需本地保存文件，就可以寫HTML和CSS代碼兼吓。當你保存代碼的同時臂港，你便可以進行在線預覽。
CodePen是一個一石二鳥的工具视搏，一方面审孽，他可以幫助你練習HTML和CSS編程，另一方面浑娜，你創(chuàng)建了一個可以跟蹤你進步的文件夾佑力。我們還將使用Dribbble，這個網(wǎng)站充滿了設計靈感筋遭。
進入Dribbble網(wǎng)站打颤，選擇一些在幾個小時就可以完成的設計，我替你選了幾個幫助你開始：1漓滔，2编饺，3，4和5响驴，首先從移動頁面設計開始透且，因為我覺得它們比pc端頁面簡單，當然豁鲤，也不用擔心pc端頁面設計會很難秽誊。
當你開始動手時，嘗試在CodePen中寫代碼琳骡，如果你卡住了锅论，記住StackOverflow是你的朋友，另一種非常有價值的練習則是登錄像Medium日熬，AirBnB或Dropbox這樣的網(wǎng)站棍厌，使用Chome中的檢查工具查看這些頁面是如何實現(xiàn)不同的布局和樣式的肾胯。然后，仔細研究CodePen中的部分畫筆耘纱，同樣敬肚，我也挑選了幾個不錯的鏈接：
如果你的“復制品”看起來和“參照物”不太一樣，你也不必灰心束析，繼續(xù)做不同的設計練習艳馒，你會發(fā)現(xiàn)每次你都會進步。
如果你沒有任何設計背景员寇，說明你的設計之眼沒有被開發(fā)出來弄慰，一個擁有設計之眼的前端開發(fā)工程師能夠很容易分辨好的設計并有能力將其完美復制出來。前不久我寫了一篇關于如何開發(fā)設計之眼的文章蝶锋。
實驗2
希望第一個實驗能給你帶來一些HTML和CSS的信心陆爽。在第2個實驗中，我們將看一些網(wǎng)站扳缕，然后試圖實現(xiàn)它們的組件慌闭。
一些網(wǎng)站會使用CSS框架，或重命名它們的CSS類名躯舔，這樣的代碼讀起來非常困難驴剔，所以我挑選了一些源代碼很好讀的網(wǎng)站，這些網(wǎng)站擁有良好的設計粥庄。
- Dropbox for Business: 試著復制hero段落
- AirBnB: 試著復制頁腳段落
- PayPal: 試著復制導航條
- Invision: 試著復制頁面底部的登錄部分
- Stripe: 試著復制支付部分
同樣的丧失，第2個實驗的重點也不是重建整個頁面。選擇一些像導航條或hero段落這樣的關鍵組件去編碼惜互，對于做什么組件布讹，我已經(jīng)在網(wǎng)站列表右邊給出了建議。
你可以在CodePen中做這些實驗或者在本地操作载佳，如果你選擇將其存放在本地炒事，你可以選擇把這個例子工程作為模板下載下來，或者手動抓取這些文件蔫慧。我建議你使用Atom或Sublime編輯器
同時挠乳，請記住在任何頁面，你都可以看見它的HTML和CSS代碼姑躲，僅僅只需要右鍵頁面或頁面中的一個組件睡扬，點擊檢查，一個HTML在左黍析、CSS在右的面板便會彈出卖怜，一旦你完成了或卡住了，也可以使用檢查器對你的HTML和CSS進行對照阐枣。
HTML马靠、CSS最佳練習
到目前為止奄抽，我們學到了基本的HTML和CSS，下面我們將要進入最佳練習甩鳄，最佳練習指的是一些能幫助你提升代碼質(zhì)量的非常規(guī)規(guī)則逞度。
語義標記
如何寫語義標簽是HTML和CSS的最佳實踐之一，好的語義意味著使用合適的HTML標簽以及有意義的CSS類名妙啃，它們可以傳達結構的含義档泽。
例如，h1標簽標記的文字代表它們是很重要的標題揖赴，再如footer標簽馆匿，同樣告訴我們這部分元素屬于頁面的底部。更進一步燥滑，建議你讀一下A Look Into Proper HTML5 Semantics以及關于CSS技巧的文章：What Makes For a Semantic Class Name
CSS命名約定
另一個重要的最佳實踐則是CSS命名約定渐北，像語義標簽一樣，好的命名約定铭拧，會傳達出有意義的內(nèi)容腔稀、使我們的代碼具有可預見性、可讀以及可維護羽历。你可以讀一讀這篇文章，講的是不同的命名約定: OOCSS, ACSS, BEM, SMACSS: What are they? What should I use?
我還建議你嘗試使用簡單的命名約定以培養(yǎng)你對它們的直覺感受淡喜，因為隨著時間推移秕磷，你將探索出那些最適合你的工作方式。想知道Medium這類公司是如何利用BEM這一命名約定的炼团，可以讀下Medium's CSS is actually pretty f***ing good澎嚣。在那篇文章中，你將了解到創(chuàng)建一組高效的CSS語法是一個逐步迭代的過程瘟芝。
CSS重置
從邊緣到邊框易桃，瀏覽器具有較小的樣式不一致性。因此锌俱，請務必重置CSS晤郑。MeyerWeb是一個流行的重置工具。 如果你想更深入贸宏，你可以閱讀Create Your Own Simple Reset.css File
跨瀏覽器支持
跨瀏覽器支持意味著您的代碼需要支持最新的瀏覽器造寝。 某些CSS屬性（如轉(zhuǎn)換）需要供應商前綴才能在不同的瀏覽器中正常工作。 您可以在這篇本章中了解有關供應商前綴的更多信息吭练，CSS供應商前綴诫龙。 主要的代價是，您需要在多個瀏覽器（包括Chrome鲫咽，F(xiàn)irefox和Safari）上測試您的網(wǎng)站签赃。
CSS預處理器和后處理器
自從90年代引入CSS以來谷异，CSS已經(jīng)走了很長的路。 由于UI系統(tǒng)變得越來越復雜锦聊，人們想出了被稱為預處理器和后處理器的工具來管理復雜性歹嘹。
CSS預處理器是CSS語言擴展，增加了諸如變量括丁，多態(tài)和繼承的特性（bells和whistles）荞下。 兩個主要的CSS預處理器是Sass和Less。 在2016年史飞，Sass開始被更廣泛地使用尖昏。 Bootstrap，流行的響應式CSS框架构资，也從Less切換到Sass抽诉。 此外，當大多數(shù)人談論Sass時吐绵，他們實際上在談論SCSS迹淌。
CSS后處理器支持在CSS被預處理器手寫或編譯后仍可更改。 例如己单，一些后處理器（如PostCSS）具有自動添加瀏覽器供應商前綴的插件唉窃。
當你第一次發(fā)現(xiàn)CSS預處理器和后處理器，它是會引誘你無處不在的使用它們纹笼。 但是纹份，建議你從簡單開始，只有在必要時才添加擴展廷痘，例如變量和多態(tài)蔓涧。 我之前提到的文章——Medium’s CSS is actually pretty f***ing good——涵蓋了在涉及到預處理器時，使用多少才是合適的相關內(nèi)容笋额。
網(wǎng)格系統(tǒng)和響應式
網(wǎng)格系統(tǒng)幫助把CSS結構豎直的和水平的排列起來元暴。
像Bootstrap，Skeleton和Foundation這樣的網(wǎng)格框架提供了用于管理布局中的行和列的樣式表兄猩。 雖然網(wǎng)格框架很有用茉盏，但了解網(wǎng)格如何工作也很重要。 了解CSS網(wǎng)格系統(tǒng)和不要對網(wǎng)絡想多了是重要的概述枢冤。
網(wǎng)格系統(tǒng)的主要目的之一是為您的網(wǎng)站增加響應能力援岩。 響應性意味著您的網(wǎng)站可以基于窗口寬度調(diào)整大小。多次響應是由CSS媒體查詢實現(xiàn)的掏导，CSS規(guī)則僅僅適應于特定的屏幕寬度享怀。
您可以在媒體查詢簡介中了解有關媒體查詢的詳情。 另外趟咆，因為我們已經(jīng)進入了移動互聯(lián)網(wǎng)時代添瓷，請查看Mobile-First Media Queries簡介梅屉。
練習HTML和CSS最佳實踐
現(xiàn)在你已經(jīng)武裝了最佳實踐的武器，我們可以用它來做一些"軍式演習"鳞贷，下兩個實驗的目標是練習寫干凈整潔的代碼坯汤，以及長期觀察最佳實踐對可維護性和可讀性的影響。
實驗3
第三個實驗是搀愧，挑選一個之前的實驗惰聂，并使用學到的最佳實踐方法來重構它，重構的意思是編輯你的代碼咱筛，讓它變得更容易讀和減少它的復雜性搓幌。
最為一個前端開發(fā)者，能夠有效的重構代碼是一項重要的能力迅箩。寫出高質(zhì)量代碼是一個不斷迭代的過程溉愁。這篇CSS架構：重構你的CSS很好的講述了如何開始重構你的代碼。
當你在重構代碼時饲趋，你需要問自己幾個問題：
- 你的類名是否模糊不清拐揭？在六個月后嗎，你還會記得這些類名的意思嗎奕塑？
- 你的HTML和CSS具有語義嗎堂污？當你在此審視你的代碼時，你還能快速辨別結構和關系的意義嗎龄砰？
- 你還在一遍遍的使用十六進制顏色編碼嗎敷鸦？難道使用Sass變量重構它們不會更能表達它們的意思嗎？
- 你的代碼在Safari上是否和在Chrome上一樣好呢寝贡？
- 你可以把你的布局代碼換成想Skeleton這樣的網(wǎng)格系統(tǒng)嗎？
- 你經(jīng)常用!important標簽嗎值依？你如何解決這個問題圃泡？
實驗4
最后一個實驗將告訴你如何使用你學到的最佳實踐。 然而愿险，最佳實踐的效果往往不明顯颇蜡，直到您將它們應用到一個更大的項目。
對于最后一個實驗辆亏，建立自己的文件夾網(wǎng)站风秤。 作為前端，您的文件夾網(wǎng)站是您最重要的數(shù)字資產(chǎn)之一扮叨。文件夾是展示您的工作的網(wǎng)站缤弦。 更重要的是，這是一個持續(xù)的記錄彻磁，可以幫助你跟蹤你的進步和發(fā)展碍沐。所以即使你只有1或2件事可以展示狸捅，你也應該把它們放上去。
在開始之前累提，先學習一下Adham Dannaway的文章尘喝，我的（簡單）工作流：設計開發(fā)一個文件夾網(wǎng)站。
如果你的文件夾剛開始并不完美斋陪，也沒關系朽褪，隨著時間推移，文件夾會迭代无虚，最重要的是缔赠，你將使用你自己的技能來創(chuàng)造它。
保持更新
雖然HTML和CSS不會馬上過時骑科，但保持最新的技術視野是一件很重要的事情橡淑。
下面的網(wǎng)站，博客以及論壇列表很有意思咆爽，也很有價值：
從例子中學習
最后梁棠，最好的學習方式是從例子中學習， 這里有一套styleguides和代碼約定斗埂，將教你如何成為一個更有效的前端符糊。
Styleguides
Web Styleguides是可以在網(wǎng)站上重復使用的CSS組件和模式的集合。從這些Styleguides中要注意的關鍵是呛凶，基于HTML和CSS組件的復用, 如何讓你保持DRY原則男娄。
代碼約定
代碼約定被設計用來提高代碼的可讀性和可維護性。很多像CSS指南這樣的頁面是為了幫助你寫出更好的HTML和CSS代碼漾稀。另一些像Github內(nèi)部CSS工具和指南這樣的頁面提供了高質(zhì)量代碼的示例
圓滿
希望在本文結束時模闲，你已經(jīng)非常熟悉HTML和CSS了，并有一些項目在折騰了崭捍。 學習前端的最好方法是建立項目和實驗尸折。 記住，每個前端開發(fā)人員都必須從某處開始殷蛇。 從今天開始比明天更好实夹。
本文是兩部分系列的第一部分。第二篇文章介紹了使用Javascript和JavaScript庫/框架添加交互性粒梦。此外亮航，如果你想要我詳細說明任何事情或有任何問題，隨時留言或Tweet給我匀们。
原文：zero to front-end hero
作者：Jonathan Z. White 翻譯：jieniu
