設計師自學 HTML 和 CSS
先簡單介紹我的背景，我是數位學習科技學系出生，大一雖然學過程式設計，但我沒有什麼邏輯概念所以還是不會寫程式，開始想學網頁設計是在大學畢業開始找工作之後，這篇會紀錄我學習 HTML、CSS 的自學歷程，並推薦幾個適合設計師學習網頁設計的資源。
2015 年大學畢業後，我開始接觸 HTML5 和 CSS3（後面會直接簡稱 HTML 和 CSS），第一個接觸的線上教學是 Codecademy，雖然是很詳細的一步一步教學，但上完免費課程的我還是寫不出網頁，因為該從何開始要如何下手完全茫然。
不過後來其實有點慶幸我是從 Codecademy 開始學，因為那時候他的教學是需要自己一個字一個字打的，所以能稍微加深語法結構如何撰寫的印象，但只要使用過 Emmet 就回不去手打了ㄏㄏ。
入門
新手上路推薦
直到 2016 年先買了 Hahow 的某堂前端網頁設計入門（這堂課有些名詞解釋非常詳細，但課程內容都只是概略介紹），之後不小心看到吳哲宇老師的「動畫互動網頁程式入門 (HTML/CSS/JS)」，這時候才發現寫 CSS 好玩的地方，因為老師是以設計師的角度來教學，所以對設計師來說上這堂課非常有趣，而且不會想睡覺（劃重點）。雖然直到現在我還是沒把後面動態網頁相關的課程上完，但光是前面的 HTML 和 CSS 教學就讓我獲益良多，終於知道要用什麼標籤和樣式建構一個網頁，大力推薦給設計師們，是一堂 CP 值很高的課。
另外一堂推薦的課是六角學院的「使用 HTML、CSS 開發一個網站」，老師是工程師，所以可以幫你打穩 HTML 和 CSS 的基礎，重點是交作業會有人幫你檢視語法使用上有沒有出問題，但這堂課我從來沒交過作業（不良示範 XD）。
P.S. 了解基礎 CSS 的概念後，推薦大家可以使用 SCSS 撰寫，跟 CSS 最大的差異就是巢狀結構，其實還有其他東西可以使用但這裡就不多做說明，等哪天有心想深入鑽研 SCSS 就自然會知道了。
補充網頁設計知識
書籍
我在學 HTML 和 CSS 時，一直都是斷斷續續又反覆的從頭學起，中間也有買過幾本網頁設計相關的書籍翻閱，網頁是設計給人使用的，所以必須了解這些基礎的網頁設計知識：
《如何設計好網站：Don’t Make Me Think》：這本是網頁設計入門的經典書籍，現在好像不太好買了，可能要自己找找看有沒有二手書。
《網頁就是這麼疊出來的！》：這本書結合圖片和部分 HTML、CSS 的原始碼，解釋網頁是如何疊出來的，還有模組設計的方法，但我好像並沒有全部看完需要再複習一下內容…。（這本好像已經買不到實體書了。）
《絕美網頁設計法則》：比較偏網頁設計基礎的書籍，內容很廣泛，適合任何想學網頁設計的人閱讀。（然後我好像也沒有看完書…。）
《 CSS Secrets 中文版》：中文翻譯的某些名詞我記得翻得不是很好，但是不會影響這本書令人讚嘆的 CSS 使用方式，結合了各種你常見或甚至比較少見的 CSS 屬性，還有一些數學運算做出你意想不到的視覺效果。推薦給想用 CSS 玩除了排版用途外的各種視覺設計的人們，這本書真的會讓人覺得好像在使用 Ai 、Sketch 做設計，但是你做的設計都是使用 CSS「寫」出來的。
強烈建議可以找看看比較近期出版的書參考，因為上面有幾本都已經不太好買了，加上網頁是會不斷進化的，書上有些語法或視覺呈現方式說不定已經不太適合現在的網頁了。
書籍在這個時代好像不再是必備品，但可以輔助學習線上教學不會提到的網頁設計細節，尤其像我這種並不是設計專科出身的設計師，看這些經過有系統編排的書籍才對網頁設計細節有更清楚的概念。
中階
CSS 應用
對基礎的網頁設計有概念後，就可以開始活用 CSS 了，我推薦這堂「用程式構築的繪畫世界 — CSS 繪圖」，裡面有教用 CSS 畫出形狀和一些小動畫，練習起來非常有趣，可以讓你更清楚定位的方法，這堂課我難得有認真交作業，對設計師來說可以很快上手，等於是用 CSS 在網頁上作畫。
還有另一堂「從入門到業界實戰 — UI / UX 前端網頁設計」裡的網頁動畫實作、元件實作等章節，內容不錯有些很實用，但這堂課的內容有些龐雜，我目前還沒有全部看完。
多練習多看
實作
多練習實作其實才是最重要的事情，可以上網找一些免費模板自己練習切版，但這真的需要自動自發，我一直都缺乏練習的動力…。
雖然中間有寫過兩、三個非常簡單的一頁小網頁，但直到今年二月左右我才第一次正式寫一個完整網頁，十頁的內容有八成左右都是我寫的，除了 Grid、navbar 是使用工程師的簡易框架，剩下的 HTML 架構和 CSS 樣式都是自己撰寫（當然工程師會修改我的某些 HTML 結構），再加上版型架構沒有很難，花了幾星期寫出來真的超有成就感，扎實的基礎很重要但還需要加上實作！我在過程中有不小心踩雷雷到工程師，覺得深感抱歉！
Medium 文章
Medium 上也有很多實用的文章，會想寫文章記錄是因為最近看到這篇文章，他把 CSS 屬性分類介紹，學到很多以前沒注意過的屬性和 CSS 的使用方法，可以搭配 W3Cschools 一起閱讀，但我覺得要先有一點基礎觀念並有實作過再去閱讀會比較快，要不然都是英文看了也蠻痛苦，加上文章非常長！
freeCodeCamp
免費的線上教學資源，之前有在 Medium 發佈文章，但現在完全獨立出來了，裡面有很多內容可以學習！
結語
這篇主要介紹的是入門到中階的靜態網頁學習資源，再走下去還能學 RWD、Bootstrap 4，但說實在你如果能自己刻樣式，套用框架絕對難不倒你，只有熟悉度的問題；還有模組化樣式、命名規則、SCSS 的更進階使用等等。如果都學會上面提到的內容其實就算碰觸到一部分前端邊緣了，端看自己有沒有興趣再走動態網頁的領域，動態網頁的部分可以參考「動畫互動網頁程式入門 (HTML/CSS/JS)」後面的課程。
不敢說現在的自己很厲害，光是基礎的 HTML 和 CSS 就反覆學了五六遍左右，但是累積起來已經比一部分的人多前進了一些些，網頁的世界要學的東西非常多，當自己看越多學越多越覺得自己依舊無知。
設計師學會 HTML 和 CSS 絕對很吃香，你會對圖片尺寸斤斤計較不會切出奇怪尺寸的圖，而且老實說 CSS 也是種設計工具，不同的是從設計軟體跑到網頁上「寫」出設計，需要注意的細節更多，雖然一開始一定會有挫折感，但看到自己寫的樣式出現在網頁上也會很有成就感。
最後，自學路上很感謝認識的所有工程師們都願意教我，真的是三生有幸啊哈哈。
如果喜歡我的文章歡迎多拍拍手鼓勵我！
大家的拍手對我來說是莫大的鼓勵！
而且拍手最多可以拍到 50 下請多拍XDD
下台一鞠躬！補充文章：
