html&css學習工具

對於剛起步沒有任何在html&css概念的初心者來說

不彷先從免費的網路資源開始找起

例如國外最知名的的這一個線上教學網站(至少我自己本身在上面學習的)

Codecademy

以大量的做中學題目練習以及會幫你檢查錯誤而聞名

裡面能學的code還不少，html、css、php、Javascript等等...





幾乎前端基本要學的都有了，包山包海包全部

網站上雖然是原文，但使用的英文單字都很基本

真的不行也可以像我一樣在chorme安裝google原廠的翻譯擴充元件

邊用硬翻的不完全中文，一邊練習...當然這是要搭配其他網站來使用，下面會再分享

這是他的介面，簡單來說分成左中右三個區塊

• 左邊：說明以及練習題目
• 中間：語法編輯區
• 右邊：所見即所得的區塊

照著題目以及提示完成編輯後，按下下方的submit

網站會幫你檢查你與語法上是否依照題目裡面下去編輯

假如有錯會提醒你大概哪個部分出錯，對初學者來說是相當貼心的設計

我也是身邊暫無老師之下因為這個功能而選擇他來學習的


剛才有提到翻譯上中文的問題，像我自己曾在選擇器就卡關

原因是因為兩個翻譯過的中文語意太相近，導致我搞混

為了避免這類情況發生，我在下方推薦一些具有中文教學說明的網站的

在練習的同時，順便了解各種Tag、選擇器、屬性、值的定義以及用法

 　　w3school  對岸的web寶典資料庫(也有教程可以學習)

　　1keydata  繁中的CSS語法說明網站

　　wibibi  　網頁百科全書網站

當你學習到中間的課程時，

你會發現到不是每一種元素都能套再一起使用

想像一下，不會有人想要邊衝浪邊吃飯的，這很奇怪不合邏輯

所以，有疑問時在練習的視窗內輸入自己想呈現的樣式

激發自己的腦袋去架構一些小區塊的邏輯

不然你就只是在玩拼圖遊戲而已，動點頭腦吧

最後，codecademy基本上的學習功能都是免費的

但有一些進階練習的題目需要包月才看的到，甚至還有人會回答你的疑問

剛學完html&css的我還真有點心動想要給他買下去...