如何練習前端技術？

01-14

書籍方面已經看的很多了，但是缺少實際的經驗。請問大家當初是如何練習提高的？

通過不斷的山寨別人的網站。這個過程中你不要打開人家的代碼，靠自己的想像力山寨到每一個像素。

公司招聘，歡迎有興趣的小夥伴加入我們：

[北京][13-18k] [優帆遠揚] 招聘中級前端工程師 1 名

更新於 2017 年 11 月 17 日

***

--------

最近還是碰到蠻多學生，或者其他行業的同學想轉行來做前端工程師的，也在有沒有更好的方式大家可以一起學習，討論交流。

個人覺得作為一個完全對編程領域完全小白的外行來說，來當前端工程師還是比較有難度，前端目前並不是一個簡單的工作，你需要有下面三方面的能力才能做得比較出色：

計算機知識背景（基本的編程能力）
良好的設計素養
前端的工程能力

像我的朋友就是做得很不錯的一位前端工程師：Portfolio - Xiaoyu Tai

所以鑒於跟一個知乎朋友的私信，我建立了一個 Teambition 協作項目「自學工程師（前端）」，完全免費，我會每周的任務的形式發布一些前端任務給大家（會規劃成一個課程），大家也可以在上面規劃自己的前端學習任務，這樣大家也能更好的交流一些學習經驗，當然這是一個長期項目（1~2年），之後也會邀請一些很優秀的前端工程師加入幫助大家，以及發布一些實戰項目給大家處理，希望大家享受這段路途，成為更優秀的自己！

請發郵件把自己的郵箱或者聯繫方式通過「私信」或者郵件發給我：jobslong@estgroupe.com, 之後會邀請大家加入：）

抱歉因為 Teambition 項目團隊人數的限制, 免費項目暫時 10 人，所在暫時停止邀請其他人的加入，不過可以查看信息；

項目鏈接：https://www.teambition.com/project/58451cfbf2c4c49c4c4a8b05

大家稱呼我為曉文就好啦~~

更新於 2016 年 12 月 5 日

***

野狗網的一篇文章寫的蠻有用的，前後端分離的應用越來越多之後，作為前端工程師，也需要一套技術體系來整理思路，我把文章的內容整理成了一個列表，可以看一下：

前端技術體系：

業務邏輯體系（關注服務的完整性和可復用性）

鑒權系統

集中處理登陸、支付等需要風險控制較高的公共業務

配置系統（集中管理配置項）

功能開關
鏈接地址
AB測試控制等等

消息系統

推送通知
消息推送
客戶等即時通信場景

業務系統

Business Components（具體跟業務領域有關的組件單元）
公共/全局的樣式庫和功能庫

在各業務線之間保持用戶體驗的一致性
業務組件在公共的樣式庫和功能庫基礎之上開發可復用的組件，提高開發效率
公共的功能庫包括登錄、支付、數據統計等常用的功能，這一部分可以增加測試覆蓋率來保障質量

第三方庫

樣式框架：Bootstrap, Material Design, Semantic UI, etc.
JavaScript Framework: React, Vue, Angular, etc.
功能庫：Fetch Modernizr Sentry GA
基礎庫：jQuery Zetpo Underscore Lodash

基礎設施體系（關注系統穩定性）

資源管理系統

CDN
圖片管理
發布工具
離線包管理

數據持久化系統

存儲上層系統的非核心業務數據，比如錯誤數據或者用戶行為數

運維繫統

版本控制
發布腳本

保障體系（關注質量和可用性）

測試系統

靜態檢查 - Eslint JSCS

Unit Test - Karma Jasmine Mocha
End to End Test - Protracker Nightwatch Selenium （關注主流程和回歸測試）
持續集成 - TravisCI CircleCI

監控系統（從用戶的角度判斷系統的可用性）

可用性監控 - 頁面訪問成功率介面成功率
錯誤監控 - 收集並匯總應用系統拋出的錯誤信息
業務指標監控 - 實時訂單量事件觸發量

統計系統（統計系統和監控系統的區別在於，監控關注的是實時數據，統計關注的是全量數據，監控是為了提高團隊的故障響應能力，統計是為產品與業務分析提供基礎。）

性能統計
訪問量統計
用戶行為統計

開發部署工具集

代碼管理 - Git Stash
包管理 - NPM Bower Yarn
構建工具 - Webpack
任務管理工具 - Gulp Grunt
腳手架 - Yeoman

通用組件系統（集中管理可復用的開發資源）

組件的質量標準
組件的測試用例
組件的復用機制
Demo與Gallery

原文鏈接：前端技術體系大局觀

更新於 2016-11-07 11：10

-----------------------------------

自己搭一小論壇，寫一點編程相關的東西：

Suip 碎片論壇

更新於 2016-10-01 11：18；

-----------------------------------

如果你還沒有稱手的編輯器，前端更推薦使用 Sublime Text 或者 Atom.

從這篇教程開始, 成為 Sublime Text 大師_Laravel China 社區

更新於 2016-9-18 18:36

-----------------------------------

如果你對 HTML CSS 不是熟練的話，可以嘗試一下這個站點，讓自己的基礎功更紮實

Learn to Code HTML CSS

更新於 2016-3-16 01:28

-----------------------------------

修改了一些錯別字，推薦一個前端基礎的文章，寫的更全面，大家可以對前端這個職業也有一個更理性和全面的認知：

前端工程——基礎篇 · Issue #10 · fouber/blog · GitHub

我給我弟寫的---------》》》如何成為一個前端工程師？

一個垂直招聘網站：哪上班 - 互聯網好工作近在咫尺，可以隨時上去看看公司的招聘要求，及時更新自己的技術和簡歷。（沒打算做廣告這個只是建議！！）

我大約搜集了20幾個公司的招聘信息，其他的大致瀏覽了一下；信息看一下附件(Excel);

======================================================================

前端薪酬（北京）：6K-20K

工作經驗要求：1-3年以上

學歷要求：大多數都不會要求，一部分要求本科計算機相關專業；

前端的主要工作內容：

1. PC端和移動端的Web頁面設計、開發、架構、技術研究；

2. 與後端溝通，完成產品需求；

3. 兼容性解決、頁面和性能優化；

4. UI設計、交互設計、UX、文檔工作

前端需要掌握的技術：

1. HTML/CSS/XHTML/XML/DOM/JSON/Ajax

2. HTML5/CSS3

3. Javascript 以及JS框架：

Bootstrap 、jQuery、Ext、Dojo、Prototype、Node.js

AngularJS、Backbone、Ember.js

4. 移動端框架：

jQuery Mobile、zepto、Sencha Touch

5. 新的技術語言：Less、Sass、Haml、

6. WEB標準、兼容性解決、WEB語義化、頁面架構、REST

7. 網路協議、WebSocket、Spdy、

8. 性能優化、安全性、可用性、SEO、伺服器端基本知識

9. 工具：linux、bower、git、sublime、grunt

性格要求：

主動學習

求知慾

責任感

溝通、邏輯理解能力

書面表達

進取心

加分項：

1. 熟悉後端技術(PHP+Java+Python+C+CPP)

2. 熟悉設計師工作：Photoshop、Flash、

3. 動畫製作經驗、遊戲開發經驗

4. 熟悉版本控制系統Git 以及Linux開發環境

5. 移動端Web開發項目

6. 項目經驗，參與開源項目貢獻過代碼（Github）

7. 書面表達能力強，有自己的博客

學習指導：

學習指導有個人的經驗在裡面，可以作為參考，如果你有自己喜歡和認同的學習方式，就去自己學習，殊途同歸，別忘記目標就ok。

在技術線的同時開始閱讀一些關於下面知識的書籍和博客，積累知識和經驗：

Web標準、網路協議基礎知識、伺服器端的基本配置基礎知識

安全性和可用性

Web 性能優化

前端技術發展

在學習的過程中能夠掌握常用的工具的使用：

1. 各種瀏覽器上的Web開發者測試工具:

Firebug: Firebug

Web Developer: Web Developer

Chrome、Firfox、IE瀏覽器都有Web控制台工具，熟悉一下；

2. Linux 和 Git 版本控制系統：

關於Linux我沒有什麼好推薦的，我覺得一個是自己興趣，對命令行比較喜歡，肯花時間，我學Linux也差不多也有一年多了，感覺還要很多東西需要去看，網上有很多教程和書籍，如果需要我推薦的話告訴我，如果不需要就自己摸索吧。開發環境必須熟悉；

Git 對你的項目文件的源碼進行版本控制，非常贊的一個東西，也是開發Linux的Linus Torvalds 開發的一個產品，這個需要掌握；

Pro Git（中文版）: Pro Git（中文版）

註冊一個Github賬號吧 GitHub 路 Build software better, together.，裡面有很多開源的項目，參考，使用之類的都很方便；

我的賬號是：JobsLong 路 GitHub

3. Sublime 是我現在用得文本編輯器，現在也主要拿它寫代碼，很不錯的一個開發工具：

Sublime Text: The text editor you"ll fall in love with

4. 其他的工具你會慢慢有需求，然後慢慢學習就ok。（ps 我也在學習之中）

給你的資源可能都是英文的，如果覺得困難，自己在網上搜索一些中文教程，就ok，有問題給我發郵件；

jobslong@estgroupe.com

希望你經過一年的學習，能夠有一兩年工作經驗的水平；

學習資源的推薦：

你或許可以這樣開始學習：

1. 從網上w3c開始學習基礎前端開發的內容：

英文：W3Schools Online Web Tutorials

中文：w3school 在線教程

這些都是基礎，不要覺得簡單，花一個月的時間把這個網站上得案例自己寫一下，這樣以後熟悉後面的知識更熟練一點，碰到任何問題給我email，或者google；

還有這些概念也需要理解：

把這兩塊的基礎知識過一遍，我相信你寫簡單的靜態頁面應該沒問題，但是也可能會很難看，設計這個東西需要你自己多領悟，多去看看別人的作品，好的網站設計，慢慢培養感覺；

現在需要你稍微明確一下自己的方向，如果你感覺你CSS理解的很深刻，就去找一本講CSS和CSS3的經典書，深入的學習一下，接受一些簡單的實際項目，不論賺錢不賺錢；另一邊也一樣，如果你覺得伺服器端的 JS代碼和jQuery腳本寫的很上手，就找相關的書籍深入學習，接手一些網站；

在同時，需要你學習兩個東西：

Bootstrap

BootstrapBootstrap中文網

進階：深入理解Bootstrap

Node.js

node.jsCNode：Node.js專業中文社區

進階書籍： Node.js 實戰

去官網文檔，學習示例，書籍，教程，應該會有一個快速提升的階段；

這些學完，你應該步入新手階段，對前端和一些技術也會有一些自己的看法，但是記住不要固執和謾罵；

我有學習一個非常棒的課程，哈佛大學的公開課，如果你在學習基礎的時候有時間，可以看看這個課程的視頻，網易有翻譯的公開課：

哈佛大學公開課：構建動態網站

我非常喜歡這個教授，有機會去美國一定去拜訪 David Malan

不過網易上翻譯的是2010年的了，但是非常棒，沒有過時，也算做Web開發的入門課程；

可以去課程官網看看今年的課程，裡面有很好的知識點和好玩的東西，也有課程作業和項目文件：

https://www.cs75.net/Main_Page

CS75.tv

你很聰明，但是很多事情要堅持和樂觀，一起努力

等你看完這些指導，我的後端工程師指導應該也會寫好了，再發給你。

如果需要任何資源和幫助(英文方面也可以)， email 我。

先學w3c school，這個是誰都繞不開的，然後感覺可以去學一些開源的前端工具包，比如bootstrap。用它作兩個小項目，然後主要是去讀裡面的代碼，嘗試理解它們。再然後可以試試深度定製bootstrap。。。最後呢少不了的就是讀代碼和敲代碼了，看見別人的網頁不錯就F12吧。。然後讀讀代碼再嘗試著自己實現一下。然後實現的差不多了就把代碼留著做模板吧^_^

發現了一個可以通過練習JavaScript打怪升級的網站，這裡主要是練習JavaScript（當然這個網站還支持其他語言）。先來一些高大上的截圖吧http://www.codewars.com/r/gAMm9Q 。具體的可以去申請一個帳號玩一下。

選擇語言：

排名：

答題頁面：

技術這種東西必須是要學以致用的，不管你是看書，或者看視頻，或者別人手把手給你講，這時都是你都是出於接受知識的狀態。接受了不一定就能轉化成你的東西，可能左耳朵進右耳朵出，所以最後知識還是得靠實踐才能實實在在留在你的腦子裡，當你能把所聽所看都能通過代碼做出來的時候，你才能說你學會了xxxx，不然都是浮雲。

不喝雞湯，直接上技術詳細攻略：如何幫助前端新人入門和提高？ - 野次的回答

還有我覺得大家提高技術得有個方向，不能說是為了提高技術而提高，總要了解自己的職業成長，自己這些努力學習的目標是什麼，未來自己將會如何發展，對職業成長感興趣的可以傳送到 Web前端的路該怎麼走？ - 野次的回答

一個歪國妹子，毛都不會，訂了個計劃，花180天，做180個網站

我想說，人家妹子都能操刀來干，咱老爺們花點時間踏踏實實學一下難么？

這個歪國妹子已經變成了一枚光榮的程序媛，並且做了屬於自己的網站，創業了

15 天時發的一篇 blog 介紹了這件事，然後火了：

Jennifer Dewalt

博客中對應 tag：

Jennifer Dewalt

網站列表：

Jennifer Dewalt

先是w3c school

然後就是各種F12了

哇，這個界面好炫酷，拿來抄抄

總之，天下代碼一大抄

把你最喜歡的和最想實現的前端效果，做成網站做出來。然後不斷改這個網站，增加新內容。不要試圖一步到位。慢慢做。

審查元素

首先。以我為例，我就是先把w3cschool里的基礎知識看了又看，然後就是各種視頻各種文章各種書籍各種技術各種資訊的看，看完之後就自己做網站，看到別人網站很酷的特效就拿來練練，主要是用Firefox的firebug插件插件，然後就是嘗試解決各種瀏覽器兼容性，各種性能優化等等……

幫助別人寫一個網站，以項目來驅動你前進。

可以自己想個項目開始做啦，要求更高點可以接活做啊

碼