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