快速入門前端開發，你只須要這4步

1. 創建工做環境

你能夠把你的工做環境看做是辦公室的延伸。它就像一個虛擬的桌子，裏面有各類各樣的工具，可讓你的代碼運行起來。

如下是新手必備

代碼編輯器:代碼編輯器，如Sublime Text、Brackets和notepad++，相似於普通的舊式紙質筆記本，你能夠輸入任何你想要的東西。

理論上，可使用常規的文本編輯器，如notepad (Windows)或TextEdit (OS X)，可是一 些代碼編輯器的代碼着色、自動完成和實時預覽等特性可使編碼更容易、更具交互性。

框架:框架是代碼、組件和樣式的集合，它們使生成web應用程序變得相對快速和容易。有像Bootstrap和Foundation這樣的CSS框架，也有像AngularJS和React這樣的JavaScript框架。

CSS框架本質上是預約義樣式和web組件(如導航條、頁腳、卡片、排版元素和網格)的庫。avaScript框架相似，但它們能夠知足特定於JavaScript的需求。稍後將進一步介紹CSS和JavaScript。

ResetCSS: ResetCSS就像Eric Meyer, HTML5 Docto和Yahoo!是一個包含一組標準化CSS樣式的文件，這些樣式被認爲是最佳實踐，併爲頁面提供了一致的外觀基準。一般由ResetCSS修改的樣式與行高、字體和標題大小、邊框間距、列表樣式等元素相關。

CMS：內容管理系統是一套複雜程度不一樣的套件，網站管理員能夠輕鬆地上載，修改和管理其網站上的內容/資產。隨着網站內容的增長，CMS會讓你的工做變得更加簡單

流行的CMS包括:WordPress、Joomla、Drupal、Magento和Shopify。後二者是很是適合於電子商務網站的CMSs。事實上，你能夠在Magento和Shopify的可用性比較中瞭解更多。

FTP客戶端:文件傳輸協議(FTPs)容許在的計算機和web服務器之間傳輸文件。當你探索web開發的世界時，毫無疑問，你須要向服務器傳輸大量的文件，從你的HTML、CSS和JS文件開始，到你的圖片、音樂或任何你但願提供給訪問者的東西結束。

一些流行的FTP客戶端有:CyberDuck, Filezilla和transmission。

瀏覽器:這彷佛是一個愚蠢的時刻，可是您對瀏覽器的選擇能夠決定你最終產品的不少方面。例如，Mozilla已經在其Firefox Developer Edition (FDE)瀏覽器中構建了一個優秀的開發套件。

Chrome、Firefox和Edge都內置了相似的工具(儘管不那麼健壯)。開發工具能夠幫助檢查在其餘站點上使用的代碼，調試代碼，編輯樣式，測試響應等等。

2.瞭解這些理論知識

響應式設計:web設計和開發中最熱門的話題之一是響應式web設計(RWD)，它指的是設置屏幕大小的路徑點，告訴頁面默認爲更適合給定大小的特定佈局。RWD的崛起源於停滯不前的網頁設計，它根植於沒法響應瀏覽器寬度變化的固定頁面佈局。新的實踐容許對可用性進行優化，這超出了使用固定設計模型能夠實現的範圍。

移動優先:移動優先是現代網頁設計的原則，與響應式網頁設計密切相關。Mobile first建議你應該先設計你的頁面的移動佈局，而後再設計每一個更大的格式。

從理論上講，經過遵循「 移動優先」的方法，可使移動用戶（佔總用戶數量很是大）的體驗更加友好。傳統上，隨着屏幕尺寸變小，網站會按功能和內容縮小規模。然而，隨着這些年來移動用戶數量的巨大增加，這已成爲全球設計師的主要關注點。

MVP：儘管它們在B2B中比在我的項目中更重要，可是MVP（最低可行產品）構建是必不可少的術語。MVP背後的想法是，你僅構建必需的功能，而避免了能夠爲第二個版本保存的功能。

做爲一個web開發新手，建議在學習的同時實施這個策略。經過構建您想要的最基本的版本，你將有機會探索核心概念和策略，而不會受到複雜功能。隨着你對開發、設計語言和其餘相關原則的逐漸熟悉，你可能會想避開MVP構建並探索新的信心。

3.開始使用這些語言

Web開發以三種核心語言爲根基，它們幾乎涵蓋了您在internet上看到和使用的全部內容。單獨使用時，HTML、CSS和JavaScript幾乎毫無用處。當彼此結合使用時，咱們能夠看到無限的可能。

HTML:做爲一種標記語言，HTML負責網頁上文本的流程和結構，並提供了一個系統，用於標記該文本，以便使用CSS進一步加強。

CSS:層疊樣式表負責描述和定義標記爲HTML的文本的視覺方面。使用CSS，你能夠定義顏色，大小，佈局，動畫等等。

JavaScript:這是目前最流行和發展最快的網絡語言之一。JavaScript主要用於向web元素添加交互性。這種可能性其實是無限的。

除此以外，可使用APICloud Studio 、AVM框架、Foundation，Bootstrap和Skeleton之類的框架來補充學習內容，這些框架爲你提供了預構建的模塊，供你隨意使用。

APICloud Studio是一個全流程的開發工具，基於業界領先的代碼編輯器-Vscode深度定製，能夠快速構建多端應用，面向Android、iOS、Web、App、小程序打造應用, 均可以快速編譯對應終端的代碼。能夠有效的解決開發者多端開發這個讓人頭疼的問題。

APICloud Studio試用地址

語法框架如今也不少，隨着對於前端開發工做的熟悉深刻，也會造成本身的一套理論體系

前面說到的AVM是一個跨端的高性能 JavaScript框架，更趨近於原生的編程體驗，它提供簡潔的模型來分離應用的用戶界面、業務邏輯和數據模型，比較適合高度定製化的項目。

AVM框架使用地址

4.開始你的工做

在開發過程當中:當您編寫組成web頁面的代碼時，您可能但願看到它的運行狀況，以便您可以看到哪些工做，哪些不工做，以及哪些能夠更好地執行。雖然能夠實時完成，但強烈建議使用本地服務器，由於這樣能夠將風險降到最低。

本地服務器是位於計算機上的一個軟件集合，它容許你查看和進行網頁交互，就像你在互聯網上同樣。

開發後:一旦完成(或大部分完成)站點，就能夠將其從本地服務器遷移到實際服務器上了。這意味着須要支付服務器費用，購買域名，並使用FTP客戶端將全部相關文件傳輸到服務器。一旦完成，世界上任何人均可以去你的網站，看到你的工做成果。

一些流行的託管站點是：WordPress、WIX、GoDaddy，BlueHost，InMotion和HostGator。你能夠在此處研究可用的域名，而後在此處購買。若是您想嘗試嶄新的事物，請查看Google Domains，它目前處於測試階段。