近幾年Web前端框架層出不窮，比如 React, Vue, AngulaJS等吸引了大量的註意力，前端技術發展勢頭迅猛，各大互聯網公司也越來越重視前端開發，前端開發再也不是過去那種按照設計圖做靜態網頁，再隨便寫點jQuery的職位了。現在，市場上對於前端開發的需求越來越大，我們經常聽說前端開發入門難度低，但學習前端開發究竟需要多長時間呢？學多長時間就能找到工作賺到錢？結合了周邊同事和自身的經驗來談談學習網頁開發到底需要花多長時間。

Note：一定要下定決心，並且要堅持。

1. 網頁設計的基本概念和理論知識（10天）

在學習制作網頁之前，必須掌握網頁設計的基本概念和理論知識。什麽是靜態網頁？什麽是動態網頁？網頁的整體布局是什麽？網頁設計的原則是什麽？網頁基本構成要素是哪些？基礎的網頁設計概念都不了解，那麽對於之後要制作網頁更是難上加難。我認為利用10天時間了解網頁設計的基本概念和理論是必不可少的，時代在不斷變化，網頁設計也會更新換代。所以了解基礎知識是為了之後設計制作打好基礎。當然，還需要了解基礎的SEO知識。網上的視頻教程個人建議還是少看，一本好的書絕對讓你受益匪淺。推薦幾本好書供大家學習：

制作網頁設計

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是最簡單的，只是標簽語言， 格式規範; CSS相對來說復雜一些, 有瀏覽器的兼容問題等。但二者組合就能實現很多頁面效果, 裏面涉及的變化太多了。如果你只會基礎語法, 而沒有實際去寫過, 那樣是很難真正掌握的。我在這裏說說我的經驗吧，我一開始學習的Bootstrap，簡單點說，就是給現有電商項目套上Bootstrap做的響應式皮膚。Bootstrap確實挺好上手，靠著官網的手冊，基本上遇到的問題都能自己解決。

JavaScript 也沒有那麽難，你要知道Brendan Eich創建JavaScript語言一共就用了10天時間，所以它的語法並不復雜，相信你很快就能掌握基本語法。你可能還需要學習一些常見的庫的API，這個可以根據你的需求來安排，你要用到什麽庫，就學習它的文檔。

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

3. 開始制作網站（1個月）

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

建站的時間取決你自己對網站完成的滿意度，如果參考模板， 那麽幾個小時內就可以搞定了；如果是要獨立開發一個新的網站又要內容全面好看，1個月是跑不掉的，甚至需要更長時間。

4. 工具軟件學習（半個月）

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

編輯器：Sublime Text

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

設計出圖、切片：Photoshop

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

原型設計：Mockplus（時間成本最低）

是一款上手非常簡單的網頁原型設計工具，通過拖拽就你完成一個簡單的交互，項目類型諸多，有自由項目，網頁項目，自定義項目，當然還有APP項目。網頁項目最大的尺寸為3000*6000，你可以任意設計都沒問題。200個封裝組件和3000個圖標可供使用，最近新出的格子功能更是方便使用，減少了很多重復設計的時間。

掌握一些原型設計知識絕對非常有必要，這是我投入最少卻收益最多的事情之一，我強烈建議你嘗試一下Mockplus，對之後在團隊工作的溝通會非常有幫助。

5. 學習設計知識（持續）

前端開發是一個直接面向用戶的職位，跟後端開發不一樣，你的成果是用戶直接可以看到的，我認為提高自己的審美，多掌握一些設計方面的知識，把握當下流行趨勢和動向也是很有必要的。而這一過程是不能用具體時間來衡量的，需要不斷持續吸收新的東西才能設計出理想的網站。這裏有15個最好的網頁設計博客資源可供大家每日閱讀，我個人還是最喜歡medium。UI設計資源網站相信大家都了解了，dribbble和behance等都是每日必逛，必定是受益良多。

總結：

軟件開發是一個需要持續學習的過程，盡管前端開發入門難度低，但是近幾年來前端開發的復雜度越來越高，對個人素質的要求也越來越高。本文只是針對想要入門前端開發而找不到方向的人，經過這個過程後，你可以找到一個初級的開發職位了。不論做什麽事情，學習是根本，希望這篇文章能幫助到新手。

新手篇——學習網頁開發需要多長時間就能找到工作