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。
Web 技能樹 -- Phodal
以及幾年前一個很流行的前端工程師技能圖譜可以借鑒學習。
前端工程師技能圖譜
其中，HTML 是超文本標記語言，文件以 .htm 或 .html 為擴展名，每當有一個 HTTP 請求（可以先理解為瀏覽器要訪問網頁的標準請求），服務器便根據請求發送相應的 HTML 文檔到客戶端進行解析，我們便可以看到相應的網頁。
一個簡單的 HTML 頁面
CSS 指層疊樣式表 (Cascading Style Sheets)，樣式定義如何顯示HTML 元素，我們可以把 CSS 寫到 HTML 頁面的具體元素中、<head> </head> 標簽中，或者直接引入外部以 .css 為拓展名的文件（外部樣式表）到 HTML 頁面中，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。
W3School 上一個簡單的 CSS 實例
JavaScript 是因特網上最流行的腳本語言，可以在不刷新整個 HTML 的頁面時根據具體事件動態的更改頁面內容，使網頁真正的“活”了起來。這里不得不說的是，由于 JavaScript 近年來火熱發展，覆蓋已經不僅僅局限于 Web 前端而涉及到服務端（Node.JS 等）甚至物聯網（例：致JavaScript也將征服的物聯網世界）和 VR 設備（例：打造VR世界: Oculus + Node.js + Three.js）上了。
JavaScript 在網頁上的一個驗證輸入功能
編程語言的概念在這里只做引導，具體點進下方“去哪兒入門 Web 前端編程語言”推薦的網址進行深入理解~
去哪兒入門 Web 前端編程語言概念
這里按類別直接上幾個推薦學習 Web 開發（不只是前端）的學習網站：
- 文字類編程學習：
- W3School
- 菜鳥教程
- 極客學院wiki
- 前端技術棧(英文)
- 視頻類編程學習
- 慕課網
- 極客學院
- 網易云課堂
- 過關挑戰類編程學習
- FreeCodeCamp
- 百度前端技術學院
- 有趣的編程學習 App
- Growth
- ......
更多精彩盡在我的 Github 倉庫 Coding-Full-Stack-Intro之中。
在哪兒了解 Web 前端編程語言動態
這里是一些較為經典的 IT 新聞網站，可以及時關注最新的技術改變
- 開發者頭條
- 極客頭條
- 少數派
- 開源中國
- CSDN
- ......
更多精彩盡在我的 Github 倉庫 Coding-Full-Stack-Intro之中。
基本開發工具
寫 Web 前端源碼用什么工具寫？難道就用文本編輯器編輯 .txt 文件后將后綴改為 .html 才能打開并運行嗎？當然不是，這里有很多很棒的前端開發工具作為推薦。根據個人信仰，選擇其一就好。
WebStorm
WebStorm 一度被廣大中國 JS 開發者譽為“ Web 前端開發神器”、“最強大的 HTML5 編輯器”、“最智能的 JavaScript IDE ”等，有智能的代碼補全，代碼格式化，html提示，聯想查詢，代碼重構，代碼檢查和快速修復，代碼調試，代碼結構瀏覽，代碼折疊和包裹或者去掉外圍代碼等等等等特點。可以集成 Git ，隨時將自己的代碼提交到遠程代碼托管平臺。
WebStorm
Sublime Text 3
Sublime 是程序員Jon Skinner于2008年1月份所開發出來的一款跨平臺輕量級文本編輯器。Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。配合上各種開發插件，便可達到高效開發的狀態。
Sublime Text 3
Atom
Atom 是由 Github 官方發布，專門為程序員推出的一個跨平臺文本編輯器。具有簡潔和直觀的圖形用戶界面，并有很多有趣的特點：支持CSS，HTML，JavaScript等網頁編程語言。它支持宏，自動完成分屏功能，集成了文件管理器。
Atom 編輯器
安利一個 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 前端開發之路也是認知整個計算機科學之路，這一路技術底蘊必不可少。如果能再做到下面幾點就更好了。
- 擁有自己的博客
可以在任何文章分享平臺記錄自己的學習過程，分享自己學習歷程。- cnblogs
- CSDN
- 簡書
- gitbook
- github 博客
- 提高英文能力
- 查英文文檔
- MDN
- Can I use
- The Boat
- 編程中保證英文命名規范
- 用英文 git commit
- 英文博客和論壇
- freeCodeCamp -- 英文學 web 全棧
- 引人深思的 TED
- 查英文文檔
- 掌握 Git 能力
大部分的開源項目我們都可以在 Github 上找到，掌握 Git 能力也就可以擁有整個開源世界。- 中文Git入門
- Git 在線實戰
- Git 簡易指南
- Git -- 菜鳥教程
- Git 教程 -- 廖雪峰
- git 官網
- Git 教程 -- 菜鳥教程
- GitHub 漫游指南
- 關注開源項目
Github 作為全球最大的代碼托管平臺，有一些很有趣和有挑戰性的項目等著我們實戰，也有許多引導性的資源整合文章值得我們去 Star 點贊。奉上一些有趣的開源項目(文檔類)。- awesome( 英文)
- frontend-dev-bookmarks(英文)
- 翻譯掘金上優質的英文文章
- 全棧增長工程師指南
- 前端工作面試問題
- 關注業界
了解那些互聯網的引領者，他們在做什么、解決了什么問題、取得了什么成就。然后換位思考，找到自己的奮斗方向。同時關注業界動態，了解 BAT 等互聯網公司的人才需求。- @ Phodal
- @ icepy
- @ justjavac
- @ yanhaijing
HTML 5.1
9 月份就要發布 HTML 5.1 了，這么重大的新聞，還在等什么。。？
THE FUTURE IS LANDING
沒有最快的捷徑，只有堅持下去才能找到意義。
文／icorvoh（簡書作者）
原文鏈接：http://www.jianshu.com/p/d74f8f6e0917
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。
總結
以上是生活随笔為你收集整理的Web前端小白入门指迷的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript 内置对象（一）：A
- 下一篇： JSP 防止网页刷新重复提交数据