現(xiàn)在是移動互聯(lián)網(wǎng)快速發(fā)展的時期，漸漸不少人查看網(wǎng)頁的習(xí)慣也在做者改變。不小年輕人現(xiàn)在很喜歡通過手機訪問不同的網(wǎng)站，因此企業(yè)開發(fā)手機網(wǎng)站也成為其搶占移動端的發(fā)嘛。手機網(wǎng)站開發(fā)技術(shù)的不斷成熟，讓開發(fā)網(wǎng)站變得不在困難，一般企業(yè)手機網(wǎng)站開發(fā)都需要幾個重要部分組成。

一、手機網(wǎng)站開發(fā)的主題確認

對于企業(yè)開發(fā)網(wǎng)站來說第一步就是確立好網(wǎng)站的主題，這也是建立手機網(wǎng)站的關(guān)鍵。建立網(wǎng)站的主題主要反映了開發(fā)網(wǎng)站的目的，同時為網(wǎng)站內(nèi)容的整體連續(xù)性提供給的依據(jù)。在確立了網(wǎng)站的主題后，之后填充網(wǎng)站內(nèi)容寫作就變得比較容易了，手機網(wǎng)站的主題設(shè)立的信息貫穿整個網(wǎng)站。當然企業(yè)在確定開發(fā)手機網(wǎng)站時就應(yīng)該對整個網(wǎng)站的開發(fā)發(fā)展提供一個全面的計劃。

二、開發(fā)手機網(wǎng)站的內(nèi)容建設(shè)

在確定手機網(wǎng)站的主題后，接下來的工作就是建設(shè)網(wǎng)站的內(nèi)容。網(wǎng)站內(nèi)容的建設(shè)在具備親和力的條件下，還需要與確認的主題契合。手機網(wǎng)站的建設(shè)除了對企業(yè)本身有宣傳作用、展示產(chǎn)品，更重要的還是為企業(yè)帶來利潤，通過網(wǎng)站讓更多客戶了解企業(yè)與企業(yè)達成合作。

三、手機網(wǎng)站設(shè)計

在完成內(nèi)容的填充后，接下來需要完成的就是網(wǎng)頁的設(shè)計了。網(wǎng)頁的設(shè)計也是非常重要的，現(xiàn)在各類不同的手機網(wǎng)站眾多，如果想要得到客戶的訪問，好看的設(shè)計無疑是可以為網(wǎng)站增色不少。人是視覺動物，對好看的東西都會忍不住多看幾眼，而對手機網(wǎng)站來說也是，如果企業(yè)的網(wǎng)站內(nèi)容豐富但網(wǎng)頁設(shè)計很丑，客戶也很難多看幾眼你的網(wǎng)站。

網(wǎng)站的設(shè)計主要體現(xiàn)在網(wǎng)站結(jié)構(gòu)、色調(diào)、欄目等，而設(shè)計問題在網(wǎng)站制作中是普遍存在的。版式設(shè)計也基本都是那些模板，網(wǎng)站不會利用企業(yè)的特點進行裝飾，網(wǎng)站的設(shè)計需要有個性，因此企業(yè)在對待網(wǎng)站設(shè)計工作時需要非常仔細，選擇一家有資質(zhì)的設(shè)計公司為企業(yè)設(shè)計富有企業(yè)特色的手機網(wǎng)站設(shè)計。

四、手機網(wǎng)站開發(fā)問題

完成設(shè)計后，到了對手機網(wǎng)站進行審查的階段。在提交網(wǎng)站方案時需要對作對比，慎重的審查網(wǎng)站開發(fā)設(shè)計方案。對于網(wǎng)站建設(shè)來說，實際并不是一個簡單的工作，如何從企業(yè)的角度出發(fā)進行規(guī)劃、營造一個實用的網(wǎng)站，需要與專業(yè)的開發(fā)這進行考論，經(jīng)過深思熟慮后作出終的決定。

好的手機網(wǎng)站開發(fā)有利益提高企業(yè)的形象，樹立口碑，提高企業(yè)的收益。但同時開發(fā)不善的手機網(wǎng)站也會對企業(yè)造成負面影響，因此企業(yè)在開發(fā)網(wǎng)站時需要了解其步驟，然后經(jīng)過深思熟慮后作出決定。

BY：深圳尚網(wǎng)科技有限公司 https://itnoo/

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

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

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

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

制作網(wǎng)頁設(shè)計

1. HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETT

如何讓網(wǎng)頁設(shè)計更加功能化

2. JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETT

前端開發(fā)

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相對來說復(fù)雜一些, 有瀏覽器的兼容問題等。但二者組合就能實現(xiàn)很多頁面效果, 里面涉及的變化太多了。如果你只會基礎(chǔ)語法, 而沒有實際去寫過, 那樣是很難真正掌握的。我在這里說說我的經(jīng)驗吧，我一開始學(xué)習(xí)的Bootstrap，簡單點說，就是給現(xiàn)有電商項目套上Bootstrap做的響應(yīng)式皮膚。Bootstrap確實挺好上手，靠著官網(wǎng)的手冊，基本上遇到的問題都能自己解決。

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

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

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

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

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

4. 工具軟件學(xué)習(xí)（半個月）

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

編輯器：Sublime Text

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

設(shè)計出圖、切片：Photoshop

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

原型設(shè)計：Mockplus（時間成本最低）

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

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

5. 學(xué)習(xí)設(shè)計知識（持續(xù)）

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

總結(jié)：

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

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

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

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

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

制作網(wǎng)頁設(shè)計

1. HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETT

如何讓網(wǎng)頁設(shè)計更加功能化

2. JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETT

前端開發(fā)

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相對來說復(fù)雜一些, 有瀏覽器的兼容問題等。但二者組合就能實現(xiàn)很多頁面效果, 里面涉及的變化太多了。如果你只會基礎(chǔ)語法, 而沒有實際去寫過, 那樣是很難真正掌握的。我在這里說說我的經(jīng)驗吧，我一開始學(xué)習(xí)的Bootstrap，簡單點說，就是給現(xiàn)有電商項目套上Bootstrap做的響應(yīng)式皮膚。Bootstrap確實挺好上手，靠著官網(wǎng)的手冊，基本上遇到的問題都能自己解決。

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

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

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

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

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

4. 工具軟件學(xué)習(xí)（半個月）

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

編輯器：Sublime Text

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

設(shè)計出圖、切片：Photoshop

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

原型設(shè)計：Mockplus（時間成本最低）

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

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

5. 學(xué)習(xí)設(shè)計知識（持續(xù)）

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

總結(jié)：

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