如何有效快速的學習HTML/CSS/JS？

01-14

感覺沒找對方式去學習。

以前看到的就分享一下網頁外觀的時候 css就可以幫你做的很美觀的

學習資源：

　　HTML Dog (HTML, CSS, and JavaScript Tutorials, References, and Articles)

　　CSS禪意花園 (CSS Zen Garden: The Beauty of CSS Design)已有中文版圖書

最近回答了兩個相關問題,下方有傳送門.相對來說,寫得比較多,說得也比較細了.

這裡簡單說一下吧,學習HTML/CSS/JS,首先要做的就是了解他們的過去,現在及未來.

過去的需要了解,未來的需要掌握,比較實際的是他們的現在.不然,可能搞半天,學的都是過時的,那就事倍功半了.

相對來說,HTML是最簡單的,只是標籤語言,格式規範;CSS相對來說複雜一些,有瀏覽器的兼容問題等.但二者組合就能實現很多很多頁面效果,裡面涉及的變化太多了,如果你只會基礎語法,而沒有實際去寫過,那樣是很難真正掌握的.

我在這裡說說我的經驗吧.我一開始學習的Bootstrap,簡單點說,就是給現有商城項目套上Bootstrap做的響應式皮膚.前面有答主提過Bootstrap,確實挺好上手,靠著官網的手冊,基本上遇到的問題都能自己解決.這對我也是比較有益的過程,學習技術,要學會看手冊,用文檔嘛~

第二,雖然框架有諸多便利,但框架有應用場景的限制,bootstrap,用手移動版的商城上就不太適用了,體積和性能上的不足.就只能自己搭建結構和樣式庫了.最簡單,最直接的方法來了,抄網站,抄最好的網站,我抄了京東和小米.這其中,過程肯定是比較辛苦的,在經歷過這個過程之後,你的代碼能力會有比較大的提升.這個時候再回去看看書,加強理論知識體系的建設,就事半功倍了. 要補充說明的是,抄也是有技巧的,你不能全抄,因為人家的網站那麼大,應該場景和你不同,全抄肯定抄不完,如果你一下子全抄了,出了錯,請問你找得到問題在哪么?一點一點地抄,邊抄邊理解~這才是抄之王道.寫完代碼,就要改,提練~最後我這個靜態的webapp是改了好幾版的.

前面說的是Html和Css,現在說說JS.JS原先是我比較弱的一塊.我曾經深陷只讀書不實踐的怪圈.看了就忘,一直原地打轉.後來是怎麼做的呢,我開始寫寫網頁小遊戲.一發不可收拾,總共寫了七八個.我覺得這是一個非常好的方式.你看啊,一個網頁遊戲,就是一個完整的小項目,而遊戲邏輯都是比較複雜的.如果你從0開始寫這個遊戲,開始寫界面,到可以玩遊戲,再到調各種bug,最後成品出爐.整個過程下來,我相信的代碼能力,你的信心,肯定要比只看書的效果要好太多.反正我寫第一個遊戲的時候,是跟著教程走的,到最後一個的時候,完全就是自己寫的,代碼寫了一周,調bug也調了一星期.每次寫一個遊戲,都會用點自己沒用過的知識點,循環滾動.

總結來說,我認為實踐是第一位的,寫出來的才是自己的,輔之以理論學習,效果一定是最好的.

有人說,學一樣東西,要有輸入,也一定要有輸出.就像打王者農藥一樣,你不能光打小兵,打野怪,顧著發育;一定要給對手輸出傷害,才能幫助團隊走向勝利嘛~

如何在家自學前端? - 知乎

想要學CSS應該如何入門？ - 知乎

其實知乎上類似的問題很多，也有挺多精彩的答案，但是大部分都太長太多，反而讓迷茫的人無從選擇。

所以我只提供一個個人覺得最簡單有效的，針對沒有什麼基礎的朋友，簡單粗暴，一個答案就好。

· HTML+CSS

CodeCademy Learn to code

刷完估計在20小時，大部分就基本沒什麼問題了。

· JavaScript

當然你可以繼續在CodeCademy上面學，不過我更建議跟著一本書走，把代碼都跟著敲一遍。

JavaScript面向對象編程指南 (豆瓣)

還有很多人推薦 JavaScript DOM編程藝術

等你學到這一步的時候再上知乎來找答案吧，關於JS的問答挺多的。

我是屬於給我一個答案就會把所有鏈接都打開那種，想到萬一你也和我一樣，所以我就不貼其他問答的鏈接了。

其實學習這件事情吧，方法很重要，但是最要緊的還是做，然後就是堅持，再是創新。

Keep walking, don"t settle.

html css 和js關係

html是一個網頁的主題，是由多個元素組合成的，但是這寫元素保留的是基本默認屬性，css就是這個網頁的樣式，css定義了元素的屬性，js是通過jacascript語言，實現在一個頁面上展現不同的css樣式。它們的關係通俗講就是 html是一個赤裸裸的人，css是人的衣服，js作用是讓人動起來。

javascript是編程語言，html和css不是編程語言

javascript是腳本語言，它是連接前台（html）和後台伺服器的橋樑，它是操縱html的能手，本文用js代替javascript進行說明。

平時聽到原生js，js庫，js框架，js插件等等，下面簡單說明一下。

l 原生js，是指最基礎的js，沒有封裝過，但因為各瀏覽器對js的支持不同，就導致用基礎的js編程需要為不同的瀏覽器寫兼容代碼。

l Js庫，js框架，是指集成一系列dom操作，API封裝，界面UI封裝的的庫類，常見的有jQuery，extjs等等，這方面的定義比較難區分，暫不誤導大家

l Js插件，就是集成了幫助程序員輕鬆完成功能的程序。Js插件用得比較多，網頁製作上隨處可見。如圖片輪換功能，導航製作，上傳圖片等等。

html －》css －》js的學習路徑

一個基本的網站包含很多個網頁，一個網頁由html, css和javascript組成。

html是主體，裝載各種dom元素；css用來裝飾dom元素；javascript控制dom元素。

用一扇門比喻三者間的關係是：html是門的門板，css是門上的油漆或花紋，javascript是門的開關；

推薦這樣的學習路徑，供參考html －》css －》js先按這個順序學習基礎知識，這三個關聯性很強的，沒法彼此分開，基礎知識建議你去看w3school

個人推薦一些初學者現在W3cschool上學習，雖然會比較枯燥，但是畢竟是一個標準！

然後建議去慕課網看一些視頻，對一些都有很詳細的免費視頻！

w3school 在線教程

慕課網慕課網-登錄

少看視頻教程，多看文檔，多看優秀源碼，多寫。

看書是沒用的，直接做一個web app出來吧

直接看bootstrap的東西算是比較好的上手方法

等你的app大概成型了，HTML/CSS這一塊基本就熟悉了，剩下的就是根據自己需求去擴展各種tag和style

JS的話，先學基本語法，json，jquery，然後嘗試用各種比較常見的框架，譬如underscore，d3，express，angular之類的。然後npm是你的好朋友

最後，IE must die

我非常推薦 http://freecodecamp.org，可以直接去做練習，做完了還會有certificate。也可以看看他們的油管channel。

另外油管上還有很多教學視頻，比如thenewboston，就很不錯。不過都是英文的，我自己也剛開了一個channel，準備錄一些中文的視頻放上去。^_^