前注：這篇文章首發於我自己創辦的服務於校園的技術分享 【西郵 Upper -- 004】Web前端小白入門指迷，寫得很用心也就發在這里。
大前端之旅
大前端有很多種，Shell 前端，客戶端前端，App 前端，Web 前端和可能接下來很會火起來的 VR 前端等。當然在這篇文章，集中討論一下身為小白，我們怎樣去了解 Web 前端，以至達到一種入門級別的水平。
這同時也可作為任何一門編程語言之旅的小參考，不足之處歡迎指出。
為什么學 Web 前端
互聯網的快速發展和激烈競爭，用戶體驗成為一個重要的關注點，導致專業前端工程師成為熱門職業，各大公司對前端工程師的需求量都很大，要求也越來越高，優秀的前端工程師更是稀缺。個人感覺前端入門相對容易，但是也需要系統地認真學習，在打好基礎后堅持學習，成為優秀前端工程師也只是時間問題。
當然，學 Web 前端的源動力也可以僅僅是想在瀏覽器上跑一個自己寫的小游戲，或者好奇一下這個互聯網的工作原理咯。
瀏覽器上的頁面
在瀏覽器中輸入 www.jianshu.com 訪問可愛的簡書，服務器就會發來簡書網頁的源代碼和一些圖片，接着瀏覽器執行這些代碼並將結果顯示在瀏覽器窗口中，我們便可以進一步操作。
查看頁面源代碼
打開簡書后，在( Chrome )瀏覽器窗口任意位置點擊右鍵 -> 檢查（快捷鍵 Ctrl + Alt + I 或 Alt + Commd + I）即可打開開發者模式，可見每一個我們能夠看到的界面都是源代碼被處理的結果。而這個源代碼便是 Web 前端要去入手了解的第一步。
Web 前端小白技能點
那么都該學什么才可以做出這么好看有趣的網頁呢？可以從@ Phodal 大神之前寫過的 Web 技能樹看出Web 前端的技能三大基石 -- HTML，CSS，JavaScript。
以及幾年前一個很流行的前端工程師技能圖譜可以借鑒學習。
其中，HTML 是超文本標記語言，文件以 .htm 或 .html 為擴展名，每當有一個 HTTP 請求（可以先理解為瀏覽器要訪問網頁的標准請求），服務器便根據請求發送相應的 HTML 文檔到客戶端進行解析，我們便可以看到相應的網頁。
CSS 指層疊樣式表 (Cascading Style Sheets)，樣式定義如何顯示HTML 元素，我們可以把 CSS 寫到 HTML 頁面的具體元素中、 標簽中，或者直接引入外部以 .css 為拓展名的文件（外部樣式表）到 HTML 頁面中，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。
JavaScript 是因特網上最流行的腳本語言，可以在不刷新整個 HTML 的頁面時根據具體事件動態的更改頁面內容，使網頁真正的“活”了起來。這里不得不說的是，由於 JavaScript 近年來火熱發展，覆蓋已經不僅僅局限於 Web 前端而涉及到服務端（Node.JS 等）甚至物聯網（例：致JavaScript也將征服的物聯網世界）和 VR 設備（例：打造VR世界: Oculus + Node.js + Three.js）上了。
編程語言的概念在這里只做引導，具體點進下方“去哪兒入門 Web 前端編程語言”推薦的網址進行深入理解~
去哪兒入門 Web 前端編程語言概念
這里按類別直接上幾個推薦學習 Web 開發（不只是前端）的學習網站：
- 文字類編程學習：
- 視頻類編程學習
- 過關挑戰類編程學習
- 有趣的編程學習 App
- Growth
- ......
更多精彩盡在 Upper 主的 Github 倉庫 Coding-Full-Stack-Intro 之中。
在哪兒了解 Web 前端編程語言動態
這里是一些較為經典的 IT 新聞網站，可以及時關注最新的技術改變
更多精彩盡在 Upper 主的 Github 倉庫 Coding-Full-Stack-Intro 之中。
基本開發工具
寫 Web 前端源碼用什么工具寫？難道就用文本編輯器編輯 .txt 文件后將后綴改為 .html 才能打開並運行嗎？當然不是，這里有很多很棒的前端開發工具作為推薦。根據個人信仰，選擇其一就好。
WebStorm
WebStorm 一度被廣大中國 JS 開發者譽為“ Web 前端開發神器”、“最強大的 HTML5 編輯器”、“最智能的 JavaScript IDE ”等，有智能的代碼補全，代碼格式化，html提示，聯想查詢，代碼重構，代碼檢查和快速修復，代碼調試，代碼結構瀏覽，代碼折疊和包裹或者去掉外圍代碼等等等等特點。可以集成 Git ，隨時將自己的代碼提交到遠程代碼托管平台。
Sublime Text 3
Sublime 是程序員Jon Skinner於2008年1月份所開發出來的一款跨平台輕量級文本編輯器。Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。配合上各種開發插件，便可達到高效開發的狀態。
Atom
Atom 是由 Github 官方發布，專門為程序員推出的一個跨平台文本編輯器。具有簡潔和直觀的圖形用戶界面，並有很多有趣的特點：支持CSS，HTML，JavaScript等網頁編程語言。它支持宏，自動完成分屏功能，集成了文件管理器。
安利一個 Atom 上的一個插件 -- activate-power-mode，打開會有震撼的敲擊代碼的效果。效果演示地址。
Web 前端前期書籍推薦
好的學習道理離不開實體書的陪伴。好的書籍便是節約學習時間、拓展視野的一個高效道具。從 HTML + CSS + JavaScript 出發推薦一些書籍。
- Head First HTML與CSS(第2版)
- CSS權威指南(第3版)
- 精通CSS:高級Web標准解決方案(第2版)
- JavaScript DOM 編程藝術(第2版)
- JavaScript 高級程序設計(第3版)
- 高性能 JavaScript
- 鋒利的 jQuery(第2版)
節選自 FKS 前端書籍推薦
遇到問題怎么辦
難道這就完了嗎
說了這么多，這也僅僅才是開始。Web 前端開發之路也是認知整個計算機科學之路，這一路技術底蘊必不可少。如果能再做到下面幾點就更好了。
- 擁有自己的博客
可以在任何文章分享平台記錄自己的學習過程，分享自己學習歷程。 - 提高英文能力
- 查英文文檔
- 編程中保證英文命名規范
- 用英文 git commit
- 英文博客和論壇
- freeCodeCamp -- 英文學 web 全棧
- 引人深思的 TED
- 掌握 Git 能力
大部分的開源項目我們都可以在 Github 上找到，掌握 Git 能力也就可以擁有整個開源世界。 - 關注開源項目
Github 作為全球最大的代碼托管平台，有一些很有趣和有挑戰性的項目等着我們實戰，也有許多引導性的資源整合文章值得我們去 Star 點贊。奉上一些有趣的開源項目(文檔類)。 - 關注業界
了解那些互聯網的引領者，他們在做什么、解決了什么問題、取得了什么成就。然后換位思考，找到自己的奮斗方向。同時關注業界動態，了解 BAT 等互聯網公司的人才需求。
HTML 5.1
9 月份就要發布 HTML 5.1 了，這么重大的新聞，還在等什么。。？
小小的廣告時間
看了這篇文，依然對 Web 前端有興趣的可以加筆者為好友（微信號：CorvoH）或 Github 關注 @Corvoh ，帶給你不一樣的編程體驗。
沒有最快的捷徑，只有堅持下去才能找到意義。