Web前端小白入門指迷

前注：這篇文章首發於我本身創辦的服務於校園的技術分享 【西郵 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 開發（不僅是前端）的學習網站：

• 文字類編程學習：
  • W3School
  • 菜鳥教程
  • 極客學院wiki
  • 前端技術棧(英文)
• 視頻類編程學習
  • 慕課網
  • 極客學院
  • 網易雲課堂
• 過關挑戰類編程學習
  • FreeCodeCamp
  • 百度前端技術學院
• 有趣的編程學習 App
• Growth
• ......

更多精彩盡在 Upper 主的 Github 倉庫Coding-Full-Stack-Intro 之中。

在哪兒瞭解 Web 前端編程語言動態

這裏是一些較爲經典的 IT 新聞網站，能夠及時關注最新的技術改變

• 開發者頭條
• 極客頭條
• 少數派
• 開源中國
• CSDN
• ......

更多精彩盡在 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 前端開發之路也是認知整個計算機科學之路，這一路技術底蘊必不可少。若是能再作到下面幾點就更好了。

• 擁有本身的博客
  能夠在任何文章分享平臺記錄本身的學習過程，分享本身學習歷程。
  • cnblogs
  • CSDN
  • 簡書
  • gitbook
  • github 博客
• 提升英文能力
  • 查英文文檔
    • MDN
    • Can I use
  • 編程中保證英文命名規範
  • 用英文 git commit
  • 英文博客和論壇
  • freeCodeCamp -- 英文學 web 全棧
  • 引人深思的 TED
• 掌握 Git 能力
  大部分的開源項目咱們均可以在 Github 上找到，掌握 Git 能力也就能夠擁有整個開源世界。
  • Git 簡易指南
  • Git 教程 -- 廖雪峯
  • git 官網
  • Git 教程 -- 菜鳥教程
  • GitHub 漫遊指南
• 關注開源項目
  Github  做爲全球最大的代碼託管平臺，有一些頗有趣和有挑戰性的項目等着咱們實戰，也有許多引導性的資源整合文章值得咱們去 Star 點贊。奉上一些有趣的開源項目(文檔類)。
  • awesome( 英文)
  • frontend-dev-bookmarks(英文)
  • 全棧增加工程師指南
  • 前端工做面試問題
• 關注業界
  瞭解那些互聯網的引領者，他們在作什麼、解決了什麼問題、取得了什麼成就。而後換位思考，找到本身的奮鬥方向。同時關注業界動態，瞭解 BAT 等互聯網公司的人才需求。
  • @ Phodal
  • @ icepy
  • @ justjavac
  • @ yanhaijing

HTML 5.1

9 月份就要發佈 HTML 5.1 了，這麼重大的新聞，還在等什麼。。？

小小的廣告時間

看了這篇文，依然對 Web 前端有興趣的能夠加筆者爲好友（微信號：CorvoH）或 Github 關注 @Corvoh ，帶給你不同的編程體驗。

沒有最快的捷徑，只有堅持下去才能找到意義。