0基礎童鞋快速開始學習前端開發

0基礎童鞋怎樣開始學習前端開發?

初識前端

1、前端開發簡介

2、前端開發如何入手學習？

3、前端入門學習建議

4、對初學者的建議

5、小結

一.前端開發簡介

形成：從簡單網頁製作演變至功能強大的前端開發。
早期的網頁設計製作主要內容都是靜態死的頁面，以文字圖片為主，使用者使用網站也以瀏覽為主。隨著網際網路的發展，現代網頁佈局更佳美觀，互動效果顯著，使用者體驗超棒，功能更加強大。
因此現在的前端開發的主要技術通常是指html、css、js技術和前端幾大框架的使用。

二.前端開發如何入手學習？

這裡針對於不是本專業（網頁設計等）的童鞋
一是報班學習，效果好且能得到系統性的學習，但價格比較貴對時間要求高，不是所有童鞋都能拿得出那麼多時間和金錢去學習的。
二是自學和觀看免費視訊學習，經濟實惠但缺點是缺少指導缺少方向，導致學習的內容雜亂無章更可能花費的時間學了無用的內容，如果沒有出眾的意志力規劃力是很難學下去的。
三是報名線上收費課程，優點是價格相對便宜，通常有一個集體可以探討問題，有老師指導方向的話，效果要比自學好很多，也會清楚更多些。
具體各位童鞋自行考量。

三、前端入門學習建議
1.先明確前端三個概念：
①.HTML是內容層，展示頁面內容。它的目的是表示一個HTML標籤在頁面裡是個什麼角色。
②.CSS是樣式層，它的目的是表示一塊內容以什麼樣的樣式（字型、大小、顏色、寬高等）顯示，為HTML做化妝打扮的。
③.JS是行為層，它要做的是當使用者觸發某些行為時，會給內容和樣式帶來什麼樣的改變。
建議：入門的可以先從較為系統的技術學習網站開始學習。
2.學習工具
前端的入門門檻極低，體現在 HTML 和 CSS 上。執行環境瀏覽器即可，推薦 Chrome，易於偵錯。編輯器直接用 VSCode 吧，超級好用的，當然有些外掛需要自己上百度查區別進行按需下載。
3.前端的基礎：
JavaScript，HTML+CSS，HTML5+CSS3，ES5，ES6，ES7，jQuery，bootstrap，nodejs，mySql，ajax。
這裡建議先學習js,html,css,可以自行選擇觀看線上視訊，選擇高品質的，後續學習 es5 / es6 / es7 / jQuery / bootstrap / nodejs / mysql / ajax。時間更多的可以學習 less / scss,它兩都屬於都屬於 CSS 前處理器的範疇，也就是 CSS 的超集。
jQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器。
其中nodejs可以與express或者koa2框架進行搭建前後端分離的後端伺服器端，可以接受前端發來的請求並進行做處理後返回結果給前端。這樣可以更好地理解前後端分離方式。
mySql就是一個資料庫，儲存資料的地方，當然你也可以選擇其他資料庫。
4.前端的幾大框架和工具：
前端三大js框架(vue / Angular / React)，前端專案打包工具webpack，gulp等，版本控制工具svn / git，還有微信小程式,至於多端框架方面可以先不進行學習。
前端框架從以前常用的jQuery、Bootstrap等框架，發展成現在的Vue、React、Angular三大框架局面，都是比較成熟的框架，也都有相對成熟的周邊UI元件庫。下面逐個介紹：
Vue是一個輕量級的框架，通過進行雙向資料的繫結來驅動介面，擁有豐富的指令和元件化。Vue框架上手很快且易學，因為它的官方檔案介紹的非常清楚，開發Vue的也是中國人，所以檔案方面易閱讀，而且能夠非常快速的通過非同步批次處理的方式更新DOM，可以把解耦的、可複用的元件組合在一起使用，還可以允許多種模組的安裝，使用的場景很靈活。

Angular是一款很優秀的前端js框架，已經被Google的多款產品採用。它擁有良好的應用程式，模板的功能很強大，自帶豐富的angular指令，擁有雙向資料繫結，可以通過指令擴寬HTML。 angular 入門很容易 但深入後概念很多, 學習中較難理解，需多加學習，多看檔案。

React，由facebook推出，正式版推出是在2013年。React 擁有較高的效能，程式碼邏輯非常簡單。擁有 速度快，跨瀏覽器相容， 模組化，單向資料流Flux，同構、純粹的javascript，相容性好等特點。
react推崇的是JSX語法，在學習react之前還要去了解JSX語法
vue與之不同的是語法更友好，搭配前端模組化，大的小的都能hold住，less等等的也都可以使用

五.小結
第一學習前端的基礎，例如HTML需要花費時間來記憶，摸清每個標籤的使用場景，最好的記憶就是寫，一定要寫，寫，寫！重要的事說三遍！
對於不知道寫什麼的童鞋，這裡建議你可以模仿各大電商網站，比如淘寶網，去實現它的介面效果，先寫靜態頁面和一點點互動功能，後面再拓展。
第二先把前端基礎的弄會了再上手前端主流框架的，不然就叫盲目學習了，至於前端工程化模組化等其他高階知識點後續再說
第三框架都學都看看，別害怕。花費一天的時間可以快速瞭解三大框架你更易於哪一種上手更快更高效。
需求出活塊就直接學Vue.js,其他兩個可以日後進行學習。