WEB前端開發快速入門教程

標籤：電腦語言   瀏覽器   chrome   基礎知識   原始碼   

目前web產品互動越來越複雜，使用者使用體驗和網站前端效能最佳化這些都得靠web前端工程師去做，web前端工程師是設計加開發的綜合體，web前端工程師是在開發人員中最直接面向產品，面向使用者的設計人員，一個Team Dev的成果是要靠web前端工程師去展現，因為使用者不會去關心背景處理有多麼強大 ；在設計人員中web前端工程師是直接面向開發人員的設計人員，向開發人員以一種電腦語言的方式傳遞其設計理念，web前端工程師在整個團隊中是很關鍵的。

所以一名合格的web前端工程師必須得掌握HTML、CSS和JavaScript。只懂其中一個或兩個還不行，你必須對這三門語言都很熟悉。也不是說必須對這三門語言都非常精通，但你至少要能夠運用它們完成大多數任務，而無需地頻繁地尋求別人的協助。

下面介紹下需要的一些基礎知識

開發環境

編輯器：Phpstorm 或者sublime

瀏覽器：chrome（F12開啟審查模式，可以看到任何一個網頁的元素）或者Firefox（需要安裝外掛程式firebug），當然右鍵還可以查看任何一個網站的原始碼。

推薦閱讀

HTML、CSS、JavaScript、PHP、 MySQL 的學習順序是什嗎？

推薦模板網站

http://sc.chinaz.com/moban/

食用方式：先過一遍下面教程裡的全部內容，然後找個好看的模板，學習index.html裡的語句具體是怎麼用的。一般模板都會涉及到jqeury和bootstrap，有些地方看不懂的話也沒關係。

注意：提高基本功還是要靠做下面的作業，套模板只是一種實踐和快速生產的方式。

作業

簡易：做出登陸介面

650) this.width=650;" src="http://upload-images.jianshu.io/upload_images/2642238-1101e8e9cbe02907.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" style="margin:0px;padding:0px;border:0px;line-height:1.7;" />

登陸範例

較難：做出類似百度搜尋介面的純前端頁面

650) this.width=650;" src="http://upload-images.jianshu.io/upload_images/2642238-2c8eacfccd41001f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" style="margin:0px;padding:0px;border:0px;line-height:1.7;" />

搜尋介面範例

Html

劃掉的可以先不用看 其他都掃過一遍 之後就可以一邊查一邊寫

http://www.w3cschool.cn/html/

650) this.width=650;" src="http://upload-images.jianshu.io/upload_images/4579719-1d366e7665789273.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" style="margin:0px;padding:0px;border:0px;line-height:1.7;" />

W3Cschool Html

推薦收藏

html 速查詞典 http://www.w3cschool.cn/html/dict

Css

http://www.w3cschool.cn/css/

css都稍微看下

不需要看太仔細

推薦收藏

css 速查詞典|css API中文手冊|css參考文檔  http://www.w3cschool.cn/css/dict

CSS動畫執行個體參考手冊 http://www.w3cschool.cn/moresource/cssreference/index.html

Bootstrap

http://www.w3cschool.cn/bootstrap/

bootstrap看完css後可以看了，試試看各個控制項怎麼用

推薦收藏

常用的Bootstrap資源網站  http://123.w3cschool.cn/bootstrap_resources

JS

http://www.w3cschool.cn/javascript/

js也是都要看的 這個語言很強大

推薦收藏

Javascript開發資源 http://123.w3cschool.cn/javascript_resource

jquery

http://www.w3cschool.cn/jquery/

內容不多 但是這是前端的核心

推薦收藏

免費Jquery外掛程式合集 http://123.w3cschool.cn/freejquery

前端學習資源匯總

http://123.w3cschool.cn/plk2fi

前端教程&開發模組化/正常化/工程化/最佳化&工具/調試&值得關注的部落格/Git&面試-資源匯總，方便大家學習查閱參考。

本文出自 “w3cschool” 部落格，請務必保留此出處http://w3cschool.blog.51cto.com/12235207/1907639

WEB前端開發快速入門教程