前端學習

時間 2019-11-10

標籤前端學習简体版

原文原文鏈接

連接：https://www.zhihu.com/question/30180100/answer/131071110
來源：知乎
著做權歸做者全部，轉載請聯繫做者得到受權。

1. 2個小時的時間去看html
就學會<html><head><body><div><lable><input><p><input>就夠了

2.4個小時的時間去看CSS
就學會 color,position就夠了，花點時間看一下盒子模型

3.2個小時的時間，開始寫一個九宮格的小程序
很簡單，用Div，畫出九個格子，心情好就隨便給點顏色

4.2個小時的時間，去配置一下Nginx
很簡單，配置好了以後就能夠在PC上打開，也能夠在手機上訪問了

5.4個小時的時間，去學習一下 px,em,rem和百分比。
確保不一樣手機屏幕下看到的九宮格比例不失調，學習一下自適應。

6.2個小時的時候，學習一下Chrome的F12
感覺一下盒子模型，學習在F12下調試，看大小，更改值，看盒子寬度什麼的。

7.花8個小時的時候去學習各類居中

8.花4個小時的時間去學習製做表單
很簡單的表單，登陸註冊就行，學會Placeholder.

9. 花4個小時的時間去學習製做導航欄

10.NND，忘了說了，在6條的時候就應該學會Svn或者是Git，去買一臺服務器，把本身的代碼放上去。

學習使用源碼管理工具。

11.花4個小時的時間去練習清除浮動

12.花2個小時的時間去學習PS的切圖。

13.花4個小時的時間去理解雪碧圖。

14.花8個小時間的時間去找一個PSD的源文件，而後去作出一個整站的完整頁面。

15.花8個小時的時間，去把這個頁面作成響應式的。

16.花16個小時的時間，將這個網頁的內容所有左右調換反轉。
檢查本身的命名，樣式是否可以勝任PM異想天開的思路。

17.花4個小時的時間去學習前端編碼規範和命名規則

18.花4個小時的時間去學習各類彈框

19.花16個小時的時間去學習一下Bootstrap

20花8個小時的時間去用Bootstrap把以前的頁面所有重寫。

21 花4個小時的時間一樣的把頁面元素所有左右反轉。

22.花8個小時的時間去學習Less，用Less來重寫你以前的任務

23.花8個小時的時間學習一下Flex佈局

24.花48個小時的時間去完成一個完整的PC端

25.花48個小時的時間去完成一個完整的H5.

做者：phodal
連接：https://www.zhihu.com/question/30180100/answer/130816265
來源：知乎
著做權歸做者全部，轉載請聯繫做者得到受權。

在我理解下的基礎知識，就是咱們能夠寫一些基本的樣式，並能對頁面的元素進行操做。舉例來講，就是咱們用Spring和JSP寫了一個博客，而後咱們能夠用jQuery來對頁面進行一些簡單的操做，並能夠調用一些API。所以，咱們須要基本的HTML / CSS知識。只是要寫好CSS並非一件簡單的事，這須要不少實戰經驗。隨後，咱們還須要有JavaScript的經驗，要不怎麼作前端呢？html

同時，咱們還須要對DOM有一些基礎的瞭解，才能作一些基本的操做，如修改顏色等等。在這種狀況下，最簡單的方案就是使用jQuery這樣的工具。不過，若是能夠本身操做DOM是再好不過的了。前端

中級篇

中級篇就更有意思了，如今咱們就須要對頁面進行更復雜的操做。Ajax和JSON這兩個技能是必須的，當咱們要動態的改變頁面的元素時，咱們就須要從遠程獲取最新的數據結果。而且咱們也須要提交表單到服務器，RESTful就是必需要學會的技能。將來咱們還須要Fetch API，ReactiveX這些技能。git

除此咱們還須要掌握好HTML的語義化，像DIV / CSS這也會必須會的技能，咱們應該還會使用模板引擎和SCSS / SASS。而這個層面來講，咱們開始使用Node.js來完成前端的構建等等的一系列動做，這時候必須學會使用命令行這類工具。而且，在這時候咱們已經開始構建單頁面應用了。npm

高級篇

JavaScript是一門易上手的語言，也充滿了至關多的糟粕的用法。幾年前人們使用CoffeeScript編成成JavaScript來編寫更好的前端代碼，如今人們有了ES六、TypeScript和WebPack來作這些事。儘管如今瀏覽器支持不完善，可是他們是將來。一樣的還有某些CSS3的特性，其對於某些瀏覽器來講也是不支持的。而這些都是基於語言原本說的，要寫好代碼，咱們還須要掌握面向對象編程、函數式編程、MVC / MVVM / MV*這些概念。做爲一合格的工程師，咱們還須要把握好安全性（如跨域），作好受權（如HTTP Basic、JWT等等）。編程

工程化

這個標題好像是放錯了，這部分的內容主要都是自動構建的內容。首先，咱們須要有基本的構建工具，不管你是使用gulp、grunt，仍是隻使用npm，這都不重要。重要的是，你能夠自動化的完成構建的工具，編譯、靜態代碼分析（JSLint、CSS Lint、TSLint）、對代碼質量進行分析（如Code Climate，能夠幫你檢測出代碼中的Bad Smell）、運行代碼中的測試，並生成測試覆蓋率的報告等等。這一切都須要你有一個自動構建的工做流。gulp

兼容性

雖然咱們離兼容IE6的時代已愈來愈遠了，可是咱們仍然有至關多的兼容性工做要作。基本的兼容性測試就是跨瀏覽器的測試，即Chrome，IE，Firefox，Safari等等。除此還有在不一樣的操做系統上對同一瀏覽器的測試，某些狀況下可能表現不一致。如不一樣操做系統的字體大小，可能會致使一些細微的問題。小程序

而隨着移動設備的流行，咱們還須要考慮下不一樣Android版本下的瀏覽器內核的表現不致，有時候還要一下不成器的Windows Phone。除此，還有同一個瀏覽器的不一樣版本問題，常見於IE。。後端

前端特定

除了正常的編碼以外，前端還有一些比較有意思的東西，如CSS3和JavaScript動畫。使用Web字體，惋惜這個不太適合漢字使用。還有Icon字體，畢竟這種字體是矢量的。不過Icon字體還有一些問題，如瀏覽器對其的抗鋸齒優化，還有一個痛是你得準備四種不一樣類型的字體文件。所以，產生了一種東西SVG Sprite，在之前這就是CSS Sprite，只是CSS Sprite不能縮放。最後，咱們還須要掌握一些基本的圖形和圖表框架的使用。跨域

軟件工程

這一點上和大部分語言的項目同樣，咱們須要使用版本管理軟件，如git、svn，又或者是一些內部的工具。總之你確定要有一個，而不是 2016.07.31.zip這種文件。而後，你還須要一些依賴管理工具，對於那些使用Webpack、Browserify來將代碼編寫成前端代碼的項目來講，npm仍是挺好用的。不過就我的來講，對於傳統的項目來講我總以爲bower有些難用。咱們還須要模塊化咱們的源碼文件，才能使其餘人更容易開始項目。瀏覽器

調試

做爲一個工程師來講，調試是必備的技能。大部分瀏覽器都自帶有調試工具，他們都不錯——若是你使用過的話。在調試的過程當中，直接用Console就能夠輸出值、計算值等等。若是你的項目在構建的過程當中有一些問題，你就須要debugger這一行代碼了。

在一些調用遠程API的項目裏，咱們還須要一些更復雜的工具，即抓包工具。在調試移動設備時，像Wireshark、Charles這一類的工具，就可讓咱們看到是否有一些異常的請求。固然在這個時候，還有一個不錯的工具就是像Chrome自帶的遠程設備調試。對於移動網站來講，還要有Responsive視圖。

測試

我遇到的不少前端工程師都是不寫測試的，因而我便把它單獨地抽了出現。對於一個前端項目來講，正常狀況下，咱們要有單元測試、功能測試，還有要一些UI測試來驗證頁面間是否能夠跳轉。對於依賴於第三方服務的應用來講，還要有一個Mock的服務來方便咱們測試。若是是先後端分離的項目，咱們還須要有集成測試。

性能與優化

要對Web應用進行性能優化，可能不是一件容易的事，有時候咱們還知道哪些地方能夠優化。這時候人們就可使用Yahoo的YSlow，或者我最喜歡的Google PageSpeed來檢測頁面的一些問題，若有沒有開啓GZip、有沒有壓縮、合併、Minify JS代碼等等。

咱們還應該藉助於NetWork這一類的工具，查看頁面加載時，一些比較漫的資源文件，並對其進行優化。在一些狀況下，咱們還須要藉助如Chrome的Timline、Profiel等工具來查看能夠優化的地方。

設計

前端工程師還須要具有基本的UI技能。多數狀況下拿到的只是一張圖，若是是一個完整的頁面，咱們就須要快速分割頁面佈局。而依賴於不一樣的頁面佈局，如響應式、網格、FlexBox佈局也會有不一樣的設計。而有些時候，咱們就須要本身規劃，製做一個基本的線框圖（Wireframe）等等。

SEO

若是以搜索引擎做爲流量來源，咱們還須要考慮頁面的內容，除非你用的是競爭排名。像Sitemap可能就不是咱們考慮的內容，而咱們還要考慮不少點。首先，咱們須要保證頁面的內容是對於搜索引擎是可見的，而且對應的頁面還要有基本的Title、Description和Keyword。而後在一些關鍵的字體，如欄目標題等等能夠用H2之類的大字的地方就不要放過。同時在頁面設計的過程當中，咱們還須要考慮一些內部連接的建設。

它便可以提供頁面的可見度，又能夠提升排名。最後，若是你是面向的是Google等支持結構化數據的搜索引擎，你還須要考慮一下MicroData / MicroFormat這一類東西。