第一篇：2017年web前端開發(fā)學(xué)習(xí)路線規(guī)劃小結(jié)
2017年web前端開發(fā)學(xué)習(xí)路線規(guī)劃小結(jié)
文章出自：易萊勝
官網(wǎng)：易萊勝
第一階段——HTML
我們發(fā)現(xiàn)無論是靜態(tài)網(wǎng)頁還是動態(tài)網(wǎng)頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶。因此，我們必須掌握HTML的基本結(jié)構(gòu)和常用標(biāo)記及屬性。
第二個階段——CSS CSS叫做層疊樣式表。是能夠讓網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式。同時CSS中的盒子模型、相對定位、絕對定位、固定定位，浮動等能夠?qū)崿F(xiàn)對網(wǎng)頁中的內(nèi)容位置驚醒精確的控制。第三個階段——JavaScript JavaScript 是屬于網(wǎng)絡(luò)的腳本語言！被數(shù)百萬計的網(wǎng)頁用來改進設(shè)計、驗證表單、檢測瀏覽器、創(chuàng)建cookies，以及更多的應(yīng)用，并且這門語言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機等設(shè)備。
第四個階段——jQUery jQuery 是一個 JavaScript 庫。極大地簡化了 JavaScript 編程。不僅如此現(xiàn)在也有很多的jQuery的插件可供選擇，這樣就有利于我們編寫靜態(tài)與動態(tài)相結(jié)合的網(wǎng)頁了。
第五個階段——Bootstrap Bootstrap是前端開發(fā)中另外一個框架，是用來制作響應(yīng)式布局頁面的。在項目開發(fā)過程中，我們可以借助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面布局和樣式設(shè)置。
第六個階段——前端其他框架的學(xué)習(xí)
Angular，node，vue，require，backbone........前端框架，如果你想在前端這個方向想得到更多的發(fā)展，建議你利用業(yè)余時間再多學(xué)點其他框架的知識。
第二篇：最新web前端學(xué)習(xí)路線
最新web前端的學(xué)習(xí)路線
程序設(shè)計之道無遠弗屆，御晨風(fēng)而返?！?杰佛瑞 · 詹姆士 很多前端初學(xué)者總會問以下兩個問題： 第一種一直在問：如何學(xué)習(xí)前端？
第二種總說：前端很簡單，就那么一點東西。
我從沒有聽到有人問：如何做一名優(yōu)秀、甚至卓越的WEB前端工程師。詳細了解成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？ 何為前端工程師
前端工程師，也叫Web前端開發(fā)工程師。他是隨著web發(fā)展，細分出來的行業(yè)。Web前端開發(fā)技術(shù)主要包括三個要素：HTML、CSS和JavaScript!
HTML 甚至不是一門語言，他僅僅是簡單的標(biāo)記語言!
CSS 只是無類型的樣式修飾語言。當(dāng)然可以勉強算作弱類型語言。
Javascript 的基礎(chǔ)部分相對來說不難，入手還算快。
此篇文章中就HTML、CSS、JS都有哪些區(qū)別？進行了全面的解讀！
前端開發(fā)的入門門檻其實很低，與服務(wù)器端語言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。也正因為如此，前端開發(fā)領(lǐng)域有很多自學(xué)成“才”的同行，但大多數(shù)人都停留在會用的階段，因為后面的學(xué)習(xí)曲線越來越陡峭，每前進一步都很難。
現(xiàn)在市場很需要優(yōu)秀的、高級的前端工程師。
一方面是因為這是一個比較新的細分行業(yè)，而且前端程序員大都自學(xué)一部分，知識結(jié)構(gòu)不系統(tǒng);另一方面，大學(xué)里面沒有這種課程，可以加入web前端學(xué)習(xí)君羊：前面數(shù)字是五一四，中間數(shù)字是一六七，后面三位數(shù)字是六七八，將數(shù)字串聯(lián)起來，了解學(xué)習(xí)更多在學(xué)校學(xué)不到的技術(shù)干貨。如何學(xué)習(xí)前端知識
我們生活在一個充滿規(guī)則的宇宙里面。社會秩序按照規(guī)則運行，計算機語言幾乎全部是規(guī)則的集合。計算機前輩們定義規(guī)則，規(guī)則約束我們，我們用規(guī)則控制數(shù)據(jù)。大部分時候，對數(shù)據(jù)的合理控制，來自于你對規(guī)則的掌握。
學(xué)習(xí)HTML，CSS 應(yīng)該先跟著書仔細、扎實的學(xué)一遍。然后就需要做大量的練習(xí)，做各種常規(guī)的、奇怪的、大量的布局練習(xí)來捆固、理解自己的知識。
而學(xué)習(xí)Javascript 首先要知道這門語言可以做什么，不能做什么，擅長做什么，不擅長做什么!
如果你只想當(dāng)一個普通的前端程序員，你只需要記住大部分 Javascript 函數(shù)，做一些練習(xí)就可以了。
如果你想當(dāng)深入了解Javascript，你需要了解 Javascript 的原理、機制。需要知道他們的本源，需要深刻了解 Javascript 基于對象的本質(zhì)。
還需要深刻了解瀏覽器宿主下的 Javascript 的行為、特性。
初學(xué)者全面了解JavaScript，用心讀這篇文章 掌握六大JavaScript框架，薪水就是比同級別高！
作為一個優(yōu)秀的前端工程師還需要深入了解、以及學(xué)會處理 Javascript 的這些缺陷。
優(yōu)秀的前端工程師應(yīng)具備什么條件
首先，優(yōu)秀的Web前端開發(fā)工程師要在知識體系上既要有廣度和深度!做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發(fā)工程師。技術(shù)非黑即白，只有對和錯，而技巧則見仁見智。
在以前，會一點Photoshop和Dreamweaver的操作，就可以制作網(wǎng)頁。成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？
現(xiàn)在，只掌握這些已經(jīng)遠遠不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。
Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。
優(yōu)秀的Web前端開發(fā)工程師應(yīng)該具備快速學(xué)習(xí)能力
Web發(fā)展的很快，甚至可以說這些技術(shù)幾乎每天都在變化!如果沒有快速學(xué)習(xí)能力，就跟不上 Web發(fā)展的步伐。前端工程師必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)、新模式;僅僅依靠今天的知識無法適應(yīng)未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化。
說到這里，我想起了一個大師說過的一句話：對于新手來說，新技術(shù)就是新技術(shù)。
對于一個高手來說，新技術(shù)不過是就技術(shù)的延伸。優(yōu)秀的前端工程師需要具備良好的溝通能力
因為前端工程師至少都要滿足四類客戶的需求：
1、產(chǎn)品經(jīng)理。這些是負責(zé)策劃應(yīng)用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現(xiàn)的應(yīng)用。一般來說，產(chǎn)品經(jīng)理都追求豐富的功能。
2、UI設(shè)計師。這些人負責(zé)應(yīng)用程序的視覺設(shè)計和交互模擬。他們關(guān)心的是用戶對什么敏感、交互的一貫性以及整體的好用性。一般來說，UI設(shè)計師于流暢靚麗、但并不容易實現(xiàn)的用戶界面，而且他們經(jīng)常不滿前端工程師造成 1px 的誤差。
3、項目經(jīng)理。這些人負責(zé)實際地運行和維護應(yīng)用程序。項目管理的主要關(guān)注點，無外乎正常運行時間、應(yīng)用程序始終正?？捎玫臅r間、性能和截止日期。項目經(jīng)理追求的目標(biāo)往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。
4、最終用戶。指的是應(yīng)用程序的主要消費者。盡管前端工程師不會經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產(chǎn)品所具備的功能。總結(jié)
要做優(yōu)秀的前端工程師，還需要繼續(xù)努力：《高性能網(wǎng)站建設(shè)指南》、《Yahoo工程師的網(wǎng)站性能優(yōu)化的建議》、“YSLOW”性能優(yōu)化建議、《網(wǎng)站重構(gòu)》、《Web開發(fā)敏捷之道》、“ jQuery 庫”、“前端框架”、“HTML5”、“CSS3” 這些都要深入研究!
萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。
人們常說：不想當(dāng)裁縫的司機，不是個好廚師。
在成為一個優(yōu)秀的前端工程師的道路上，充滿了汗水和辛勞，如果你對前端開發(fā)有更多的見解以及不同的意見，歡迎留言將您的見解分享給所有web前端開發(fā)愛好者。
程序設(shè)計之道無遠弗屆，御晨風(fēng)而返?！?杰佛瑞 · 詹姆士 現(xiàn)在互聯(lián)網(wǎng)的大環(huán)境的發(fā)展如日中天，網(wǎng)絡(luò)已經(jīng)深入到每個人生活的的各個方面，各種項目層出不窮，以及各種定制化的ui風(fēng)格神馬的，PC端、手機端、mobile端，各種兼容問題真的很浪費時間，大家在不斷的摸索中發(fā)現(xiàn)，把html+css+js這部分工作獨立出來一個新的崗位來處理。發(fā)展前景我是看好的，對于一個技術(shù)行業(yè)，我認為首先如何提升自己的個人能力是保持行業(yè)發(fā)展的源動力。沒有真是過硬的技術(shù)，前景發(fā)展都是免談。
那么很多情況又是這樣： 第一種一直在問：如何學(xué)習(xí)前端？
第二種總說：前端很簡單，就那么一點東西。
我從沒有聽到有人問：如何做一名優(yōu)秀、甚至卓越的WEB前端工程師。詳細了解成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？ 何為前端工程師
前端工程師，也叫Web前端開發(fā)工程師。他是隨著web發(fā)展，細分出來的行業(yè)。Web前端開發(fā)技術(shù)主要包括三個要素：HTML、CSS和JavaScript!
HTML 甚至不是一門語言，他僅僅是簡單的標(biāo)記語言!
CSS 只是無類型的樣式修飾語言。當(dāng)然可以勉強算作弱類型語言。
Javascript 的基礎(chǔ)部分相對來說不難，入手還算快。此篇文章中就HTML、CSS、JS都有哪些區(qū)別？進行了全面的解讀！
前端開發(fā)的入門門檻其實很低，與服務(wù)器端語言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。也正因為如此，前端開發(fā)領(lǐng)域有很多自學(xué)成“才”的同行，但大多數(shù)人都停留在會用的階段，因為后面的學(xué)習(xí)曲線越來越陡峭，每前進一步都很難。
現(xiàn)在市場很需要優(yōu)秀的、高級的前端工程師。
一方面是因為這是一個比較新的細分行業(yè)，而且前端程序員大都自學(xué)一部分，知識結(jié)構(gòu)不系統(tǒng);另一方面，大學(xué)里面沒有這種課程，可以加入web前端學(xué)習(xí)君羊：前面數(shù)字是五一四，中間數(shù)字是一六七，后面三位數(shù)字是六七八，將數(shù)字串聯(lián)起來，了解學(xué)習(xí)更多在學(xué)校學(xué)不到的技術(shù)干貨。
如何學(xué)習(xí)前端知識
我們生活在一個充滿規(guī)則的宇宙里面。社會秩序按照規(guī)則運行，計算機語言幾乎全部是規(guī)則的集合。計算機前輩們定義規(guī)則，規(guī)則約束我們，我們用規(guī)則控制數(shù)據(jù)。大部分時候，對數(shù)據(jù)的合理控制，來自于你對規(guī)則的掌握。
學(xué)習(xí)HTML，CSS 應(yīng)該先跟著書仔細、扎實的學(xué)一遍。然后就需要做大量的練習(xí)，做各種常規(guī)的、奇怪的、大量的布局練習(xí)來捆固、理解自己的知識。
而學(xué)習(xí)Javascript 首先要知道這門語言可以做什么，不能做什么，擅長做什么，不擅長做什么!
如果你只想當(dāng)一個普通的前端程序員，你只需要記住大部分 Javascript 函數(shù)，做一些練習(xí)就可以了。
如果你想當(dāng)深入了解Javascript，你需要了解 Javascript 的原理、機制。需要知道他們的本源，需要深刻了解 Javascript 基于對象的本質(zhì)。
還需要深刻了解瀏覽器宿主下的 Javascript 的行為、特性。初學(xué)者全面了解JavaScript，用心讀這篇文章 掌握六大JavaScript框架，薪水就是比同級別高！
作為一個優(yōu)秀的前端工程師還需要深入了解、以及學(xué)會處理 Javascript 的這些缺陷。
優(yōu)秀的前端工程師應(yīng)具備什么條件
首先，優(yōu)秀的Web前端開發(fā)工程師要在知識體系上既要有廣度和深度!做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發(fā)工程師。技術(shù)非黑即白，只有對和錯，而技巧則見仁見智。
在以前，會一點Photoshop和Dreamweaver的操作，就可以制作網(wǎng)頁。成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？
現(xiàn)在，只掌握這些已經(jīng)遠遠不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。
Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。
優(yōu)秀的Web前端開發(fā)工程師應(yīng)該具備快速學(xué)習(xí)能力
Web發(fā)展的很快，甚至可以說這些技術(shù)幾乎每天都在變化!如果沒有快速學(xué)習(xí)能力，就跟不上 Web發(fā)展的步伐。前端工程師必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)、新模式;僅僅依靠今天的知識無法適應(yīng)未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化。
說到這里，我想起了一個大師說過的一句話：對于新手來說，新技術(shù)就是新技術(shù)。
對于一個高手來說，新技術(shù)不過是就技術(shù)的延伸。優(yōu)秀的前端工程師需要具備良好的溝通能力 因為前端工程師至少都要滿足四類客戶的需求：
1、產(chǎn)品經(jīng)理。這些是負責(zé)策劃應(yīng)用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現(xiàn)的應(yīng)用。一般來說，產(chǎn)品經(jīng)理都追求豐富的功能。
2、UI設(shè)計師。這些人負責(zé)應(yīng)用程序的視覺設(shè)計和交互模擬。他們關(guān)心的是用戶對什么敏感、交互的一貫性以及整體的好用性。一般來說，UI設(shè)計師于流暢靚麗、但并不容易實現(xiàn)的用戶界面，而且他們經(jīng)常不滿前端工程師造成 1px 的誤差。
3、項目經(jīng)理。這些人負責(zé)實際地運行和維護應(yīng)用程序。項目管理的主要關(guān)注點，無外乎正常運行時間、應(yīng)用程序始終正?？捎玫臅r間、性能和截止日期。項目經(jīng)理追求的目標(biāo)往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。
4、最終用戶。指的是應(yīng)用程序的主要消費者。盡管前端工程師不會經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產(chǎn)品所具備的功能。
總結(jié)
要做優(yōu)秀的前端工程師，還需要繼續(xù)努力：《高性能網(wǎng)站建設(shè)指南》、《Yahoo工程師的網(wǎng)站性能優(yōu)化的建議》、“YSLOW”性能優(yōu)化建議、《網(wǎng)站重構(gòu)》、《Web開發(fā)敏捷之道》、“ jQuery 庫”、“前端框架”、“HTML5”、“CSS3” 這些都要深入研究!
萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。
人們常說：不想當(dāng)裁縫的司機，不是個好廚師。
在成為一個優(yōu)秀的前端工程師的道路上，充滿了汗水和辛勞。
第三篇：WEB前端開發(fā)經(jīng)驗總結(jié)
ASP.NET前端開發(fā)經(jīng)驗總結(jié)
通過此次大作業(yè)的設(shè)計到完成，我負責(zé)的是web前端的開發(fā)，經(jīng)過此次作業(yè)和結(jié)合W3C上的自學(xué)，我漸漸有了一些對前端開發(fā)的小小經(jīng)驗（僅為個人意見）。WEB標(biāo)準(zhǔn)是什么？
說是WEB標(biāo)準(zhǔn)，不過我這里主要是對HTML5 和 CSS3.0的一些經(jīng)驗總結(jié)。因為WEB含蓋的內(nèi)容實在是太多了，“WEB標(biāo)準(zhǔn)”是一系列標(biāo)準(zhǔn)的總稱，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以這里要跟大家指出來一下，WEB標(biāo)準(zhǔn)不是我們所說的DIV+CSS。剛剛上面提到了――DIV+CSS，這里要說明下，這樣說其實是不正確的。DIV+CSS準(zhǔn)確的說法（個人的理解）應(yīng)該是：采用W3C推薦的WEB標(biāo)準(zhǔn)中的HTML5結(jié)合CSS3.0樣式表制作頁面的方法，DIV應(yīng)該指的是HTML標(biāo)簽，而CSS顯示是指的CSS樣式表了。
采用WEB標(biāo)準(zhǔn)開發(fā)的好處
那么W3C為什么會推薦這樣的頁面制作方法呢？下面我們就簡單的看看采用WEB標(biāo)準(zhǔn)開發(fā)（個人理解的）相對以前TABLE布局的優(yōu)勢有哪些？
1、節(jié)約運營成本
看看我們的WEB標(biāo)準(zhǔn)制作方法是如何做到的？
采用WEB標(biāo)準(zhǔn)制作，我們可以做到表現(xiàn)很形式的分離，我們用XHTML來表現(xiàn)（數(shù)據(jù)），用CSS來控制（頁面元素呈現(xiàn)的）形式。寫的好的頁面，XHTML代碼中基本上都是用戶要看的數(shù)據(jù)，還其他修飾性的東西，全部由我們的CSS來控制。這樣一來我們的（XHTML）頁面的體積就大大減小了，這樣你在帶寬上的費用就會大家降低了，這個怎么降低的，你可以想象一下，YAHOO的首頁小1K，100W個人一起訪問，那么帶寬節(jié)約了多少？而且可以更充分的利用帶寬。
而我們的CSS控制了，所有的頁面元素的樣式，現(xiàn)在想改網(wǎng)站的整體風(fēng)格，你只需要花幾分鐘修改一下一個CSS文件，就可以輕松搞定了。維護的成本也下來了，省了不少錢了吧？還有，你開這個頁面的速度會快很多啊，一個讓你等半分鐘的頁面，除非里面的信息對你很有用，不然我們大家基本都沒有太多的時間去用來等待的。
2、對用戶友好更友好，且有機會獲得更多的用戶 現(xiàn)在來說說用戶友好。首先我想把我們的用戶來分下類。第一類：普通用戶（每個訪問我們網(wǎng)站的人）； 第二類：搜索引擎；
采用WEB標(biāo)準(zhǔn)開發(fā)的頁面，結(jié)構(gòu)清晰，頁面體積小，瀏覽器兼容性好。普通用戶訪問的時候，頁面打開速度快，而且不管用戶使用那種瀏覽器，都能夠正常訪問（顯示）頁面，且頁面的結(jié)構(gòu)清晰，要找的數(shù)據(jù)可以很方便的瀏覽到。
而對搜索引擎來說，一個好的采用WEB標(biāo)準(zhǔn)開發(fā)的頁面，都是做過SEO優(yōu)化的，它訪問起來很友好，很容易理解你的頁面中哪里是標(biāo)題（H1~H6標(biāo)簽），哪里是段落（p標(biāo)簽），哪里是段落里要強調(diào)的內(nèi)容（strong標(biāo)簽）等，它可以很容易的分析出來。而一個SEO好的站點，大家都知道，被搜索引擎收錄的機會更多，這個也意味著您的網(wǎng)站會被更多的普通用戶訪問到，給你的站點帶來更多的用戶。
一個能幫我們省下大筆費用，提高工作效率。同時又能夠提高頁面瀏覽速度，對用戶友好，甚至能夠不花錢宣傳，就能給你帶來更多用戶的技術(shù)。你說你會不會去使用它？這個也正式我們的W3C推薦使用WEB標(biāo)準(zhǔn)開放網(wǎng)站的原因啊。而這個技術(shù)也得到了我們廣大用戶的認可，所以現(xiàn)在需要學(xué)習(xí)WEB標(biāo)準(zhǔn)啊。合理的布局
前面我提到了一些知識點――“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、HTML代碼中基本上都是用戶要看的數(shù)據(jù)”。這些東西，都是我做了合理布局的結(jié)果。而且我個人覺得，我們采用WEB標(biāo)準(zhǔn)制作的一切都是從這個知識點開始的，所以我這里就先來說這個話題。
也許有人會問，怎樣的一個頁面，才算是合理的布局的呢？這個問題問題問得好，也是我們大家剛開始學(xué)用WEB標(biāo)準(zhǔn)的問得最多的問題之一，我也曾經(jīng)常被這個問題所困擾，這里就說說我對合理布局的一些理解。
在開始講合理布局的頁面要達到的要素前，我們還是用個實例來講解會更直觀些。先來看看這個圖片：
不錯，這個是一個文章詳細頁，沒有左右兩欄布局，不過這里我重點要講的是合理的布局。
這是此次實驗中customer（前端的一項）部分的完整代碼：
<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“Customer.aspx.cs” Inherits=“Customer” %> <%@ Register Src=“Controllers/Bottom.ascx” TagName=“Bottom” TagPrefix=“uc4” %> <%@ Register Src=“Controllers/Top.ascx” TagName=“Top” TagPrefix=“uc1” %> <%@ Register Src=“Controllers/Left.ascx” TagName=“Left” TagPrefix=“uc2” %>
” name=“description”/> ” name=“keywords” />