網(wǎng)友解答: 第一步：HTML + CSS前端的入門(mén)門(mén)檻極低，體現(xiàn)在HTML和CSS上。運(yùn)行環(huán)境就是瀏覽器，推薦Chrome。你需要的一些前端工具箱，推薦Dreamwear/Sublime

網(wǎng)友解答:

第一步：HTML + CSS

前端的入門(mén)門(mén)檻極低，體現(xiàn)在HTML和CSS上。運(yùn)行環(huán)境就是瀏覽器，推薦Chrome。你需要的一些前端工具箱，推薦Dreamwear/Sublime/Photoshop/SVN等。HTML和CSS不是編程語(yǔ)言，前者只是結(jié)構(gòu)標(biāo)簽，后者則是樣式配置，入門(mén)是非常簡(jiǎn)單的。網(wǎng)上資料也有很多，剛?cè)腴T(mén)查閱資料可以用w3school或者M(jìn)DN（https://developer.mozilla.org/zh-CN）。

進(jìn)階可以學(xué)習(xí)下：

HTML主要是學(xué)了H5的Canvas。

掌握預(yù)處理工具Sass、Less。

前端框架：Bootstrap、Foundation。

第二步：JavaScript

這是至關(guān)重要的階段。

javascript 要學(xué)的內(nèi)容實(shí)在很多，如果沒(méi)有其他編程語(yǔ)言的基礎(chǔ)的話，學(xué)起來(lái)可能要費(fèi)些力，還是建議先在 w3school上學(xué)習(xí)。之后建議馬上看《javascript語(yǔ)言精粹》，js是一門(mén)很混亂的語(yǔ)言，這本書(shū)能夠幫助你區(qū)分哪些是語(yǔ)言的精華，哪些是糟粕，對(duì)于語(yǔ)言精華，應(yīng)該深入學(xué)習(xí)。糟粕部分能看懂別人寫(xiě)的代碼就行，自己就不用嘗試了。

在有了基礎(chǔ)之后，進(jìn)一步學(xué)習(xí)內(nèi)容包括：

1. 簡(jiǎn)單框架，薦先學(xué) zepto，簡(jiǎn)單易用

2. 復(fù)雜框架，是指 react、vue、angular 等不直接操作dom的框架。這類框架建議js基礎(chǔ)打扎實(shí)后再學(xué)習(xí)。

學(xué)習(xí)前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什么苦。。。既然學(xué)習(xí)這么痛苦，為什么不快樂(lè)一點(diǎn)學(xué)呢？

anyway~希望大家可以成為一個(gè)優(yōu)秀的前端er！

網(wǎng)友解答:

雖然我不是 web前端開(kāi)發(fā)工程師，但是我會(huì)web前端，前端開(kāi)發(fā)我通過(guò)自學(xué)掌握的。web前端相對(duì)容易， 雖然你沒(méi)有基礎(chǔ)，是個(gè)小白，但是你要對(duì)自己充滿信心，相信你很快就可以掌握。

web前端都包括什么？

三個(gè)大方向，HTML、css、JavaScript。html就不細(xì)說(shuō)了，很多人都說(shuō)html算不上編程語(yǔ)言，連個(gè)循環(huán)都寫(xiě)不了。一個(gè)web頁(yè)面時(shí)三者共同努力的結(jié)果。

如何學(xué)習(xí)Web前端？首先你需要學(xué)習(xí)html的各個(gè)標(biāo)簽，掌握其用法和規(guī)范，明白其作用。開(kāi)始學(xué)習(xí)css的使用，你先學(xué)習(xí)在html頁(yè)面中為標(biāo)簽增加css樣式，其次是將css寫(xiě)在網(wǎng)頁(yè)的<head</head標(biāo)簽對(duì)的<style</style標(biāo)簽對(duì)中。學(xué)習(xí)如何引入外部的css文件。如何將css和div結(jié)合起來(lái)，css你需要學(xué)習(xí)各種效果、定位、組件設(shè)置、布局、響應(yīng)式等等這部分需要你學(xué)習(xí)一段時(shí)間。學(xué)習(xí)原生的css后你可以學(xué)習(xí)使用css框架，下方我列舉一些框架。之后你還需要學(xué)習(xí)JavaScript，還是從基礎(chǔ)知識(shí)開(kāi)始學(xué)習(xí)，學(xué)習(xí)的同時(shí)你可以自己開(kāi)發(fā)一些插件檢驗(yàn)學(xué)習(xí)成果學(xué)習(xí)完基礎(chǔ)之后你需要學(xué)習(xí)JavaScript框架和一些js庫(kù)。最后你將三者結(jié)合起來(lái)開(kāi)發(fā)一個(gè)網(wǎng)站的前端進(jìn)行練習(xí)，可以開(kāi)發(fā)wordpress的主題等?；蛘吣阍賹W(xué)習(xí)后端語(yǔ)言開(kāi)發(fā)一個(gè)網(wǎng)站。關(guān)于前端學(xué)習(xí)我覺(jué)得一個(gè)網(wǎng)站非常好，那就是w3cschool%%%cn，里面有個(gè)編程實(shí)戰(zhàn)闖關(guān)模塊，花點(diǎn)時(shí)間通過(guò)他會(huì)對(duì)你有很大幫助。編程實(shí)戰(zhàn)難度不大，我很快就通關(guān)了。css的框架

Bootstrap—— 富有創(chuàng)意并且強(qiáng)大的移動(dòng)為先的前端框架，幫助你快速開(kāi)發(fā)web應(yīng)用

Semantic—— 通過(guò)創(chuàng)造一個(gè)用來(lái)方便分享UI的語(yǔ)言使得開(kāi)發(fā)人員和設(shè)計(jì)師的可控范圍更為廣泛。

kube—— 極簡(jiǎn)但非常豐富的組件開(kāi)發(fā)自適應(yīng)或者響應(yīng)式的網(wǎng)站。 擁有靈活的Grid和漂亮的字體排版。絕對(duì)自由，沒(méi)有多余強(qiáng)制的樣式。

Less框架—— 是一個(gè)CSS的網(wǎng)格系統(tǒng)，幫助你設(shè)計(jì)自適應(yīng)的網(wǎng)站。包含了4個(gè)布局和3套字體排版預(yù)設(shè)，所有的都基于同一個(gè)Grid。

YAML—— 是一個(gè)模塊化的CSS框架，重點(diǎn)在于靈活性，良好的訪問(wèn)和響應(yīng)式的設(shè)計(jì)。這個(gè)框架重點(diǎn)在于設(shè)備獨(dú)立的屏幕設(shè)計(jì)和靈活的布局模塊化管理。

js框架

AngularJS—— 有著諸多特性，最為核心的是：MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴注入等等。

React —— 是一個(gè) Facebook 和 Instagram 用來(lái)創(chuàng)建用戶界面的 JavaScript 庫(kù)。

Vue.js ——是用于構(gòu)建交互式的 Web 界面的庫(kù)。它提供了MVVM數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的 API。

jQuery —— 是一個(gè)“寫(xiě)的更少,但做的更多”的輕量級(jí) JavaScript 庫(kù)。

最后加油吧，祝你早日掌握前端?。?！

碼了這么多字，點(diǎn)個(gè)贊關(guān)注下再走吧?。?！

關(guān)注萌新程序猿（本人咯），了解更多IT以及程序猿的知識(shí)！?。?/p>