摘要：第二部分學(xué)習(xí)前端開(kāi)發(fā)第二部分指出了學(xué)習(xí)成為一個(gè)前端開(kāi)發(fā)者所需的自學(xué)資源和教學(xué)資源譯者注教學(xué)資源包括有講師指導(dǎo)的付費(fèi)課程計(jì)劃學(xué)院和訓(xùn)練營(yíng)。第三部分前端開(kāi)發(fā)工具第三部分簡(jiǎn)要地介紹和指出了一些前端圈內(nèi)的工具。

參與者（排名不分先后）：blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993; pobusama; yanyixin; zhouyao
關(guān)于譯者：生于憂患，死于安樂(lè)。滬江翻譯小組其行十人，技術(shù)參差，然其心一也。前端技術(shù)博大精深，旁枝末節(jié)，種類繁多，然學(xué)習(xí)之道，不進(jìn)則退。每思及此，遑遑不可終日，于閑暇時(shí)筆耕不輟，月余，得此書(shū)中譯本。秉持利人利己的美好心愿，此舉志在為前端社區(qū)貢獻(xiàn)綿薄之力，策人策己皆有所裨益。期間翻譯，校對(duì)，統(tǒng)籌，整理，再審，各方助力，不一而足。與君共勉。

作者：科迪·林黎（Cody Lindley），由「前端大師（Frontend Masters）」傾情贊助。

這是一本可供任何人使用的指南，用于學(xué)習(xí)前端開(kāi)發(fā)實(shí)踐。該指南大體上勾勒出了前端工程的輪廓，同時(shí)也討論了前端工程的實(shí)踐：2017 年，如何學(xué)習(xí)前端工程，用什么工具來(lái)實(shí)踐？

筆者有意將本書(shū)打造為一份專業(yè)資料，為想要或正在實(shí)踐的前端開(kāi)發(fā)者們提供學(xué)習(xí)材料和開(kāi)發(fā)工具。其次，它同樣可供主管、CTO、講師和獵頭們深入探索前端開(kāi)發(fā)實(shí)踐。

本書(shū)內(nèi)容偏向于 WEB 技術(shù)（HTML、CSS、DOM、JavaScript）和以這些技術(shù)為根基直接構(gòu)建而成的開(kāi)源技術(shù)。書(shū)中引用和討論的材料要么就是同類翹楚，要么就是解決問(wèn)題的流行方案。

本書(shū)不是一本囊括所有前端可用資源的綜合綱領(lǐng)。其價(jià)值在于為恰好夠用的分類信息搜羅簡(jiǎn)潔、聚焦且符合時(shí)宜的甄選內(nèi)容，以免在特別話題下鉆了牛角尖。

預(yù)期本書(shū)每年都迭代一次內(nèi)容。

本書(shū)分為三部分。

第一部分概述了前端工程實(shí)踐。

第二部分指出了學(xué)習(xí)成為一個(gè)前端開(kāi)發(fā)者所需的自學(xué)資源和教學(xué)資源（譯者注：教學(xué)資源包括有講師指導(dǎo)的付費(fèi)課程、計(jì)劃、學(xué)院和訓(xùn)練營(yíng)）。

第三部分簡(jiǎn)要地介紹和指出了一些前端圈內(nèi)的工具。

前端開(kāi)發(fā)者是什么？

2016 前端開(kāi)發(fā)回顧

展望 2017

第一部分. 前端實(shí)踐

前端職稱

前端開(kāi)發(fā)者所使用的技術(shù)

前端開(kāi)發(fā)技能

前端開(kāi)發(fā)者為 ... 而開(kāi)發(fā)

團(tuán)隊(duì)里的前端

全能型人才/全棧神話

前端面試

前端開(kāi)發(fā)職位公示

前端開(kāi)發(fā)薪資

前端開(kāi)發(fā)者是如何誕生的

第二部分：學(xué)習(xí)前端開(kāi)發(fā)

自學(xué)

關(guān)于互聯(lián)網(wǎng)／Web

學(xué)習(xí) Web 瀏覽器

學(xué)習(xí)域名系統(tǒng)（又叫 DNS）

學(xué)習(xí) HTTP/Networks（包括 CORS 和 WebSockets）

學(xué)習(xí)網(wǎng)頁(yè)寄存（通稱虛擬主機(jī)）

學(xué)習(xí)前端開(kāi)發(fā)

學(xué)習(xí)用戶界面／交互設(shè)計(jì)

學(xué)習(xí) HTML 和 CSS

學(xué)習(xí)搜索引擎優(yōu)化

學(xué)習(xí) JavaScript

學(xué)習(xí) Web 動(dòng)畫(huà)

學(xué)習(xí) DOM、BOM 和 jQuery

學(xué)習(xí)網(wǎng)頁(yè)字體 & 圖標(biāo)

學(xué)習(xí)可訪問(wèn)性相關(guān)知識(shí)

學(xué)習(xí) Web／瀏覽器 API

學(xué)習(xí) JSON (JavaScript 對(duì)象表示法)

學(xué)習(xí) JS 模板

學(xué)習(xí)靜態(tài)網(wǎng)頁(yè)生成器

通過(guò)JS學(xué)習(xí)計(jì)算機(jī)科學(xué)

學(xué)習(xí)前端應(yīng)用架構(gòu)

學(xué)習(xí)數(shù)據(jù)（例如，JSON）API 的設(shè)計(jì)

學(xué)習(xí) React & Redux

學(xué)習(xí)漸進(jìn)式 Web 應(yīng)用

學(xué)習(xí)設(shè)計(jì) JS API

學(xué)習(xí)Web開(kāi)發(fā)工具

學(xué)習(xí)命令行的使用

學(xué)習(xí) Node.js

學(xué)習(xí) JS 模塊系統(tǒng)

學(xué)習(xí)模塊加載和打包工具

學(xué)習(xí)包管理工具

學(xué)習(xí)版本控制

學(xué)習(xí)構(gòu)建及任務(wù)自動(dòng)化技術(shù)

學(xué)習(xí)網(wǎng)站性能優(yōu)化

學(xué)習(xí)測(cè)試

學(xué)習(xí)無(wú)頭瀏覽器

學(xué)習(xí)離線開(kāi)發(fā)

學(xué)習(xí)網(wǎng)絡(luò)／瀏覽器／應(yīng)用的安全

多平臺(tái)開(kāi)發(fā)學(xué)習(xí)

導(dǎo)向?qū)W習(xí)

前端課程

前端開(kāi)發(fā)學(xué)習(xí)的起點(diǎn)

前端資訊、新聞?wù)竞筒タ?/p>

第三部分：前端開(kāi)發(fā)工具

Doc/API 瀏覽工具

SEO 工具

原型設(shè)計(jì)和線框圖工具

制圖工具

HTTP / 網(wǎng)絡(luò)工具

代碼編輯工具

瀏覽器上的神兵利器

HTML 工具

CSS 工具

DOM 工具

JavaScript 工具

靜態(tài)網(wǎng)頁(yè)構(gòu)建工具

無(wú)障礙訪問(wèn)工具

應(yīng)用程序框架工具（臺(tái)式機(jī)、手機(jī)、平板電腦等）

漸進(jìn)式 Web 應(yīng)用工具

腳手架工具

常規(guī)前端開(kāi)發(fā)工具

模版／數(shù)據(jù)綁定工具

UI 組件 & 組件包

數(shù)據(jù)可視化工具（例如圖表）

圖形工具（例如 SVG、Canvas、WebGL）

動(dòng)畫(huà)工具

JSON 工具

占位符內(nèi)容工具

測(cè)試工具

前端數(shù)據(jù)存儲(chǔ)工具 (例如客戶端的數(shù)據(jù)存儲(chǔ)方案)

模塊加載／打包工具

模塊／包管理工具

托管工具

項(xiàng)目管理以及代碼托管工具

協(xié)作與溝通工具

內(nèi)容管理 托管／API 工具

后端即服務(wù)工具

離線工具

安全工具

構(gòu)建工具

部署工具

網(wǎng)站／應(yīng)用監(jiān)控工具

JavaScript 錯(cuò)誤報(bào)告／監(jiān)控

性能工具

尋找工具的工具

下載 .pdf、.epub、或 .mobi 格式的電子書(shū):

中文：https://www.gitbook.com/book/sqrtthree/front-end-handbook-2017/details

英文：https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details

貢獻(xiàn)內(nèi)容、提建議或者修復(fù) GitHub 上的 bugs:

https://github.com/xitu/front-end-handbook-2017

滬江Web前端團(tuán)隊(duì)

掘金翻譯計(jì)劃

iKcamp原創(chuàng)新書(shū)《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開(kāi)售。