大前端有很多種，Shell 前端，客戶端前端，App 前端，Web 前端和可能接下來很會(huì)火起來的 VR 前端等。當(dāng)然在這篇文章，集中討論一下身為小白，我們?cè)鯓尤チ私?Web 前端，以至達(dá)到一種入門級(jí)別的水平。
這同時(shí)也可作為任何一門編程語言入門之旅的小參考，不足之處歡迎指出。
互聯(lián)網(wǎng)的快速發(fā)展和激烈競(jìng)爭(zhēng)，用戶體驗(yàn)成為一個(gè)重要的關(guān)注點(diǎn)，導(dǎo)致專業(yè)前端工程師成為熱門職業(yè)，各大公司對(duì)前端工程師的需求量都很大，要求也越來越高，優(yōu)秀的前端工程師更是稀缺。個(gè)人感覺前端入門相對(duì)容易，但是也需要系統(tǒng)地認(rèn)真學(xué)習(xí)，在打好基礎(chǔ)后堅(jiān)持學(xué)習(xí)，成為優(yōu)秀前端工程師也只是時(shí)間問題。
當(dāng)然，學(xué) Web 前端的源動(dòng)力也可以僅僅是想在瀏覽器上跑一個(gè)自己寫的小游戲，或者好奇一下這個(gè)互聯(lián)網(wǎng)的工作原理咯。
在瀏覽器中輸入 www.jianshu.com 訪問可愛的簡(jiǎn)書，?服務(wù)器就會(huì)發(fā)來簡(jiǎn)書網(wǎng)頁的源代碼和一些圖片，接著瀏覽器執(zhí)行這些代碼并將結(jié)果顯示在瀏覽器窗口中，我們便可以進(jìn)一步操作。
打開簡(jiǎn)書后，在( Chrome )瀏覽器窗口任意位置點(diǎn)擊右鍵 -> 檢查（快捷鍵 Ctrl + Alt + I 或 Alt + Commd + I）即可打開開發(fā)者模式，可見每一個(gè)我們能夠看到的界面都是源代碼被處理的結(jié)果。而這個(gè)源代碼便是 Web 前端要去入手了解的第一步。
那么都該學(xué)什么才可以做出這么好看有趣的網(wǎng)頁呢？可以從@ Phodal 大神之前寫過的 Web 技能樹看出Web 前端的技能三大基石 -- HTML，CSS，JavaScript。
以及幾年前一個(gè)很流行的前端工程師技能圖譜可以借鑒學(xué)習(xí)。
其中，HTML 是超文本標(biāo)記語言，文件以 .htm 或 .html 為擴(kuò)展名，每當(dāng)有一個(gè) HTTP 請(qǐng)求（可以先理解為瀏覽器要訪問網(wǎng)頁的標(biāo)準(zhǔn)請(qǐng)求），服務(wù)器便根據(jù)請(qǐng)求發(fā)送相應(yīng)的 HTML 文檔到客戶端進(jìn)行解析，我們便可以看到相應(yīng)的網(wǎng)頁。
CSS 指層疊樣式表 (Cascading Style Sheets)，樣式定義如何顯示HTML 元素，我們可以把 CSS 寫到 HTML 頁面的具體元素中、<head> </head> 標(biāo)簽中，或者直接引入外部以 .css 為拓展名的文件（外部樣式表）到 HTML 頁面中，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁面的布局和外觀。
JavaScript 是因特網(wǎng)上最流行的腳本語言，可以在不刷新整個(gè) HTML 的頁面時(shí)根據(jù)具體事件動(dòng)態(tài)的更改頁面內(nèi)容，使網(wǎng)頁真正的“活”了起來。這里不得不說的是，由于 JavaScript 近年來火熱發(fā)展，覆蓋已經(jīng)不僅僅局限于 Web 前端而涉及到服務(wù)端（Node.JS 等）甚至物聯(lián)網(wǎng)（例：致JavaScript也將征服的物聯(lián)網(wǎng)世界）和 VR 設(shè)備（例：打造VR世界: Oculus + Node.js + Three.js）上了。
編程語言的概念在這里只做引導(dǎo)，具體點(diǎn)進(jìn)下方“去哪兒入門 Web 前端編程語言”推薦的網(wǎng)址進(jìn)行深入理解~
這里按類別直接上幾個(gè)推薦學(xué)習(xí) Web 開發(fā)（不只是前端）的學(xué)習(xí)網(wǎng)站：
更多精彩盡在我的 Github 倉(cāng)庫(kù) Coding-Full-Stack-Intro之中。
這里是一些較為經(jīng)典的 IT 新聞網(wǎng)站，可以及時(shí)關(guān)注最新的技術(shù)改變
更多精彩盡在我的 Github 倉(cāng)庫(kù) Coding-Full-Stack-Intro之中。
寫 Web 前端源碼用什么工具寫？難道就用文本編輯器編輯 .txt 文件后將后綴改為 .html 才能打開并運(yùn)行嗎？當(dāng)然不是，這里有很多很棒的前端開發(fā)工具作為推薦。根據(jù)個(gè)人信仰，選擇其一就好。
WebStorm 一度被廣大中國(guó) JS 開發(fā)者譽(yù)為“ Web 前端開發(fā)神器”、“最強(qiáng)大的 HTML5 編輯器”、“最智能的 JavaScript IDE ”等，有智能的代碼補(bǔ)全，代碼格式化，html提示，聯(lián)想查詢，代碼重構(gòu)，代碼檢查和快速修復(fù)，代碼調(diào)試，代碼結(jié)構(gòu)瀏覽，代碼折疊和包裹或者去掉外圍代碼等等等等特點(diǎn)?？梢约?Git ，隨時(shí)將自己的代碼提交到遠(yuǎn)程代碼托管平臺(tái)。
Sublime 是程序員Jon Skinner于2008年1月份所開發(fā)出來的一款跨平臺(tái)輕量級(jí)文本編輯器。Sublime Text具有漂亮的用戶界面和強(qiáng)大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。配合上各種開發(fā)插件，便可達(dá)到高效開發(fā)的狀態(tài)。
Atom 是由 Github 官方發(fā)布，專門為程序員推出的一個(gè)跨平臺(tái)文本編輯器。具有簡(jiǎn)潔和直觀的圖形用戶界面，并有很多有趣的特點(diǎn)：支持CSS，HTML，JavaScript等網(wǎng)頁編程語言。它支持宏，自動(dòng)完成分屏功能，集成了文件管理器。
安利一個(gè) Atom 上的一個(gè)插件 -- activate-power-mode，打開會(huì)有震撼的敲擊代碼的效果。效果演示地址。
好的學(xué)習(xí)道理離不開實(shí)體書的陪伴。好的書籍便是節(jié)約學(xué)習(xí)時(shí)間、拓展視野的一個(gè)高效道具。從 HTML + CSS + JavaScript 出發(fā)推薦一些書籍。
節(jié)選自 FKS 前端書籍推薦
說了這么多，這也僅僅才是開始。Web 前端開發(fā)之路也是認(rèn)知整個(gè)計(jì)算機(jī)科學(xué)之路，這一路技術(shù)底蘊(yùn)必不可少。如果能再做到下面幾點(diǎn)就更好了。
9 月份就要發(fā)布 HTML 5.1 了，這么重大的新聞，還在等什么。。？
沒有最快的捷徑，只有堅(jiān)持下去才能找到意義。
聯(lián)系客服
