大前端之旅
大前端有很多種，Shell 前端，客戶端前端，App 前端，Web 前端和可能接下來(lái)很會(huì)火起來(lái)的 VR 前端等。當(dāng)然在這篇文章，集中討論一下身為小白，我們?cè)鯓尤チ私? Web 前端，以至達(dá)到一種入門(mén)級(jí)別的水平。
這同時(shí)也可作為任何一門(mén)編程語(yǔ)言入門(mén)之旅的小參考，不足之處歡迎指出。
為什么學(xué) Web 前端
互聯(lián)網(wǎng)的快速發(fā)展和激烈競(jìng)爭(zhēng)，用戶體驗(yàn)成為一個(gè)重要的關(guān)注點(diǎn)，導(dǎo)致專(zhuān)業(yè)前端工程師成為熱門(mén)職業(yè)，各大公司對(duì)前端工程師的需求量都很大，要求也越來(lái)越高，優(yōu)秀的前端工程師更是稀缺。個(gè)人感覺(jué)前端入門(mén)相對(duì)容易，但是也需要系統(tǒng)地認(rèn)真學(xué)習(xí)，在打好基礎(chǔ)后堅(jiān)持學(xué)習(xí)，成為優(yōu)秀前端工程師也只是時(shí)間問(wèn)題。
當(dāng)然，學(xué) Web 前端的源動(dòng)力也可以僅僅是想在瀏覽器上跑一個(gè)自己寫(xiě)的小游戲，或者好奇一下這個(gè)互聯(lián)網(wǎng)的工作原理。
瀏覽器上的頁(yè)面
在瀏覽器中輸入 www.itdecent.cn 訪問(wèn)簡(jiǎn)書(shū)官網(wǎng)，服務(wù)器就會(huì)發(fā)來(lái)簡(jiǎn)書(shū)網(wǎng)頁(yè)的源代碼和一些圖片，接著瀏覽器執(zhí)行這些代碼并將結(jié)果顯示在瀏覽器窗口中，我們便可以進(jìn)一步操作。
查看頁(yè)面源代碼
打開(kāi)簡(jiǎn)書(shū)后，在( Chrome )瀏覽器窗口任意位置點(diǎn)擊右鍵 -> 檢查（快捷鍵 Ctrl + Alt + I 或 Alt + Commd + I）即可打開(kāi)開(kāi)發(fā)者模式，可見(jiàn)每一個(gè)我們能夠看到的界面都是源代碼被處理的結(jié)果。而這個(gè)源代碼便是 Web 前端要去入手了解的第一步。
Web 前端小白技能點(diǎn)
那么都該學(xué)什么才可以做出這么好看有趣的網(wǎng)頁(yè)呢？可以從 @Phodal 大神之前寫(xiě)過(guò)的 Web 技能樹(shù)看出 Web 前端的三大語(yǔ)言基石 -- HTML，CSS，JavaScript。
以及幾年前一個(gè)很流行的前端工程師技能圖譜可以借鑒學(xué)習(xí)。
其中，HTML 是超文本標(biāo)記語(yǔ)言，文件以 .htm 或 .html 為擴(kuò)展名，每當(dāng)有一個(gè) HTTP 請(qǐng)求（可以先理解為瀏覽器要訪問(wèn)網(wǎng)頁(yè)的標(biāo)準(zhǔn)請(qǐng)求），服務(wù)器便根據(jù)請(qǐng)求發(fā)送相應(yīng)的 HTML 文檔到客戶端進(jìn)行解析，我們便可以看到相應(yīng)的網(wǎng)頁(yè)。
CSS 即層疊樣式表 (Cascading Style Sheets)，定義如何顯示HTML 元素。我們可以把 CSS 寫(xiě)到 HTML 頁(yè)面的 <head> </head> 標(biāo)簽中，或者直接引入外部以 .css 為拓展名的文件（外部樣式表）到 HTML 頁(yè)面中，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。
JavaScript 是因特網(wǎng)上最流行的腳本語(yǔ)言，可以在不刷新整個(gè) HTML 的頁(yè)面時(shí)根據(jù)具體事件動(dòng)態(tài)的更改頁(yè)面內(nèi)容，使網(wǎng)頁(yè)真正的“活”了起來(lái)。這里不得不說(shuō)的是，由于 JavaScript 近年來(lái)火熱發(fā)展，覆蓋已經(jīng)不僅僅局限于 Web 前端而涉及到服務(wù)端（Node.JS 等）甚至物聯(lián)網(wǎng)和 VR 設(shè)備上了。
例1. 《致JavaScript也將征服的物聯(lián)網(wǎng)世界》
例2. 《打造VR世界: Oculus + Node.js + Three.js》
編程語(yǔ)言的概念在這里只做引導(dǎo)，具體點(diǎn)進(jìn)下方“去哪兒入門(mén) Web 前端編程語(yǔ)言”推薦的網(wǎng)址進(jìn)行深入理解~
去哪兒入門(mén) Web 前端編程語(yǔ)言概念
這里按類(lèi)別直接上幾個(gè)推薦學(xué)習(xí) Web 開(kāi)發(fā)（不只是前端）的學(xué)習(xí)網(wǎng)站：
- 文字類(lèi)編程學(xué)習(xí)：
- 視頻類(lèi)編程學(xué)習(xí)
- 過(guò)關(guān)挑戰(zhàn)類(lèi)編程學(xué)習(xí)
- 有趣的編程學(xué)習(xí) App
更多的內(nèi)容在我的 Github 倉(cāng)庫(kù) @hylerrix:FSD-Debris 中持續(xù)維護(hù)。
在哪兒了解 Web 前端編程語(yǔ)言動(dòng)態(tài)
這里是一些較為經(jīng)典的 IT 新聞網(wǎng)站，可以及時(shí)關(guān)注最新的技術(shù)改變
- 開(kāi)發(fā)者頭條
- 極客頭條
- 少數(shù)派
- 開(kāi)源中國(guó)
- CSDN
- ......
更多的內(nèi)容在我的 Github 倉(cāng)庫(kù) @hylerrix:FSD-Debris 中持續(xù)維護(hù)。
基本開(kāi)發(fā)工具
寫(xiě) Web 前端源碼用什么工具寫(xiě)？難道就用文本編輯器編輯 .txt 文件后將后綴改為 .html 才能打開(kāi)并運(yùn)行嗎？當(dāng)然不是，這里有很多很棒的前端開(kāi)發(fā)工具作為推薦。根據(jù)個(gè)人信仰，選擇其一就好。
WebStorm
WebStorm 一度被廣大中國(guó) JS 開(kāi)發(fā)者譽(yù)為“ Web 前端開(kāi)發(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 Text 3
Sublime 是程序員Jon Skinner于2008年1月份所開(kāi)發(fā)出來(lái)的一款跨平臺(tái)輕量級(jí)文本編輯器。Sublime Text具有漂亮的用戶界面和強(qiáng)大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。配合上各種開(kāi)發(fā)插件，便可達(dá)到高效開(kāi)發(fā)的狀態(tài)。
Atom
Atom 是由 Github 官方發(fā)布，專(zhuān)門(mén)為程序員推出的一個(gè)跨平臺(tái)文本編輯器。具有簡(jiǎn)潔和直觀的圖形用戶界面，并有很多有趣的特點(diǎn)：支持 CSS，HTML，JavaScript 等網(wǎng)頁(yè)編程語(yǔ)言。它支持宏，自動(dòng)完成分屏功能，集成了文件管理器。
安利一個(gè) Atom 上的一個(gè)插件 -- activate-power-mode，打開(kāi)會(huì)有震撼的敲擊代碼的效果。效果演示地址。
Web 前端前期書(shū)籍推薦
好的學(xué)習(xí)道理離不開(kāi)實(shí)體書(shū)的陪伴。好的書(shū)籍便是節(jié)約學(xué)習(xí)時(shí)間、拓展視野的一個(gè)高效道具。從 HTML + CSS + JavaScript 出發(fā)推薦一些書(shū)籍。
- Head First HTML與 CSS (第2版)
- CSS 權(quán)威指南(第3版)
- 精通CSS:高級(jí)Web標(biāo)準(zhǔn)解決方案(第2版)
- JavaScript DOM 編程藝術(shù)(第2版)
- JavaScript 高級(jí)程序設(shè)計(jì)(第3版)
- 高性能 JavaScript
- 鋒利的 jQuery(第2版)
節(jié)選自 FKS 前端書(shū)籍推薦
遇到問(wèn)題怎么辦
難道這就完了嗎
說(shuō)了這么多，這也僅僅才是開(kāi)始。Web 前端開(kāi)發(fā)之路也是認(rèn)知整個(gè)計(jì)算機(jī)科學(xué)之路，這一路技術(shù)底蘊(yùn)必不可少。如果能再做到下面幾點(diǎn)就更好了。
- 擁有自己的博客
可以在任何文章分享平臺(tái)記錄自己的學(xué)習(xí)過(guò)程，分享自己學(xué)習(xí)歷程。 - 提高英文能力
- 查英文文檔
- The Boat
- 編程中保證英文命名規(guī)范
- 用英文 git commit
- 英文博客和論壇
- freeCodeCamp -- 英文學(xué) web 全棧
- 引人深思的 TED
- 掌握 Git 能力
大部分的開(kāi)源項(xiàng)目我們都可以在 Github 上找到，掌握 Git 能力也就可以擁有整個(gè)開(kāi)源世界。 - 關(guān)注開(kāi)源項(xiàng)目
Github 作為全球最大的代碼托管平臺(tái)，有一些很有趣和有挑戰(zhàn)性的項(xiàng)目等著我們實(shí)戰(zhàn)，也有許多引導(dǎo)性的資源整合文章值得我們?nèi)?Star 點(diǎn)贊。奉上一些有趣的開(kāi)源項(xiàng)目(文檔類(lèi))。 - 關(guān)注業(yè)界
了解那些互聯(lián)網(wǎng)的引領(lǐng)者，他們?cè)谧鍪裁?、解決了什么問(wèn)題、取得了什么成就。然后換位思考，找到自己的奮斗方向。同時(shí)關(guān)注業(yè)界動(dòng)態(tài)，了解 BAT 等互聯(lián)網(wǎng)公司的人才需求。
HTML 5.1
9 月份就要發(fā)布 HTML 5.1 了，這么重大的新聞，還在等什么。。？
- Hello，我是韓亦樂(lè)，現(xiàn)任本科軟工男一枚。軟件工程專(zhuān)業(yè)的一路學(xué)習(xí)中，我有很多感悟，也享受持續(xù)分享的過(guò)程。如果想了解更多或能及時(shí)收到我的最新文章，歡迎訂閱我的個(gè)人微信號(hào)：韓亦樂(lè)。我的簡(jiǎn)書(shū)個(gè)人主頁(yè)中，有我的訂閱號(hào)二維碼和 Github 主頁(yè)地址；我的知乎主頁(yè) 中也會(huì)堅(jiān)持產(chǎn)出，歡迎關(guān)注。
- 本文內(nèi)部編號(hào)經(jīng)由我的 Github 相關(guān)倉(cāng)庫(kù)統(tǒng)一管理；本文可能發(fā)布在多個(gè)平臺(tái)但僅在上述倉(cāng)庫(kù)中長(zhǎng)期維護(hù)；本文同時(shí)采用【知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議】進(jìn)行許可。
