零基礎學習Web前端開發應該先學什麼？

12-28

目前來說想入這一行，但是沒有具體的方向。

先學搜索
你這個問題在知乎上被問了一百遍了
你還問
明顯搜索能力存在重大問題

Web前端工程師要掌握的基礎知識和技能包括

1 、網頁的基本結構（HTML + CSS）
HTML 是一種標記語言，而不是編程語言，最基本是標籤是和，CSS是用來定義如何顯示HTML元素的。對 HTML+CSS很容易入門，但很多人不夠深入，舉幾個例子：標籤是作什麼用的？margin-left與left有什麼區別，應該在什麼情況下使用？再出個DIV+CSS布局問題：一個寬度不確定的DIV裡面放三個水平對齊的DIV，左右兩個DIV寬度固定為150px，中間那個DIV充滿剩餘的寬度。如果這些問題你目前還不知道，對那個布局問題幾分鐘內不能解決，說明你對HTML+CSS還不夠深入。
2、瀏覽器是怎麼展現網頁的
不同內核的瀏覽器對網頁的渲染是不一樣的，目前瀏覽器都有客戶端調試工具，下圖展現一個google首頁在IE9下的載入細節：

在做web性能優化時，對瀏覽器渲染及細節要進一步了解。說個比較有用的知識點：目前瀏覽器並行載入的上限是6，老版本的瀏覽器會有所不同。
3 、網頁的生命周期
不同的web框架下，頁面的生命周期會有所不同，大體還是一樣：客戶端發送GET請求，伺服器返回相應頁面，客戶端完成操作及數據，然後POST給伺服器。一定要對數據的傳遞(前台與後台,頁面之間)的細節瞭然於心。
4、DHTML DOM BOM Javascript AJAX
這是Web前端開發的重中之中，大多數時候我們都在和他們打交道。說幾個注意點：javascript是單線程編程，所謂的javascript非同步編程只不過是計劃在未來的某個時間上執行相應事件而已；詳細了解DOM事件機制；客戶端存儲（HTML5中增加了localStorage和 sessionStorage）；javascript不像伺服器端語言那樣嚴謹，調試不是很方便，所以一開始要養成嚴謹的javascript編輯習慣；javascript很強大很靈活，不要幻想短時間內熟練（更別說精通）它，並寫些框架、類庫，初始階段還是先用熟練已成熟的框架（比如 jquery）當入門；一定要熟練使用客戶端調試工具。
5 、伺服器端語言開發經驗，PS切圖技術
Web前端開發介於設計與開發中間，所以兩端的東西都得懂點。編輯語言是相通的，之前編寫過伺服器語言，對學習javascript是十分有益的，從圖片轉成靜態HTML頁面，少不了PS切圖技術。
6 、瀏覽器的兼容性
由於歷史原因，瀏覽器的兼容性一直都折磨web前端工程師的地方，雖然有W3組織，並制定了一些規範，雖然瀏覽器產商都正在努力改進並接近其規範，但現實網路環境中各種內核、各種版本的瀏覽器都有一席之地。解決瀏覽器兼容性靠經驗積累。
8 、快速學習能力和主動學習意願
web前端的發展很快，從事這一行業一定要有快速學習能力和主動學習意願，這樣才能適應web產品的要求。在web前端領域沒有絕對的是與非,解決一個問題的方法有很多，但我們要找到一個更合適的方法，找到一個更合適的方法需要經驗作積累，總之web前端入門容易，想熟練很難，需要更多的主動學習意願。
9 、良好的溝通能力
優秀的前端工程師需要具備良好的溝通能力，因為你的工作與很多人的工作息息相關，比如項目經理、設計師、最終用戶、開發工程師，前端工程師位於這幾類人的交匯點上，這些角色的要求你都得照顧好，平衡這四類人的需求，拿出一個比較合適的方案。由此可見溝通能力對前端工程師要求更高。
優秀的web前端工程師應該具備快速學習能力。推動Web發展的技術並不是靜止不動的。如果沒有快速學習能力，你就跟不上Web發展的步伐。你必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化，既然踏上了web前端開發之路，那就堅強地走下去吧！

全網最全，沒有之一（或許吧）

前端知識學習路線

開始先學習HTML和CSS,動手寫一些靜態頁面。

然後再學習JavaScript，先學一些基礎，在你的頁面中加入JavaScript代碼，讓你的頁面動起來。

邊學邊做，動手可以幫助你更好的理解，一開始完成的項目不需要那麼複雜，可以在學習的過程中逐步完善。

學習可以使用很多種方式，看書，看視頻，但一定要記得多動手實踐。

零基礎的前端開發初學者應如何系統地學習？ - JavaScript - 知乎

關於 JavaScript 的好書有哪些？

前言

這是兩年以來，修真院收集整理的學習資料順序。
以CSS15個任務，JS15個任務為基礎，分別依據要完成任務的不同的技能點，我們整理出來了這麼一篇在學習的時候需要看到的資料。

這是Version 1.0，接下來會優化和更新到2.0.
現在只有WEB，接著會推出Java。

任務地址在這裡。

任務體系是從簡單到難，官網提供了更多更詳細的資料。

資料

css部分 任務1:九宮格——用html+css製作一個網頁
通過這個任務能學到：1.網頁是由什麼組成的；2.如何生成一個網頁；3.如何訪問一個網頁；4.html和css如何搭配工作；5.頁面基礎的布局方式；6.如何用一行代碼兼容不同瀏覽設備；7.頁面和想像的不一樣時如何進行調試

HTML基本知識
【圖文】第1章 HTML的基本概念_百度文庫
CSS概念
CSS 教程
盒子模型，浮動
對CSS中的Position、Float屬性的一些深入探討 - CoffeeDeveloper - 博客園
chrome開發者工具
神器--Chrome開發者工具(一) - Just For Fun - SegmentFault
媒體查詢
Media Queries詳解 - lines - 博客園

任務2:認識開發必備工具
通過這個任務能學到：1.學習版本管理工具; 2.學習使用伺服器; 3.學習如何將自己的代碼放到網上去

nginx
windows上 nginx 配置代理服務，配置多域名，以及最簡單實現跨域配置
git
Git教程
github
知乎 - 知乎
svn
SVN伺服器搭建和使用（一） - xjbest - 博客園

任務3:魔鏡介紹頁——一個最簡單的移動端頁面
通過這個任務能學到：1.如何運用布局知識進行更複雜的布局；2.如何讓布局更好地適應移動端；3.如何合理使用rem作長度單位；4.如何使用photoshop切圖；5.如何處理不同dpi下的圖片

PhotoShop
http://jingyan.baidu.com/article/19020a0a149b71529d2842bb.html
absolute
CSS深入理解之absolute-慕課網
自適應單位
徹底弄懂css中單位px和em,rem的區別 - leejersey - 博客園
css類選擇器
CSS 類選擇器詳解

任務4:登錄頁——一個最常見的移動端頁面
通過這個任務能學到： 1.處理常見的移動端頁面； 2.學會改變表單元素樣式

input
了解HTML表單之input元素的30個元素屬性 - 推酷 Smart checkbox and radio
絕對定位和相對定位
CSS中的絕對定位與相對定位 - TBHacker - 博客園

任務5:護工個人主頁——一個最常見的移動端頁面
通過這個任務能學到： 1.處理更複雜的移動端頁面； 2.同樣是左中右的布局，可以用很多不同的方法來完成； 3.用css3的方法更好地拉伸背景圖

自適應布局總結
這可能是史上最全的 CSS 自適應布局總結
Html，CSS代碼規範
http://nec.netease.com/

任務6:護工列表頁——一個最常見的移動端頁面，需要使用bootstrap
1.解決垂直居中； 2.模擬下拉選框； 3.做出複雜的列表頁

雪碧圖
background-position和雪碧圖(CSS Sprites)用法
bootstrap柵格系統
Bootstrap 柵格系統的精妙之處
bootstrap官方文檔
Bootstrap中文網

任務7:桌游精靈——一個完整的webApp，以bootstrap為基礎滿足更多不同的需求
收穫什麼： 1.HTML5的audio定義音頻流； 2.處理半透明； 3.CSS3動畫

input range 的樣式設置
使用CSS來擴展增強Input Range的示例
html5web存儲
HTML 5 Web 存儲
html&標籤
HTML amp; 標籤
css3動畫
CSS3 Animation_Animation, css3屬性詳解教程_w3cplus
css處理半透明
CSS屬性小結之--半透明處理 - 子純不語 - 博客園

任務8:修真院——一個PC端的企業網站，以bootstrap為基礎滿足更多不同的需求
收穫什麼：完成一個比較完整的PC端項目
html和css實現常見布局
利用HTML和CSS實現常見的布局 - 眼睛大大的 - SegmentFault

任務9:修真院——一個響應式的企業網站
收穫什麼：增加網站布局開發的熟練度；獲得一個響應式的網站
meta標籤中http-equiv屬性使用介紹
meta標籤中的http-equiv屬性使用介紹_HTML/Xhtml_網頁製作_腳本之家

任務10:51包裝——一個常見的表單頁面
收穫什麼： CSS製作流程圖； CSS模擬表單元素；熟練響應式布局
css改變select下拉列表樣式
用純css改變下拉列表select框的默認樣式 - OurJS

任務11:基於css的更高級語言——使用less/sass重寫任務4（登錄頁），並編譯
收穫什麼：使用SASS或LESS
sass入門
sass入門 - sass教程
less文檔
Less 中文網

任務12:標準化——閱讀html和css規範，不使用bs重寫任務5和6（護工）
收穫什麼：使用SASS或LESS重構頁面
css重置樣式表
css 重置樣式表 - 前端小白 - 博客頻道 - CSDN.NET

任務13:組織樣式表——按照任務12的標準，不使用bs重寫任務7樣式，並且閱讀樣式表組織規範，拆分樣式表
收穫什麼：css架構
如何進行css架構（張鑫旭）
http://www.zhangxinxu.com/wordpress/2010/07/我是如何對網站css進行架構的/

任務14:自己的組件庫——將修真院拆出屬於自己的組件庫
收穫什麼：提取PC端的組件庫
前端為什麼要組件化
前端為什麼一定要做組件化
css畫三角
css3畫三角形的原理 - 這算什麼艾迪 - 博客園

任務15:綜合性的總結——按照任務12，13學到的規範，重寫一遍任務9，不用其他框架，使用less/sass並編譯
收穫什麼：綜合能力
綜合之前所學

js部分
基礎語法積累
菜鳥教程
JavaScript 教程 | 菜鳥教程
w3c
瀏覽器腳本教程
阮一峰
JavaScript 標準參考教程（alpha）
廖雪峰
JavaScript教程
js秘密花園
JavaScript 秘密花園
選一個刷一遍
jq教程
jQuery 教程 | 菜鳥教程
angular插件集合
angular好用的插件集合（持續更新中） - angular - SegmentFault

任務1:九宮格
收穫什麼： javascript是什麼？掌握javascript的基本語法；了解javascript的全局函數；學習使用javascript的自定義函數； javascript如何操作DOM； javascript如何修改CSS；

js字元串轉數字
js 字元串轉換成數字的三種方法 - 瘋狂的胖魚 - 博客頻道 - CSDN.NET
js隨機數
JS產生隨機數的幾個用法！ - banbu - 博客園

任務2:桌游精靈身份發放
收穫什麼：如何使用JS進行頁面跳轉和傳參；使用JS對input等頁面元素進行更複雜的操作；進一步理解JS的數組；了解JS正則表達式

dom操作
JavaScript的DOM操作(節點操作) - 西西爸de札記 - 博客頻道 - CSDN.NET
正則（RegExp對象）
JavaScript 標準參考教程（alpha）
控制台調試
Chrome 控制台console的用法

任務3:桌游精靈查看身份
收穫什麼：進一步學習頁面間數據傳遞；如何根據需要顯示和隱藏視圖； JS對DOM樣式和內容進行更複雜的操作
Json
JSON_百度百科
localStorage和sessionStorage詳解
HTMl5的存儲方式sessionStorage和localStorage詳解_html5教程技巧_腳本之家

任務4:桌游精靈法官日誌和遊戲結果
收穫什麼：綜合運用jquery完成更複雜的業務邏輯；使用有限狀態機來存放對象的不同狀態

js有限狀態機
JavaScript與有限狀態機 - 阮一峰的網路日誌

任務5:ajax登錄/退出
ajax
JavaScript 標準參考教程（alpha）
rest
深入淺出REST_知識庫_博客園
json和jsonp
【原創】說說JSON和JSONP，也許你會豁然開朗，含jQuery用例 - 隨它去吧 - 博客園

任務6:後台系統--angular初嘗
收穫什麼：單頁應用開發；學習使用框架開發項目
angularjs中文網
AngularJS中文網
angular常用功能
AngularJS 最常用的八種功能
angular ui-router
AngularJS ui-router (嵌套路由)

任務7:後台系統--angular登錄和列表
收穫什麼：用angular進行數據交互；雙向綁定；表單驗證

理解angularjs的作用域scope
AngularJS中文社區
http服務
簡介AngularJS中$http服務的用法_AngularJS_腳本之家
$http服務細節設置
AngularJs $http 請求服務

任務8:後台系統--angular傳參和指令
收穫什麼：在單頁應用里如何通過url傳參； angular的指令是什麼；如何去自定義一個指令

angular中幾種傳參
Angular 中幾種參數傳遞方式
angular自定義指令
AngularJS中的指令全面解析(必看)_AngularJS_腳本之家
angular服務
AngularJS 之 Factory vs Service vs Provider

任務9:後台系統--angular圖片上傳
收穫什麼：基於HTML5的圖片預覽和上傳

angular實現圖片上傳（參考實現）
AngularJS圖片上傳功能的實現 - OPEN 開發經驗庫
ng-file-upload的使用
angularJs中上傳圖片/文件功能：ng-file-upload - csdnmmcl的博客 - 博客頻道 - CSDN.NET

任務10:後台系統--angular表單驗證交互
收穫什麼：進一步熟悉表單驗證；學習使用三方插件：富文本編輯器

angular 表單驗證
表單驗證amp; - Halower - 博客園
angular-umeditor
dylike/meta.umeditor

=====廣告時間，不喜歡的可以到此為止了=====================

技能樹.IT修真院

首頁 | IT修真院 | 更快更高效的免費Java,CSS,JS,運維技術培訓

「我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。這裡是技能樹.IT修真院，初學者轉行到互聯網行業的聚集地，只有實戰，沒有演練。只要加入我們，開始線上學習，就會有一對一的師兄貼心輔導，完全免費~"

加QQ群：

1群 2000人 18***188（已滿）

2群 1000人 42***1650 (已滿)

3群 500人 49***6441（已滿）

4群 500人 580***6624 （已滿）

5群 500人 604****59 （已滿）

6群 1000人 254078081（已滿）

7群 200人 562814359（招募中）

入群請第一時間看群公告，修改群名片，學編程，從正確修改群名片開始~

作為一名Web開發人員和設計師，到底應該在2017年學習什麼技術？在本指南中，將討論所有最新技術，告訴你如何正確的學習前端, 哪些知識是必須掌握的?哪些知識是可以作為補充學習的?

第一步: 掌握HTML/CSS

這是你最初必須掌握的
是網站的構建元素
沒得選!
隨著你前端的學習進程,熟練掌握
HTML/CSS簡單易學

第二步: 學會使用基礎工具

文本編輯器: Notepad2 / Sublime Text / http://Atom.io / IDE
圖像編輯器:Photoshop, Illustrator, GIMP, Something slse
FTP / SSH 工具 : Filezilla ,Putty
好的瀏覽器: Chrome
雲盤: Dropbox, Google Drive, Box

第三步: 學習原生JavaScript

原生JavaScript(現階段不需要理會Node.js 和任何框架)
理解數據類型: String, Number, Arrays, Objects, etc
理解函數, 條件表達式, 循環,操作符等
事件處理
JSON(JavaScript Object Notation), JavaScript對象表示法
jQuery框架

第四步:搭建一個基礎網站:

獲取一個虛擬主機賬戶(Hostgator, InMotion, etc)
學習虛擬主機控制系統基礎——cPanel (Email ,FTP Setup)
通過FPT(文件傳輸協議)上傳你的項目
創建域名並和你的主機連接

第五步:恭喜你! 你現在是一個網頁設計師了!——(現階段還不足以稱Web Developer)

有能力搭建一個專業的簡單網站
有能力搭建網頁應用的界面
能夠把一張PSD 轉化為基於HTML/CSS的靜態網頁
有在公司上班的實力, 或者選擇成為一名自由職業者

第六步: 思考接下來的側重點!

HTML/CSS框架: Bootstrap, Foudation(建議優先掌握!)
伺服器端語言: PHP, Ruby....
JavaScript框架: React ,Angular
資料庫: MySQL, PostgreSQL

第七步: HTML/CSS框架

Bootstrap(強烈推薦學習該框架!)
Zurb Foundation
Skeleton
MUI
Pure

第八步: 伺服器端編程語言(專註於一個!)

PHP(不是最好的語言,但是是最可靠的伺服器端語言)
Node.js(一款新型, 強大的後台語言)
Ruby on Rails (最好的框架,但已經到了瓶頸期)
Python(簡單易學,但相對於主流語言並不流行)——可現在AI的爆紅導致Python最近很火!

第九步: 資料庫(專註於一個!)

關係型資料庫: MySQL 和 PostgreSQL
非機構化資料庫: MongoDB 和 CouchDB
建議選擇一個以下的組合:

PHP/ MySQL
Node.js/ Mongola

第十步: 需要學習的一些端技術

Git Github
SSH(安全外殼協議) Basic Command Line
CSS 預編譯器: Sass/Less
APIS / REST Service
HTTPS / SSL

第十一步: 部署應用

專用伺服器/ VPS
應用雲平台: Heroku, Digital Ocean, AWS
部署工具
Linux命令行
維護和升級

第十二步:恭喜你,你現在成為一名網頁開發者了!

能夠創造出網頁引用
能構建後端APIs
能連接伺服器
能夠管理資料庫
你的選擇: 得到一份很好的工作 / 成為自由職業者 / 開始一項事業

第十三步:編程框架

JavaScript框架: React, Angular 2, Vue.js, Express(後端)
PHP框架: Laravel, Codeigniter, Symfony
Ruby on rails
MVC框架: Routing, Database Mapping, Helpers, Data Binding, Templating UI

第十四步: 內容管理系統(基於PHP)

WordPress(強烈推薦), Joomla, Drupal
有利用客戶更新和維護
豐富的插件
開發速度快
模板的功能有限

第十五步: 移動App發展

這是未來的趨勢
你不需要學習Java 和C語言!
你只需要掌握JavaScript!我們可以使用React Native, Ionic, Cordova 等框架來構建移動App

第十六步:現階段,現在你需要考慮什麼?

專註於你的事業
回去學習更多的數據結構
跟進現在的新技術
學習一門高級語言,類似於Java, C語言

我的原文鏈接:(前端2017年學習路線指南)

從去年七月份開始學習html css，
head first html+css 是第一本書，講的淺顯易懂，配合慕課網視頻（有適合各個水平的視頻，從最簡單的開始刷）寫出了第一個靜態頁面，然後買了javascript 高級編程，翻了一半，然後繼續在慕課找程序練。將近花了三個月然後找到了工作。之後還是刷書 head first ajax ，jquery，鋒利的jquery，

從上到下，是我刷書的順序，中間刷了慕課網各個階段的視頻，感覺會了很多，但還只是皮毛，會寫了一些響應式頁面，和一些簡單的效果。哦，對了，還入門了ps，處理做網頁要用的圖片，開心。
路還很長，一起努力

最剛開始的時候當然是學HTML和CSS啦。題主剛開始我覺得沒有把目標定的太高，先學會DIV+CSS，使用這個做出一個完整的網頁，就能在此基礎上進行近一步擴展，網頁布局的核心就是這個。在此基礎上再去看什麼HTML5新加進來的標籤如何使用啊。CSS有什麼新特性啊。如果你以上來就看各種書介紹一大堆標籤，一大堆新屬性，恭喜你，你只是能看懂網頁代碼，還是不會寫。（這都是買書自學教訓啊）至於js，如果之前沒有編程基礎，也先別看原生js，我就在看原生js上轉悠了好半天，各種名詞看的是暈暈乎乎的，然而還是還是自己獨立完成不了一個滾動圖。後天來藉助jquery，很快就完成了。我覺得，自學嘛，迅速建立自信才是最重要的。先學會大題只是框架，再在上面修修補補。
網頁就是一個超文本（就是可以有多重呈現樣式的文本）HTML是幹嘛的，是用來標註文本信息的，什麼是標題，那個東西跟那個東西是在一起的，CSS是樣式表，就是告訴那個字是紅的，那個圖片應該多大。js就是操作HTML與CSS的，我點擊某個東西，js就給這個東西添加一個樣式，他就消失不見了，給某個圖片設置位置，js可以操作他的樣式，讓他每隔幾秒位置向某個方向移動多少。其實對於初學者來說，前端就是這個，只不過隨著你碰到的東西越多，對這些會又更深的理解。

還有記住，剛開始學，千萬不要捧著一本傻厚傻厚的書在那看，絕對是早起浪費時間，先從簡單的學起，之後隨著你做作品，看到不懂的再去查，也決比你光在哪打基礎就打半年的要強。

我們在做一件事情的時候應該知道這個事情到底是什麼，如果你不知道是什麼，很多想轉行做前端開發，只是看重了我們這行工資高，但是對於行業知識什麼都不懂，行情也不懂，無頭蒼蠅似的，漫無目的去看些免費的死視頻，但是有什麼意義呢？

首先我們應該知道作為一名優秀的、甚至卓越的前端開發工程師的具備什麼條件？

我們先看一下現在招聘的最低標準，首位的一定是精通HTML，CSS布局技術，這是作為一個前端開發者必須掌握的，然後就是我們前端開發最重要的東西JavaScript，他的核心技術DOM，BOM，ajax，json，還有對於jQuery的使用熟練程度。

然後就是一直非常火的html5+css3移動端的技術，我們說現在都是移動端的天下，而html5的技術是非常棒的，它的應用可以說到處都是。

然後就是框架部分，我們至少要掌握一個，vue、node、react等框架。

然後我們就是一個完整的學習路線，如果沒有一個非常完整的學習路線，可能都是在浪費時間。

1. HTML+CSS的學習，這是非常簡單的，做出淘寶，京東這樣的界面就可以啦。

2. JS，你在以後可以拿到多少薪水，基本看你對於原聲JS的掌握，因為所有流行的框架都是Js封裝的，最底層的東西，我們永遠都是最重要的，但是如果你想把js自學的很好，那基本沒戲。

3. jQuery，這是我們必須要學會的一個庫，它也是用js封裝的，當你使用JQ的時候會非常的簡潔，但是這需要你學習js的時候用功夫。

4. HTML5+CSS3 ，這是讓我們前端一直非常火的東西，html5技術現在越來越成熟，很多NB的人物都說html5可以改變世界，我非常相信。

5. Bootstrap，這是我們學習前端必須學會的框架，不難，很好學。

6. Node.js – react – angular.js—backbone 這些比較流行的框架每個公司都會用，你最好是全部掌握，但是這個看個人能力。

當你知道一個完整的學習路線之後，就需要你打通任督二脈，你決心的學習下去，很多人基本都是學著學著就放棄了，其實在剛開始的時候，他根本沒有下決心去學習，只是認為這個工資高，但是不想付出努力，時間，金錢都不想付出，這樣的人是被人瞧不起的。只有那些真想學習前端改變自己的人才可以以後發展得很好，所以人就是這樣，有很大區別，主要在於內心。你要清楚你為什麼要學習前端，當你想放棄的時候，是什麼東西讓你堅持下去可以一直學下去，這點非常重要，我教過無數的學生，他們最後又的學得好，有的學的不好，其實他們就是心態不同，他們的處境也不同，重視成熟也不同，學習前端的學並不重要，學習只是一個行為，看你內心和大腦怎麼去控制這個行為，放棄的時候是什麼放你堅持下去，如果沒有，那你就可以隨時的放棄，你只有時刻讓你自己意識到，你是有損失的你才能做好現在做的事情。

學習是自己的事情，別人只是你的助力，我做前端開發十多年，以後前端會發展的更好，希望想學習前端的人不要只是一時腦熱，你要知道未來的發展，不要目光短淺總是看著眼前，對於學習方法，如何有效率的學習前端可以隨時問我

前端學習步驟如下：

一階段：html+css+ps切圖+ftp網站上傳+html5標籤+css3動畫+手機端開發+swiper.js+iscroll.js

二階段：js+jq+ajax+正則表達式+面向對象+js插件+github+sea.js+require.js+gulp

三階段：2D+3D應用+touth+canvas+svg+本地儲存+h5拖拽+highcharts+boorstrap

四階段：node.js+vue.js+react.js

上述學習內容，如果你可以在半年之內全部掌握熟練，那麼你的月薪在一線城市超過一萬是非常可能的，但是這些內容沒有那麼好學，半年的時間如果認真應該差不多

啊，最近幾天都在參加女裝大賽，沒及時回復，現在回復來啦~請各位女裝程序猿吃下安利。

零基礎的前端開發初學者應如何系統地學習？

在快速發展的前端開領域你需要先掌握必備的基礎知識，以及獨立學習及解決問題的技能。

重中之重-基礎：HTML、CSS 和 JavaScript

在一開始，你需要先了解 HTML、CSS 以及 JavaScript 的基本語法，然後通過一些練習鞏固基本語法，並通過實際編寫項目來對其進行掌握和探索，最後你需要一些進階的指導來幫助你深入理解概念。以 JavaScript 為例首先我們需要了解變數、賦值、運算符、布爾值、循環、數組、函數等基本語法，並通過寫一些快速反饋的習題來幫助自己掌握語法。接著我們可以編寫一些互動式的操作，如對網頁中的按鈕進行響應事件(在這個過程中你可能會了解到 jQuery)。當到達某一個時間點的時候，你會發現自己對閉包、this、原型鏈、偽類和子類 等這些概念不了解，它們會阻礙著你進一步地探究，這時你就需要進階的指導來幫助你度過難關啦。

重中之重-必殺技：RSA

當你拿到一個問題時如何去解決它呢？我們有RSA原則可以使用，也就是 READ -&> SEARCH -&> ASK。 1. 先閱讀錯誤信息，嘗試從中找到突破點。 2. 使用 Google 對問題進行搜索(推薦使用英文) 3. 問此問題對應的活躍論壇社區，一般來講 Stack Overflow 已足夠。在這三部曲的執行過程中，有一點是明確而重要的：你需要知道你的問題是什麼。換句話說，你要能夠知道自己錯在哪裡，或能夠提供全面的信息供解答者參考。我們強烈建議你花一些時間閱讀提問的智慧，它會大大增加你解決問題的效率。

外面的世界

當你不再苦苦地與 HTML、CSS 以及 JS 鬥爭時，你可能接觸到某些框架、API、以及網站優化的內容，你需要... 你需要的是一個一站式的教學，能夠提供給你系統的前端開發知識，能夠讓你學完後有掌握必備的基礎知識，以及獨立學習及解決問題的技能。在 Udacity 你將會學到以下技能：前端開發入門：

HTML 語法基礎：運用語義元素
CSS 語法基礎
響應式網頁設計：Bootstrap、響應式圖片
JavaScript 基礎：if else、array、等基本編程語法概念
JQuery 基礎

前端開發進階：

面向對象的 JavaScript：作用域、閉包、this 關鍵字、原型鏈、對象修飾模式、函數類、原型類、偽類模式、超類和子類、偽類子類、
HTML 5 Canvas 基礎
編寫 README 文檔
網站性能優化
瀏覽器渲染優化
Ajax 入門
JavaScript 設計模式
調用地圖 API
Jasmine 測試框架

你可以通過預覽課程 免費學習一部分內容。好了，啾咪，愛你們。

最近在引導一個朋友做前端，覺得只是為了找工作建議去培訓機構去或者找個大牛帶你（前提是你已經會一些東西如html js css基礎能簡單的完成一個頁面製作）

前端開發人員掌握的專業技術：

第一階段：前端頁面重構：PC端網站布局、HTML5+CSS3基礎項目、WebAPP頁面布局；

第二階段：JavaScript高級程序設計：原生JavaScript交互功能開發、面向對象開發與ES5/ES6、JavaScript工具庫自主研發；

第三階段：PC端全棧項目開發：jQuery經典特效交互開發、HTTP協議，Ajxa進階與後端開發、前端工程化與模塊化應用、PC端網站開發、PC端管理信息系統前端開發；

第四階段：移動端項目開發：Touch端項目、微信場景項目、應用Vue.js開發WebApp項目、應用Ionic開發WebApp項目、應用React.js開發WebApp；

第五階段：混合（Hybrid）開發：各類混合應用開發；

第六階段：NodeJS全棧開發：WebApp後端系統開發。

學習資料：

網站：w3chool：HTML5的知道教程，各種豐富的實例；stackoverflower：常見的一些技術上的問題在這裡都能夠找到相應的解決方案。

書籍：

入門：

《深入淺出JavaScript》

《JavaScript DOM編程藝術》

《JavaScript DOM高級程序設計》

進階：

《ppk談JavaScript》

《精通JavaScript》

《JavaScript高級程序設計》

高級：

《JavaScript語言精粹》

《JavaScript設計模式》

《Secrets of the JavaScript Ninja》

《高性能JavaScript》

視頻：扣丁學堂上有前端+HTML5的視頻教程。

我來更新，還有兩周我們這個班就畢業了，班級氣氛也在不斷的變化，從開始的希望到現在的麻木，後去的js課程非常的快和多，班級有些同學已經明顯掉隊，估計只能在重修一遍了，我們的上一個班只有三分之一找到工作。目前來看，想學前端，還是總最新的技術開始比較好，未來是移動端的天下，所以h5新技術一定要懂。js有好多坑，建議多寫，多找框架來用。多做項目。

我是零基礎，朋友是UI設計，於是推薦我學前端，開始自學，刷各種網站，HTML和css還好，JS就學不下去了。目前在智能社培訓，還有一個月畢業，找到或者沒找到工作了會補充。

智能社培訓課程安排不錯，開始是css，學會float和position之後就開始寫整站，遇到問題了老師會講解，寫了幾個頁面之後css結束。

JS班，學了JS之後基本不會在寫頁面，開始是寫基本語法和規範，第一個例子是選項卡，之後有運動，Ajax，sonp，目前我學到這，接下來是正則，面向對象，h5，PHP簡單入門，基本都是這順序，感覺培訓上的內容全部學會找一份工作問題不大，但是JS開始，老師講課速度加快，能跟上的學員不多。

建議前端入門先已實現效果為主，設計給的頁面要能實現，然後看看網頁的一些簡單的效果要會，這時候差不多可以勝任重構了，和後台交互可以放在最後學。
手機打字，寫的亂，見諒。

需要學習計算機基礎知識，常用數據結構，常用演算法，簡單的通信協議，伺服器相關知識，資料庫建庫，各種表結構，編譯原理了解一下，搞清楚web編程的一切，我並不是開玩笑，確實，學學html+css+簡單的瀏覽器js就可以完成模板開發工作，氮素！！發現空間基本是0，而且人是有惰性的，你習慣了做靜態頁面，那麼很可能你就一輩子切切圖了，模板製作本身更像是做word而不是編程，另外我覺得前端開發本身並不是很有前途的工作(性能還是太太太太弱了，而且代碼不能加密，你終歸要解釋成瀏覽器看得懂的js，一個調試工具就能輕易破解。)，但是js這個語言標準大有可為。

首先，Web工程師要入門必須要了解前端、後端、後台的基本概念，同時要了解基本的html、css和javascript語法，最後根據設計師的設計圖在不考慮兼容性的情況下把頁面做出來。

HTML + CSS 這部分建議在 W3school 在線教程上學習，邊學邊練，每章後還有小測試。網上也有很多自學的基礎視頻，例如慕課網、扣丁學堂等等，可以模仿一些網站做些頁面。學習css建議可以看相關的一些書籍，如《CSS權威指南》、《CSS揭秘》《精通CSS：高級Web標準解決方案》，博客和專欄等也可以瀏覽。

Javascript 要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，還是建議先在 W3school上學習。之後建議馬上看《Javascript語言精粹》，JS是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。

過了這階段，尤其要對js的基本語言機制、面向對象等等要有一定的簡介。

可以自學jQuery，簡單易用。一樣可以上網找相關資料進行學習，遇到問題查文檔就行了。框架可以幫你屏蔽瀏覽器的差異性，讓你能更專註與Web開發學習的精髓部分。

學習ajax，百度百科、維基百科上的內容就足夠了。真正編程是很容易的，如今幾乎所有框架都對Ajax有良好的封裝，編程並不複雜。

學習一門後台語言的基本使用，例如php，配合資料庫的增刪查改，可以實現一些簡單的動態數據頁面。嘗試著找一個簡單的電商網站頁面，自己模仿實現。

建議每學習一個階段，對前面的知識點進行一番系統地梳理，你會發現你有新的領悟及體會。

個人學習經歷：計算機專業本科學生，從大一開始學習網頁製作，現在的web前端開發，開始就喜歡做網頁，覺得做出來網頁無比自豪有成就感，所有事情的成功離不開對於這件事情的熱愛和追求，雖然我們學習計算機的，但是我們寢室6個人，一共只有2個人學習，其中就有我一個，其他4個人一直在打遊戲，畢業去打工，一個月四五千塊錢。學習web前端我學習四年時間，在學校跟著做了不少項目，所以畢業後第一份工資是13000在南京，因為學習的時間比較長，我對於基礎知識掌握的非常牢靠，我們都知道，任何東西80%都是基礎，跟高考卷一樣，所以想學前端的基礎要打好。

2017年我認為初學者學習前端應該學習哪些東西？

1.html+css靜態布局也是web前端中最簡單的東西，沒有比這個更簡單了，如果這個都學不好，還是去做其他職業吧。還有網站上傳都要去了解，html5標籤+css3動畫這些。

2.JavaScript+jQuery+Ajax+正則表達式+gulp ，這塊比較重要，可以說JavaScript就是web前端，但是JavaScript一般都會難倒很多人，最好有人指導學習，不然很容易打擊信心和放棄。

3.2D+3D++Canvas+Svg+本地存儲

4.react+vue等等框架，根據公司的要求學習。

這些東西如果想學好並且掌握，至少需要學習半年的時間，所以能學好web前端的也都是有耐心的人，很多人想快，想快點找工作，最後基本都是被這種著急害了自己，學的就不紮實，沒人要。

個人建議如下：

一：學習千萬別盲目，我們做開發的都知道，有了項目之後，先去想思路，要把每一個細節盡量想到位，不然以後就等著無限出BUG吧，很難受。學前端也是，首先清楚前端怎麼學有效率，別自己蠻幹，最後浪費時間，很多人自學前端，就按照自己的方式學，最後很多都是放棄的，這個需要跟過來人去請教，如果沒有人問，可以隨時問我，有不懂的問題隨時來問題，工作不忙的時候可以給大家解答。

二：制定學習規劃，跟上面一樣，學習別盲目，要有規劃，貪多嚼不爛，不是今天多學點，明天少學點，這樣是不行的，知道自己每天都學什麼，做什麼案例，這才是有效率的學習方式。

三：別光看書，最好學完了一塊的知識點，然後再去看書，這樣會起到更好的溫習效果，看書才有有意義，我們做開發的都是動手寫東西，看書能看懂，但是基本都寫不出來，一點用沒有。

四：如果有條件可以選擇培訓，但是建議選擇線上輔導，因為線下四個月的培訓費用都20000+以上，學習時間也短，學習無論在哪裡學都是自己的事情，半年的時間能去付出，一個前端還是沒有問題的。

五：交流問題的地方，人和人的交流會碰撞出來思想上的東西，我們做開發的就是這樣，有人可以點醒我們，所以初學前端不要孤軍奮戰，這樣不行，要有交流的地方。

最後，希望大家可以堅持下去，學開發，不是智商，最重要的就是誰能耐得住寂寞，堅持最最後。

個人覺得，零基礎的話，還是先從html css 開始學起。在這之後，可以開始學習javascript。如果你是在校生的話，可以考慮先看看與編程相關的概念性的東西。另外，本人從13年開始從事前端開發工作，至今已4年多，積累了很多與前端相關的職場經驗，目前已在博客園更新了一系列文章，專門寫給前端小白入門的，我的博客園ID：閏土少年。還有，歡迎關注我的前端公眾號：閏土哥的前端路。裡面有很多的技術乾貨，職場生活感悟。莫回頭，前端路上我們一起走！

零基礎入門的話，首先要學html和css 吧，先學會寫靜態頁面，資源的話可以看w3c或者其他電子書，最好是邊敲代碼邊學，這樣才能記得住，並且及時發現自己的短板，可以去模仿一些網站的頁面，例如百度，淘寶等等，寫完之後對比一下，人家是怎麼實現的。慢慢的開始接觸js，邊做項目邊學習，可以到githud上面看別人的優秀代碼，一定要注意代碼規範。

基礎就是：HTML、CSS、Javascript、瀏覽器調試；

然後把jquery、ajax、sql、以及最好再掌握點後台，例如javaphp之類的。

好像不同前端公司也用不同框架，有些是JSP的，有的是PHP的，有些要讓你會後台，有些要讓你會react.js
ode.jsvue.js,等等，不過前面的基礎是必須的。

先學英語～～

你和CS專業的學生就差計算機組成原理，數據結構，操作系統，計算機網路，演算法設計的距離。