web前端其實(shí)是一個(gè)蠻重要的角色，承載了業(yè)務(wù)的交互與展現(xiàn)，是一個(gè)系統(tǒng)跟用戶打交道最緊密的角色。
為了詳細(xì)回答這個(gè)問題，我寫成了一篇文章 https://www.toutiao.com/i6514409636878090756/
可以去看一下

Web前端學(xué)習(xí)內(nèi)容與要求首先，做前端的話，你的眼光要看遠(yuǎn)�，F(xiàn)在技術(shù)更新很快，如果你還在用什么幻燈片，燈箱效果，那你真不是做前端的料。只能說你是應(yīng)付人員，或者說就是只會(huì)就應(yīng)用別人寫的效果代碼而已。其次，要提升自己的價(jià)值。不要學(xué)會(huì)div+css,就不想學(xué)其它的技術(shù)了，要時(shí)時(shí)苛刻想到自己的危險(xiǎn)處境，像懂div+css的人太多了，網(wǎng)上教程3天學(xué)會(huì)div+css，10天精通的資料一天堆。多去學(xué)點(diǎn)更多能提現(xiàn)你自身價(jià)值的東西，比如除div+css之外，可以學(xué)習(xí)一些后臺(tái)語言php，java之類的。最后，分享，就是自己的價(jià)值要表現(xiàn)出來。中國沒有jquery，沒有smarty,這么好用的東西，中國缺的并不是能力，是分享。所有要學(xué)分分析，比如論壇，博客等信息量大的地方，不僅可以學(xué)到你不知道的，也可以增加自己的知識(shí)積累。在這里，有必要提醒一下想要從事Web前端開發(fā)的新手，一定要明確自己的目標(biāo)，擺正自己的位置，真正做到掌握一門技術(shù)。

謝謝邀請(qǐng)！

Web前端開發(fā)現(xiàn)在越來越重要，一改前些年重后臺(tái)輕前臺(tái)的情況，前端的待遇也得到了明顯的提升，所以學(xué)習(xí)前端也是個(gè)不錯(cuò)的選擇。

前端雖然好上手，但是內(nèi)容也比較多，合理的規(guī)劃能節(jié)省不少時(shí)間，也能有更合理的知識(shí)結(jié)構(gòu)。

第一步應(yīng)該從HTML開始，現(xiàn)在的html5從手機(jī)端到pad再到pc端都有廣泛的應(yīng)用，這部分內(nèi)容結(jié)構(gòu)清晰，實(shí)驗(yàn)也比較好做，有個(gè)文本編輯器就能進(jìn)行代碼編寫，而且html語法結(jié)構(gòu)沒有嚴(yán)格的要求，即使寫錯(cuò)了也能運(yùn)行，所以比較適合初學(xué)者。這部分內(nèi)容學(xué)習(xí)結(jié)束后，可以自己搭建一個(gè)個(gè)人網(wǎng)站，練習(xí)的同時(shí)也能提高自己的自信心。

第二步應(yīng)該學(xué)習(xí)CSS，這部分內(nèi)容可以規(guī)范化和模塊化html的代碼，通過css可以在不修改html代碼的情況下改變它的顯示風(fēng)格，所以css就像是html的樣式設(shè)計(jì)者。這部分內(nèi)容并不復(fù)雜，但是需要做大量的實(shí)驗(yàn)。有一些命令需要記憶，但是并不復(fù)雜。

第三步應(yīng)該學(xué)習(xí)Javascript，這部分內(nèi)容頗為復(fù)雜，涉及到的內(nèi)容也比較多，當(dāng)然它的功能也更為復(fù)雜，可以寫邏輯代碼，能夠完成大量的控制功能。學(xué)習(xí)js是整個(gè)前端的重點(diǎn)和難點(diǎn)，建議多做實(shí)驗(yàn)。

第三步是學(xué)習(xí)各種前端框架，這部分內(nèi)容就比較多了，現(xiàn)在流行的框架也比較多，比如Bootstrap，F(xiàn)oundation等，這部分內(nèi)容建議一邊工作一邊使用，而且變化較快。

剩下的就是經(jīng)常到前端社區(qū)多跟大家多多交流，把握最新的開發(fā)趨勢(shì)。

希望我的回答能給你幫助。

web前端作為下一代網(wǎng)站開發(fā)技術(shù)，無論你是一個(gè)Web開發(fā)人員或者想探索新的平臺(tái)的游戲開發(fā)者，都值得去研究。借助尖端功能，技術(shù)和API，web前端允許你創(chuàng)建響應(yīng)性、創(chuàng)新性、互動(dòng)性以及令人驚嘆的漂亮網(wǎng)站。更進(jìn)一步，你也可以使用web前端創(chuàng)建原來只能用于桌面平臺(tái)上的復(fù)雜應(yīng)用程序。

挑選了10個(gè)適合初學(xué)者的web前端入門教程，帶你踏上web前端之旅。

1. HTML5教程4 U

對(duì)于初學(xué)者，HTML5 Doctor網(wǎng)站是開始學(xué)習(xí)的很好的地方，你可以編輯代碼，查看輸出結(jié)果。

2. 使用HTML5和CSS3創(chuàng)建一個(gè)下拉導(dǎo)航菜單

了解如何使用新的HTML5標(biāo)簽和CSS3創(chuàng)建一個(gè)簡(jiǎn)單又時(shí)尚的下拉菜單。

3. 使用HTML5和CSS3光滑的登錄表單

使用CSS3和HTML5創(chuàng)建漂亮的登錄表單，不需要任何JavaScript代碼。

4.使用HTML5，CSS3和jQuery創(chuàng)建下拉式登錄框

這是一個(gè)簡(jiǎn)單的教程，可以幫助你使用CSS3，HTML5和幾行jQuery代碼創(chuàng)建一個(gè)漂亮的下拉登錄表單。

5. 使用HTML5, CSS3 and jQuery創(chuàng)建可愛的彈出欄

按照這個(gè)簡(jiǎn)單的教程中的步驟來建立一個(gè)彈出頁面頂部的信息欄，你可以用它來顯示從新聞、最新的博客文章等。

6. 如何創(chuàng)建一個(gè)很酷和實(shí)用的CSS3搜索框

了解如何使用HTML5的占位符屬性來創(chuàng)建一個(gè)很酷和實(shí)用的CSS3搜索框。

7. 使用HTML5創(chuàng)建一個(gè)有吸引力的在線演示文稿

本教程將教你如何使用HTML5的標(biāo)簽，nav, menu, section, aside和header制作漂亮的演示文稿。

8. HTML5灰度圖像和懸停效果

你可能已經(jīng)在其他網(wǎng)站上看到過這樣的效果。按照本教程中的步驟學(xué)習(xí)如何使用HTML5和jQuery來動(dòng)態(tài)地把彩色圖像轉(zhuǎn)化為灰度模式。

9. HTML5幻燈片 – 使用Canvas and jQuery

了解如何創(chuàng)建一個(gè)優(yōu)雅的幻燈片過渡效果。

10. 學(xué)習(xí)如何制作好看的HTML5表單

Learn how to style a nice looking HTML5 form using some CSS3 techniques.

了解如何使用一些CSS3技術(shù)制作一個(gè)好看的HTML5表單。

以上就是為大家分享的適合web前端技術(shù)的入門教程，希望本篇文章對(duì)準(zhǔn)備學(xué)習(xí)web前端的小伙伴有所幫助，想了解更多web前端相關(guān)知識(shí)記得關(guān)注千鋒武漢官網(wǎng)。

作為一個(gè)正在經(jīng)歷培訓(xùn)的入坑者給你點(diǎn)建議

1、html+css h5+c3

2、javascript （分初級(jí)+webAPI+高級(jí)）

3、jquery

4、ajax（蠻重要）

5.、Node.js （重要）

6、Vue（或者Anglar、React，前端三大框架至少需要會(huì)一個(gè)，推薦Vue，畢竟國人開發(fā)的，文檔是中文的）

其他的像微信小程序有興趣也可以去學(xué)，我也是剛?cè)腴T，還有些知識(shí)點(diǎn)可能不清楚，這些只是個(gè)大概的線路

現(xiàn)在是知識(shí)共享時(shí)代，免費(fèi)的課程有很多。

不知道你有編程基礎(chǔ)沒有，如果沒有不建議你看書籍，可以先在網(wǎng)上看基礎(chǔ)教程，有老師講解會(huì)比你自己學(xué)習(xí)快很多。免費(fèi)的課程網(wǎng)上一搜一大把，各種網(wǎng)盤資源視頻都是，不過多了不一定是好事，不要看見視頻就保存，你也看不過來，建議你找基礎(chǔ)開始的然后一點(diǎn)一點(diǎn)學(xué)習(xí)，這個(gè)視頻系列看完了，再去看其他的。

這樣的學(xué)習(xí)網(wǎng)站有很多，比如知名的慕課網(wǎng)、騰訊課堂、網(wǎng)易云課堂、網(wǎng)易公開課等等。重要的不在多在于精，每家課程都差不多，前端基礎(chǔ)講來講述也就那么多內(nèi)容，所以重要的是你要能堅(jiān)持一個(gè)學(xué)習(xí)完，不要看這個(gè)課程好學(xué)了兩天又學(xué)下一個(gè)，那樣沒有用。

等你前端入門了可以自己找些書看，不過還是建議多看視頻多練習(xí)，編程是要?jiǎng)邮智么�碼的，只有你寫了，你才理解的更深。

我跟你說一套，我自己的方法，非常的有效

我?guī)н^不少人，一般1周看w3scholl的html和css屬性，從2周開始不斷的給項(xiàng)目實(shí)戰(zhàn)，難度則是從簡(jiǎn)單到復(fù)雜，3個(gè)月后，基本學(xué)出來的動(dòng)手能力都很好，好過培訓(xùn)出來的

先學(xué)習(xí)html和css，學(xué)完練習(xí)寫靜態(tài)網(wǎng)頁，熟練的能把psd圖轉(zhuǎn)換成html頁面之后，緊接著學(xué)習(xí)JavaScript，學(xué)完后，再去為你之前寫的靜態(tài)頁面添加點(diǎn)交互效果。當(dāng)你完成上述之后，后面該學(xué)什么你自己就知道了。

學(xué)習(xí)前端肯定是要分階段來學(xué)習(xí)，把每一個(gè)階段搞懂，一步一腳印，之后才能找到一份合適的工作。

第一階段：Web網(wǎng)頁基礎(chǔ)

HTML入門基本內(nèi)容，CSS+DIV的基礎(chǔ)知識(shí)，選擇器，盒子模型，網(wǎng)頁布局，Photoshop

第二階段：Web編程基礎(chǔ)

學(xué)習(xí)路線：JavaScript基礎(chǔ)，BOM和DOM模型，事件處理，jQuery，交互及動(dòng)畫，jQuery優(yōu)質(zhì)插件，文檔處理，數(shù)組和對(duì)象操作

第三階段：Web編程高級(jí)及全棧開發(fā)

學(xué)習(xí)路線：JavaScript高級(jí)編程，原型模式，jQuery插件開發(fā)，模塊化組件開，AJAX，Express(Node.js)，Mongodb，RequireJS，MongoDB

第四階段：響應(yīng)式網(wǎng)站開發(fā)

學(xué)習(xí)路線：HTML5/CSS3，響應(yīng)式原理及布局，Bootstrap，前端依賴管理，CSS預(yù)處理語言（Less+Sass），Grunt/Gulp自動(dòng)化構(gòu)建工具，Angular4

第五階段：框架與項(xiàng)目管理

學(xué)習(xí)路線：Grunt/Gulp，Webpack模塊加載器&打包工具，MVC（backbone）架構(gòu)前端，VUE2，React

第六階段：混合式移動(dòng)及微信開發(fā)

學(xué)習(xí)路線：React Native，微信小程序

同樣，自制力的強(qiáng)弱決定了你是否能開拓自己的視野。

希望以上黑馬先鋒學(xué)院的建議能對(duì)你產(chǎn)生幫助。

轉(zhuǎn)載請(qǐng)注明來自：http://www.heimaxf.com

你說就是想學(xué)著玩，這樣的話，我不太建議你學(xué)習(xí)。

我身邊的同學(xué)，從C語言到JAVA到前端開發(fā)，學(xué)了有將近3年的時(shí)間。畢竟我們的專業(yè)不是軟件過程，只能自學(xué)或者在外面報(bào)班。我當(dāng)時(shí)也在外面報(bào)班了，我學(xué)了有1年半的時(shí)間，花了有4千元左右。最后我沒有學(xué)，主要是對(duì)編程真的不來電，發(fā)現(xiàn)對(duì)互聯(lián)網(wǎng)產(chǎn)品和運(yùn)營更感興趣。

當(dāng)然，不止學(xué)習(xí)了這3個(gè)方面的知識(shí)，還有C++,數(shù)據(jù)結(jié)構(gòu)，操作系統(tǒng)，JSP+Servlet+JavaBean，Struts+Hibernate+Spring，Ajax。這些都是前期的課程，具體確定你的工作方向后，還要學(xué)習(xí)你方向的知識(shí)。大家不要認(rèn)為學(xué)前面的沒有用。學(xué)習(xí)編程，建立一套編程思想是最重要的，用程序員的思考方式去思考問題。后面的各種編程語言其實(shí)都是建立在前面的基礎(chǔ)之上，所以掌握編程的核心，萬變不離其宗。即使后面有新的編程語言，學(xué)習(xí)起來也不是太困難。

你要做的有以下幾步：

了解前端

網(wǎng)站的開發(fā)和開發(fā)分為前端和后端兩個(gè)部分。前端主要負(fù)責(zé)實(shí)現(xiàn)可視化和交互效果，并與服務(wù)器通信完成業(yè)務(wù)邏輯。其核心價(jià)值在于追求用戶體驗(yàn)。

知道前端的工作流程：

基礎(chǔ)學(xué)習(xí)【急于求成的，可以略過】

在這里，我只介紹入門級(jí)別的web前端，至于進(jìn)階過程，等你工作了，領(lǐng)導(dǎo)和生活會(huì)逼著你學(xué)習(xí)。

我看過一些培訓(xùn)機(jī)構(gòu)，他們大多數(shù)都是直接教前端編程需要的H5、CSS3、Javascript、等等，不會(huì)教編程的基本基礎(chǔ)。宣傳基本上都是3個(gè)月掌握前端之類的。要知道，這就是為什么企業(yè)寧愿招生本科是計(jì)算機(jī)相關(guān)專業(yè)的學(xué)生的原因？大學(xué)4年，除去大四，一般大學(xué)的課程都是先打基礎(chǔ)，再上專業(yè)基礎(chǔ)課，再上專業(yè)課，再上專業(yè)選修課。這樣上的好處就是專業(yè)基礎(chǔ)很好。而那些3個(gè)月就出師的培訓(xùn)機(jī)構(gòu)，是直接就教你編程，在最后幾周，給你教一個(gè)項(xiàng)目，一些面試技巧，然后你憑著這個(gè)去找工作。工作找到了，老板讓你負(fù)責(zé)項(xiàng)目里的一小塊，這個(gè)時(shí)候，會(huì)出現(xiàn)很多問題。大家不要覺得荒唐，我一個(gè)高中同學(xué)就是這樣的，最后在公司里呆了一周，主動(dòng)辭職，又開始自學(xué)了。

我說這個(gè)的原因是，如果你打算以后靠這個(gè)工作，而且有一顆上進(jìn)的心。我建議你：

• 學(xué)習(xí)C語言。別問我為什么，我就是覺得一個(gè)程序員應(yīng)該要學(xué)過C語言，牛逼不牛逼是另外一會(huì)事兒，況且很多書都是用的C語言描述。別光學(xué)語法，弄清編譯是什么，鏈接是什么，指針是又怎么一會(huì)事兒。

• 學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)和簡(jiǎn)單的算法。你看，你學(xué)完C語言就能學(xué)數(shù)據(jù)結(jié)構(gòu)和算法了，我難以想象用 php 來描述數(shù)據(jù)結(jié)構(gòu)和算法會(huì)有多么地奇怪。如果你覺得學(xué)了之后還是不知道數(shù)據(jù)結(jié)構(gòu)究竟是什么，有什么用，那證明你還沒有真的學(xué)到。

• 學(xué)習(xí)一門面向?qū)ο蟮撵o態(tài)編程語言。推薦 Java。學(xué)得有多好，就看你花了多少時(shí)間了。請(qǐng)務(wù)必仔細(xì)閱讀各類相關(guān)書籍，深刻領(lǐng)會(huì)面向?qū)ο蟮闹匾�編程思想（不過，切忌迷信面向?qū)ο缶幊蹋��?/p>

• 學(xué)習(xí)操作系統(tǒng)和計(jì)算機(jī)網(wǎng)絡(luò)。至少一些基本的概念需要弄清楚，具體的細(xì)節(jié)，沒有必要過于糾結(jié)。
  

進(jìn)入前端學(xué)習(xí)

• 基礎(chǔ)：推薦一個(gè)學(xué)習(xí)網(wǎng)站：FreeCodeCamp.cn

它是一個(gè)專門為0基礎(chǔ)學(xué)習(xí)者準(zhǔn)備的網(wǎng)站，從0開始學(xué)習(xí)WEB。課程設(shè)置很平滑，先是一些理論，然后是一些小實(shí)踐，像打游戲一樣，要一關(guān)一關(guān)的打通關(guān)。還有團(tuán)隊(duì)合作，你可以和你的小伙伴一起做一些任務(wù)，小項(xiàng)目。關(guān)鍵是，你完成課程后，會(huì)給你頒發(fā)證書，就像對(duì)你學(xué)習(xí)過程的記錄。

我覺得這個(gè)很適合，自制力不太高的學(xué)習(xí)者。前端總共學(xué)習(xí)400個(gè)小時(shí)，還有其他編程系統(tǒng)課。如果你想提升自己，也可以學(xué)習(xí)。

• 用 HTML + CSS 模仿幾個(gè)漂亮的靜態(tài)頁面。

當(dāng)你看到現(xiàn)在大部分的網(wǎng)頁都覺得能大概猜到怎樣做，并且花時(shí)間真的能做出來的時(shí)候，即可進(jìn)入下一步。注意，這個(gè)時(shí)候請(qǐng)你不要管瀏覽器兼容性或者太過注意代碼的優(yōu)雅結(jié)構(gòu)，因?yàn)闆]必要。做到能兼容現(xiàn)代瀏覽器，內(nèi)容和樣式基本完全分離即可。這大概需要半個(gè)月到一個(gè)月的學(xué)習(xí)時(shí)間。

• 用 HTML + CSS + JS 寫幾個(gè)有交互的頁面。

例如，你可以寫一個(gè)漂亮的注冊(cè)頁面，它能夠驗(yàn)證各種輸入是否符合條件并且有一個(gè)用原生 JS 實(shí)現(xiàn)的日期選擇器（Date Picker）。或者，寫一個(gè)漂亮的，有動(dòng)畫的相冊(cè)。注意，這個(gè)階段請(qǐng)使用原生 JavaScript。同樣的，兼容現(xiàn)代瀏覽器即可。這大概需要半個(gè)月的學(xué)習(xí)時(shí)間。

• 入門一門后端語言。

以前的工程師必須知道至少一種后端語言，但如果愛好也可以深入研究，那么較低的難度應(yīng)該是PHP。這一部分可以分為基于兩個(gè)框架的頁面。大型項(xiàng)目基于框架開發(fā)。建議了解至少一種MVC框架，如PHP的CI，Yii，YAF，等，和框架的設(shè)計(jì)思想非常相似。現(xiàn)在NodeJs已經(jīng)被廣泛的應(yīng)用于大企業(yè)，并建議人們使用表達(dá)框架節(jié)點(diǎn)做一些后端服務(wù)。

• 入門一個(gè)關(guān)系數(shù)據(jù)庫。

比如說 MySQL。DDL 和 CRUD ，請(qǐng)一定要熟練。恩，這個(gè)階段不要談什么優(yōu)化，那是扯淡�，F(xiàn)在，你大概可以做一個(gè)多用戶的博客程序了。這大概需要半個(gè)月的時(shí)間。

• 交互設(shè)計(jì)
  

最前面已經(jīng)介紹了，前端的工作主要是實(shí)現(xiàn)界面美化和交互體驗(yàn)。什么是交互？交互的對(duì)象就是用戶，給用戶好的體驗(yàn)。給你推薦幾本我看過的書：

1. 《用戶體驗(yàn)要素》
   

2. 《About Face 3 交互設(shè)計(jì)精髓》

3. 《簡(jiǎn)約至上》

我相信有很多人和我一樣，下了一個(gè)APP，發(fā)現(xiàn)：什么界面嗎？好難看？想找一個(gè)東西不好找。功能塊的區(qū)分不明顯等等，這些都是交互的事。

以上就是前端工程師的入門階段。如果對(duì)你有用，請(qǐng)點(diǎn)個(gè)贊吧！如果你有不同的想法，可以留言，我會(huì)回復(fù)的。