近幾年Web前端框架層出不窮，好比 React， Vue， AngulaJS等吸引了大量的注意力，前端技術發(fā)展勢頭迅猛，各大互聯(lián)網(wǎng)公司也越來越重視前端開發(fā)，前端開發(fā)再也不是過去那種根據(jù)設計圖做靜態(tài)網(wǎng)頁，再隨便寫點jQuery的職位了?，F(xiàn)在，市場上對于前端開發(fā)的需求越來越大，我們經(jīng)常聽說前端開發(fā)入門難度低，但學習前端開發(fā)究竟需要多長時間呢?學多長時間就能找到工作賺到錢?結合了周邊同事和自身的經(jīng)驗來談談學習網(wǎng)頁開發(fā)到底需要花多長時間。

Note：必然要下定決心，而且要堅持。

1. 網(wǎng)頁設計的基本概念和理論知識(10天)

在學習制作網(wǎng)頁之前，必需掌握網(wǎng)頁設計的基本概念和理論知識。什么是靜態(tài)網(wǎng)頁?什么是動態(tài)網(wǎng)頁?網(wǎng)頁的整體布局是什么?網(wǎng)頁設計的原則是什么?網(wǎng)頁基本構成要素是哪些?基礎的網(wǎng)頁設計概念都不了解，那么對于之后要制作網(wǎng)頁更是難上加難。我認為利用 10 天時間了解網(wǎng)頁設計的基本概念和理論是必不成少的，時代在不停變革，網(wǎng)頁設計也會更新?lián)Q代。所以了解基礎知識是為了之后設計制作打好基礎。當然，還需要了解基礎的SEO知識。網(wǎng)上的視頻教程個人建議還是少看，一本好的書絕對讓你受益匪淺。保舉幾本好書供大家學習：

1. HTML AND CSS： DESIGN AND BUILD WEBSITES， BY JON DUCKETT

2. JAVASCRIPT AND JQUERY： INTERACTIVE FRONT-END WEB DEVELOPMENT， BY JON DUCKETT

3. LEARNING WEB DESIGN： A BEGINNER’S GUIDE TO HTML， CSS， JAVASCRIPT， AND WEB GRAPHICS， BY JENNIFER NIEDERST ROBBINS

4.DON’T MAKE ME THINK， REVISITED： A COMMON SENSE APPROACH TO WEB USABILITY， BY STEVE KRUG

2. CSS+HTML+JavaScript( 1 個月)

相對來說， HTML是最簡單的，只是標簽語言， 格式規(guī)范; CSS相對來說復雜一些， 有瀏覽器的兼容問題等。但二者組合就能實現(xiàn)很多頁面效果， 里面涉及的變革太多了。如果你只會基礎語法， 而沒有實際去寫過， 那樣是很難真正掌握的。我在這里說說我的經(jīng)驗吧，我一開始學習的Bootstrap，簡單點說，就是給現(xiàn)有電商項目套上Bootstrap做的響應式皮膚。Bootstrap確實挺好上手，靠著官網(wǎng)的手冊，基本上遇到的問題都能本身解決。

JavaScript 也沒有那么難，你要知道Brendan Eich創(chuàng)建JavaScript語言一共就用了 10 天時間，所以它的語法并不復雜，相信你很快就能掌握基本語法。你可能還需要學習一些常見的庫的API，這個可以按照你的需求來擺設，你要用到什么庫，就學習它的文檔。

我覺得最好的網(wǎng)頁開發(fā)學習資料就是 Mozilla Developer Network(https://developer.mozilla.org)的文檔了，涵蓋了HTML， CSS， JavaScript的方方面面，豈論是初學還是老手查閱都是非常有用的，保舉給大家。

3. 開始制作網(wǎng)站(1個月)

了解了基本的知識，做了一些小練習之后，我認為最重要的是盡早參與實際項目，這樣才能得到真正的熬煉。使用 Jekyll + GitHub Pages 為本身搭建一個靜態(tài)博客是一個很好的開始，只需要簡單的配置，不需要任何后臺開發(fā)，幾乎完全是前端開發(fā)。

建站的時間取決你本身對網(wǎng)站完成的滿意度，如果參考模板， 那么幾個小時內(nèi)就可以搞定了;如果是要獨立開發(fā)一個新的網(wǎng)站又要內(nèi)容全面好看，1個月是跑不掉的，甚至需要更長時間。

4. 工具軟件學習(半個月)

工具的掌握程度完全靠個人的領悟能力和學習，網(wǎng)上有很多關于以下這些工具的教學視頻，跟著學會事半功倍的。需要學習的基本軟件：

編纂器：Sublime Text

初學者我不建議立即使用強大的 IDE，先使用編纂器有利于學習。Sublime Text 是一款我個人非常喜歡的編纂器，界面優(yōu)雅，操作流暢，自動支持語法高亮，還有豐富的插件，你也可以試試。

設計出圖、切片：Photoshop

Adobe Photoshop，簡稱“PS”，是由Adobe開發(fā)和發(fā)行的圖像處理軟件，Photoshop主要處理以像素所構成的數(shù)字圖像，使用其眾多的編修與繪圖工具，可以有效地進行圖片編纂工作，PS有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。Photoshop非常專業(yè)，也稍顯復雜，是專業(yè)的平面圖片設計人員必需掌握的一款工具。作為前端開發(fā)，你需要跟設計師緊密配合，學習一些 PS 知識會對你之后的開發(fā)更有幫手。

原型設計：Mockplus(時間成本最低)

標簽：林芝 鹽城 九江 烏魯木齊 東營