整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
日，有不少的程序員問(wèn)w3cschool這邊，前端開(kāi)發(fā)應(yīng)該怎么學(xué)?
有個(gè)小白程序員表示，自己走了很多彎路，學(xué)java開(kāi)發(fā)沒(méi)學(xué)透不能就業(yè)，現(xiàn)在學(xué)前端又不知道如何下手，前后算起來(lái)浪費(fèi)了不少的時(shí)間。
針對(duì)此問(wèn)題，下面w3cschool就給程序員小伙伴們答疑解惑，并分享一些干貨。
前端有三架馬車你一定要學(xué)會(huì)“駕馭”，HTML+CSS+Javascript。
照目前看來(lái)，網(wǎng)上各種前端學(xué)習(xí)資料又多又雜，確實(shí)讓不少入門(mén)前端的小伙伴不知所措。要選什么學(xué)習(xí)資料?如何入門(mén)前端開(kāi)發(fā)?
關(guān)于視頻的選擇，直接網(wǎng)上搜“30 Days to Learn HTML & CSS”這個(gè)視頻來(lái)看。
這個(gè)視頻是國(guó)外的前端開(kāi)發(fā)特產(chǎn)，大小有1G多吧!
前端開(kāi)發(fā)可以照前端開(kāi)發(fā)的視頻進(jìn)行實(shí)戰(zhàn)訓(xùn)練，建議可以一邊開(kāi)著NotePad++?，一邊看視頻，一邊敲代碼。
另外，可以用有道云，或者是印象筆記稍微做點(diǎn)記錄，這會(huì)加快你對(duì)html、css的學(xué)習(xí)。
當(dāng)你咨詢了很多的前端工程師，他們都會(huì)推薦你從經(jīng)典的w3cschool基礎(chǔ)教程開(kāi)始，把上面的課程刷一遍。
通過(guò)前面兩步的學(xué)習(xí)，你基本上算是入門(mén)html啦。
但相信也會(huì)有些程序員覺(jué)得很枯燥，那不妨可以嘗試w3cschool新開(kāi)發(fā)的html微課。
比如之前的《刀塔傳奇》，很多人每天刷副本都可以樂(lè)此不疲，因?yàn)橛螒蛏?jí)通關(guān)是比較有趣的。
w3cschool微課同樣采用了闖關(guān)刷副本的模式，你通過(guò)每天有趣的刷副本闖關(guān)，就可以掌握html重點(diǎn)的概念和編程技能。
會(huì)有些前輩會(huì)給你推薦《DOM編程藝術(shù)》、《Javascript權(quán)威指南》、《Javascript高級(jí)程序設(shè)計(jì)》、《鋒利的JQuery》等，但對(duì)于新手來(lái)說(shuō)似乎略難。
不妨去看Head first html， xhtml & CSS這兩本簡(jiǎn)直是神書(shū)，真心經(jīng)典!
樣是web前端工程師，我們通常會(huì)發(fā)現(xiàn)他們的薪資待遇截然不同，web更注重的在于技術(shù)。
通過(guò)web培訓(xùn)出來(lái)的工程師，通常是中高級(jí)。自學(xué)的web工程師也有可能達(dá)到這樣的水平，但是前提是必須系統(tǒng)化進(jìn)行學(xué)習(xí)。那么初級(jí)web前端應(yīng)該懂什么呢?
首先，Web工程師要入門(mén)必須要了解前端、后端、后臺(tái)的基本概念，同時(shí)要了解基本的html、css和javascript語(yǔ)法，最后根據(jù)設(shè)計(jì)師的設(shè)計(jì)圖在不考慮兼容性的情況下把頁(yè)面做出來(lái)。
需要注意的是，入門(mén)階段最關(guān)鍵的就是對(duì)所學(xué)內(nèi)容形成一套概念,知其然知其所以然，不要管好那么多細(xì)節(jié)。
其次，你可以把html、css和javascript分成三個(gè)階段進(jìn)行學(xué)習(xí)。
第一階段：HTML的學(xué)習(xí)
Html是超文本標(biāo)記語(yǔ)言，英文全稱為HyperText Mark-up Language，這是一個(gè)網(wǎng)頁(yè)的骨架。靜態(tài)網(wǎng)頁(yè)還是動(dòng)態(tài)網(wǎng)頁(yè)，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶。
當(dāng)然，學(xué)習(xí)html過(guò)程是比較枯燥乏味的，所以你需要更有效的學(xué)習(xí)策略。依w3cschool看來(lái)，你可以借助Dreamweaver的“拆分”視圖輔助學(xué)習(xí)。在“設(shè)計(jì)”視圖中看效果，在“代碼”視圖中學(xué)本質(zhì)，將各種視圖的優(yōu)勢(shì)發(fā)揮到極致，想必會(huì)比單純記憶HTML標(biāo)簽和屬性有趣、有用的多吧?
第二階段：CSS的學(xué)習(xí)
CSS是英文Cascading Style Sheets的縮寫(xiě)，叫做層疊樣式表，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。
學(xué)習(xí)css建議可以看相關(guān)的一些書(shū)籍，如《CSS權(quán)威指南》(很詳細(xì)、很經(jīng)典!)、《CSS揭秘》 《精通CSS：高級(jí)Web標(biāo)準(zhǔn)解決方案》，博客和專欄等也可以瀏覽。
第三階段：JavaScript的學(xué)習(xí)
JavaScript是一種在客戶端廣泛使用的腳步語(yǔ)言，在JavaScript當(dāng)中為我們提供了一些內(nèi)置函數(shù)、對(duì)象和DOM操作，進(jìn)而實(shí)現(xiàn)客戶端的特效、驗(yàn)證、交互等。
建議可以看《javascript語(yǔ)言精粹》，js是一門(mén)很混亂的語(yǔ)言，這本書(shū)能夠幫助你區(qū)分哪些是語(yǔ)言的精華，哪些是糟粕。如果是精華部分，我們?cè)诤罄m(xù)進(jìn)階部分可以深入研究，而如果是糟粕部分，那么只要大概看懂別人寫(xiě)的渣代碼就可以，自己還是不要嘗試為妙。
通過(guò)這三個(gè)階段的學(xué)習(xí)，我們就可以往更高級(jí)的web前端工程師進(jìn)階了!
附Web前端工程師學(xué)習(xí)圖:
更多編程技術(shù)，就來(lái)w3cschool。
SS雖然前期學(xué)習(xí)門(mén)檻比較低，但后期學(xué)習(xí)難度陡增。
甚至擅長(zhǎng)C++或者Java之類的程序員在學(xué)習(xí)CSS時(shí)往往都會(huì)很不適，其背后的原因是，典型的計(jì)算機(jī)開(kāi)發(fā)語(yǔ)言看重邏輯思維和抽象能力，但是CSS本身卻并無(wú)邏輯可言，它看重的是特性間的相互聯(lián)系和具象能力，而這往往是偏理性的程序員所不擅長(zhǎng)的。
國(guó)內(nèi)知名的前端博客“鑫空間-鑫生活”的博主
@張?chǎng)涡?/p>
老師在十余年的工作積累中，逐漸形成了一套對(duì)于CSS的完整認(rèn)知體系：在CSS的世界中，CSS并不是一個(gè)機(jī)械枯燥的語(yǔ)言，它的所有屬性都是有血有肉、有著不同個(gè)性和身世的個(gè)體。不同的個(gè)體可以碰撞出不同的火花，激蕩出異彩紛呈的故事。
在他編寫(xiě)的“CSS三部曲”的第一本書(shū)《CSS世界》的開(kāi)篇，他腦洞大開(kāi)地將CSS世界比作一部動(dòng)漫：
首先，動(dòng)漫名可以叫作《建筑神域》，講述一群建筑魔法師為國(guó)家存亡驚心動(dòng)魄戰(zhàn)斗的故事。
然后，出現(xiàn)了“Chrome王國(guó)”的幾位建筑魔法師日常訓(xùn)練的畫(huà)面。只見(jiàn)名為width的魔法師手持名叫選擇器的法器，準(zhǔn)確指向稱為<div>的最普通的塊狀建筑魔法石，口中念道：“層疊天星，幻化有形，50%，變！”只聽(tīng)見(jiàn)一聲清脆的“啪”，<div>魔法石寬度變成了原來(lái)的一半。
然而，width卻鎖眉搖頭，口中喃喃念道：“1毫秒，還不夠快，還要再練，不然在和‘IE王國(guó)’的戰(zhàn)斗中很難占得先機(jī)！”。
此時(shí)，width突然發(fā)現(xiàn)前面1米之處有一塊<span>之石，具有class="test"的特殊標(biāo)記，便立即拿出“法器”選擇器，念道：“類名之石，test為名，為我選擇，出！”
話音剛落，<span>之石藍(lán)色熒光一閃，明眼人都能看出來(lái)，width魔法師和<span>魔法石現(xiàn)在處于契約狀態(tài)。
width繼續(xù)念道：“層疊天星，幻化有形，50%，變！”
但<span>魔法石卻沒(méi)有任何變化，此時(shí)width一拍自己的腦門(mén)，似乎明白了什么，轉(zhuǎn)過(guò)頭對(duì)旁邊的display魔法師大聲叫道：“小D，這邊這邊，過(guò)來(lái)幫個(gè)忙……來(lái)呀，快點(diǎn)……”
只見(jiàn)display迅速結(jié)束自己的練習(xí)，屁顛屁顛跑過(guò)來(lái)：“咋啦？”
width說(shuō)：“此為內(nèi)聯(lián)之石，我無(wú)法駕馭，你幫我重塑一下。”
display回道：“小問(wèn)題！正好，魔法師技能委員會(huì)剛通過(guò)了我的一個(gè)新法術(shù)，我給你秀一秀？”
“喲，不錯(cuò)啊，快讓我瞅瞅！”
“好嘞！”只見(jiàn)display拿出自己的“法器”，念道：“類名之石，test為名，為我選擇，出！”緊接著，“層疊天星，幻化有形，flex，變！”
只聽(tīng)見(jiàn)一聲清脆的“啪”，在width和display的合作之下，<span>魔法石寬度也變化了。
“喲，很酷嘛！”width對(duì)display豎著大拇指稱贊道。
只見(jiàn)display靦腆一笑，小手在面前輕輕一揮：“就算你這么夸我，人家也不會(huì)開(kāi)心的啦……”
從上面的故事中不難看出：
在CSS世界中，HTML是魔法石，選擇器就是法器，CSS屬性就是魔法師，CSS各種屬性值就是魔法師的魔法技能，瀏覽器則是他們所在的“王國(guó)”，“王國(guó)”會(huì)不斷更新法律法規(guī)（版本升級(jí)），決定是否允許使用新的魔法石（HTML5新標(biāo)簽新屬性），是否允許新的魔法師入“國(guó)籍”（CSS3新屬性），或者允許魔法師使用某些新技能（CSS新的屬性值），以及是否舍棄某些舊的魔法技能（如display:run-in）。
操作系統(tǒng)是各個(gè)魔法石所在的世界，不同的操作系統(tǒng)代表不同的平行世界，所以CSS世界有這么幾個(gè)比較大的平行世界，即Windows世界、OS X世界以及移動(dòng)端的iOS世界和Android世界。
不同世界的瀏覽器王國(guó)的命運(yùn)還不一樣，例如，在OS X世界中，IE王國(guó)是不存在的，而Safari王國(guó)卻異常強(qiáng)大，但在Windows世界中，Safari王國(guó)卻異常落寞。
以上這一切就構(gòu)成了完整的CSS世界的“世界觀”。
作為討厭寫(xiě)CSS的前端工程師，盡管看著這樣的魔法世界會(huì)感到很神奇，但無(wú)奈自己就像是個(gè)“麻瓜”一樣無(wú)法融入這龐大的魔法世界，從而感到異常的憤怒。
但是，既然CSS是個(gè)“魔法世界”，那么就要用“魔法”來(lái)打敗“魔法”！
就像張?chǎng)涡窭蠋熯@樣講CSS世界體系的教學(xué)方法，可以培養(yǎng)大家從宏觀層面認(rèn)識(shí)與理解CSS的習(xí)慣，并且也方便大家更加深刻地記憶這些看似枯燥的代碼。
張?chǎng)涡窭蠋熢趶氖翴T行業(yè)的十多年時(shí)間里，參與過(guò)大量的Web前端開(kāi)發(fā)項(xiàng)目，也正是憑著這些經(jīng)歷所帶來(lái)的深刻思考和獨(dú)特洞見(jiàn)，他創(chuàng)作了蘊(yùn)含大量從實(shí)際項(xiàng)目開(kāi)發(fā)角度出發(fā)的“CSS三部曲”。
在談到所創(chuàng)作的這三部曲時(shí)，他建議先閱讀《CSS世界》，這是整個(gè)CSS世界的基礎(chǔ)，《CSS新世界》是在《CSS世界》基礎(chǔ)上構(gòu)建的高樓，而《CSS選擇器世界》是整棟大樓的鋼筋骨架，所以，建議《CSS選擇器世界》在《CSS新世界》之前閱讀，或者同時(shí)閱讀。
探索一條看似和其他編程語(yǔ)言不同的曲徑之路是艱辛的。張?chǎng)涡窭蠋熖寡裕苍羞^(guò)彷徨，有過(guò)猶豫，甚至考慮過(guò)其他更對(duì)自己有價(jià)值的領(lǐng)域，但他還是決定堅(jiān)守本心，記錄下了探索之路上的每個(gè)角落，他“相信技術(shù)的價(jià)值，技術(shù)強(qiáng)悍事業(yè)必然有成”
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
