h5 css js學習時間加起來大概需要多少時間，推薦幾個網上學習課程?

01-14

想儘快實習掙錢

先默認題主零基礎

既然是零基礎，那就要先補補基礎了。

目前前端的熱門使得國內外的前端學習資源大量湧現，現在只要能上網就可以獲取到質量相當高的學習資源。這裡基礎學習推薦 [菜鳥網](菜鳥教程 - 學的不僅是技術，更是夢想！)。

前端的基礎無外乎HTML、CSS、js三類，HTML控制內容、CSS控制表現、js控制動效。由於看題目感覺題主應該是要快速上手，所以基礎學習的時間分配可以有側重：

1. HTML、HTML5標籤過一遍：大概2天。不要求對每個標籤的每個屬性都了如指掌，知道什麼情況下用什麼標籤就足矣，死記硬背也沒什麼意義，後面用的多了自然就熟了。

2. CSS、CSS3：也還是整體先過一遍：大概3天。重點關注選擇器語法、選擇器優先順序計算，要寫出高效簡潔的CSS，其實也就是看選擇器寫得好不好而已。

3. 了解常見布局：大概2天。熟悉一下常見的2列3列自適應布局方案，各種居中，各種行列的實現方式有哪些，響應式布局的實現方式等。

4. 模仿幾個PC、移動端網頁：10天。學編程主要是靠練習，前面學的都是比較零散的細節，這時候可以找一個比較簡潔的網站去模仿它的靜態頁面。這個時候的重點不是某個CSS屬性的用法，而是要看一下一個網站的HTML結構是怎樣的，CSS樣式是怎麼組織起來的，HTML與CSS是怎麼結合的。多想想為什麼要這樣做，這裡可不可以精簡？別把這些網站想得很厲害，由於它們普遍都經過了幾波人的迭代，一般來說結構都偏複雜的，都是有優化的空間的。

通過以上的學習，基本上拿到一個設計稿你就能做出靜態頁面了。如果你還有不錯的布局意識、良好的色感，基本上你就可以做一個酷炫的靜態頁面去面試前端設計崗位了~

不過等等！是不是漏掉了js呢？

恰恰相反，由於js可以同時控制HTML和CSS，所以js在前端中的重要性其實是高於其他兩位的，而且顯然應該在有了HTML、CSS的基礎上再去學習。

1. 基礎語法：還是可以在[菜鳥網](菜鳥教程 - 學的不僅是技術，更是夢想！)上學習，也可以看看[廖老師的js教程](JavaScript教程)，過一遍也相當快。

2. 重點：事件、DOM操作。這些是js最原始的東西，主要是用來實現交互效果的。

3. 組織代碼：了解函數，了解對象，主要是為了以更好的方式組織你的代碼。不然你一行一行寫下去也行，但完全沒有條理，日後也無法改動。寫代碼要養成一個好習慣，除了考慮怎麼實現，還要考慮怎麼去組織代碼，把你的代碼弄得條理分明。

進階部分：

通過以上基礎學習後，基本上都能滿足產品大人的常規需求了。下面就要往炫酷、屌炸天的方向去努力了：

1. 調試工具：極度推薦chrome！抱歉，其實應該在最開始推薦的。在寫CSS的時候，你還是寫一下保存然後打開瀏覽器看效果？用用chrome開發者工具吧，CSS實時調整，爽！js各種調試，爽！[chrom使用教程](Chrome開發者工具不完全指南（一、基礎功能篇）)

2. 性能意識：之前的基礎學習都是為了做出一個東西，而現在你應該要想著做出一個高性能的東西。性能主要有兩方面：載入速度以及頁面執行效率（多指動畫），直觀點說就是卡不卡。這裡可以看看騰訊前端項目組的總結：[移動H5前端性能優化指南](移動H5前端性能優化指南)

3. 代碼規範：基礎部分的代碼組織沒有著重強調，是因為那個時候了解太少，以實現為目的。現在進階階段就要考慮使用面向對象的方式來組織代碼了，而且還要有模塊化工程化的意識。可以從js看起[阮一峰的模塊化教程](Javascript模塊化編程（一）：模塊的寫法)，主要是理解這麼個思路，日後語言層就會支持。

4. 了解一下伺服器開發，做前端總是要跟伺服器配合的，你要是完全不懂後端，那就簡直無法交流了呀。

其實，題主你學這個是要幹嘛呢？如果是單純為了做點小應用的話，其實也可以用WeX5這種可視化開發工具，支持安卓、蘋果、web幾種應用模式。如果是要進入前端行業，那就要好好學習了。

最後說一點：時刻緊跟技術風向！不是要你去跟風，起碼你要知道風吹到哪裡去。