菜鳥碼農養成日記自學前端基本功 HTML & CSS

若欲善其事，必先利其器。這篇文章將會介紹我一開始接觸學習語言的一些網路資源，有想朝這個方向走的人可以參考看看。

在真正決定要走這條路以前，學習語言對我來說只是一個除了日常工作以外，讓自己多增加一點知識而已。學習的過程中發現興趣，就此上癮。最初我也不確定自己是否將來就會走這條路，主要是懷疑自己的能力，因為真的一點背景都沒有。沒背景沒學歷沒經歷的情況下，要花個三十萬台幣直接衝去上課，相信很多人都會怕怕的，我也一樣。參考過網路上很多自學的文章，於是計畫先用最經濟的自學方法，開啟我的碼農人生。

本篇先會介紹前端工程師必須知道兩個語言HTML和CSS。HTML和CSS這兩個東西外行人聽似陌生，簡單來說就是你現在看到這篇文章上呈現的所有元素。HTML可以呈現文字、左上角的按鍵、右側的FB連結和圖片的展現，這些都是用HTML去組成。而CSS可以改變形狀、大小、顏色和設計，你在這個網站看到的紫色系列，也是利用CSS去調整而成。

這兩個語言可以說是想做網頁的基本功，了解這兩項的元素與特性，學習寫網頁的必需品。但這兩項比起之後我會介紹的JavaScript，的確是比較枯燥。好處是也比較簡單，大致了解以後可以結和JavaScript做學習，離製作網站的程度也不遠了。

想了解HTML和CSS可以點連結有詳細的介紹。

HTML是什麼? MDN HTML基本

CSS是什麼? MDN CSS基本

MDN是一個想學前端網頁建造的一個非常好的資源網站，除了資訊正確豐富外，中文英文版本都有。雖然上面連結是中文版本，建議大家如果想在英語系國家找工作，可以用英文材料做學習。我個人認為這個很重要，唯有用相同的語言學習才有辦法與同事溝通。像我如果想回台灣工作，就要增強中文的用語(目前是一竅不通XD 陣列?? Array嗎??)。

了解了上述這兩項的由來和基本功能後，我們可以更深入地去了解每個元素的特性。上述的MDN雖然資料豐富解釋清楚，但對初學者來說，我覺得會有點距離感。舉個例子，當我們學中文時，一開始先學一筆一劃，先學會簡單的字再做延伸，如果一開始就要我們學轟、龜等字，我想我應該永遠學不好。想學加法要先學會123的道理。

這個w3schools網站是我一開始學HTML和CSS的最佳夥伴，網頁解釋淺顯易懂還有例子可以自己操作，看完以後還有小測驗，加深了我不少印象。雖然這網頁在工程師界都被嫌棄萬分，但對初學者來說，先看得懂再求好、求精確，我認為十分重要。

學習HTML

學習CSS

如果你有點上面兩個連結，稍微掃過一次以後可能會跟我一開始的感想一樣，天哪! 這麼多東西我怎麼記得起來? 沒錯，真的記不起來。

HTML和CSS在學的時候就如上述一樣，真的比較無聊。但我們不需要把所有東西都死背下來，只要記得每種元素的一些特性，像是 <div> 做什麼? 一個方格子、<p> 一段文字。初期階段不用背起來，只要練成看到知道是什麼就可以了。

在往後學習的過程慢慢套用，這輩子你想忘記都非常難。

光看覺得很無趣? 除了w3schools的練習以外，你也可以用下面這兩個免費的網站，創造一些東西。

JS Bin

點進網頁後你會看到HTML、CSS和output的欄位，output的欄位有個紫色的正方形。改變HTML和CSS裡面的程式語言可以改變output的呈現。像是我們如果把lavender改成yellow，正方形背景色將會變成黃色、把purple改成red，邊框將會變成紅色，學到更進階可以加入一些動畫效果等等。