[FE101] 前端基礎:HTML 與 CSS
終於可以來寫點看得到的東西了
大家都知道網頁三劍客:HTML、CSS 與 JavaScript,三者搭配使用才能發揮最大效力。
在這一堂課裡面先把 JavaScript 放在一旁,先帶你學習最基礎的 HTML 與 CSS,讓你把基礎打好,先不上 JavaScript 一方面也是考量到不要增添課程的複雜度,希望能讓這堂課單純一點,讓大家專注在於排版上面,不用去思考其他東西。
另一方面呢,HTML 與 CSS 也是初學者最容易上手的技術,因為只包含了標籤跟一些語法規則,不像寫程式那樣你必須應用邏輯去思考解法(CSS 玩到很複雜也是可以啦,但這堂課不會講到那麼複雜),更何況比起 JavaScript,寫起來會更有成就感一點!
因為你可以實實在在「看到」你寫的東西,而不是某些程式語言只有冷冰冰的黑底白字畫面而已,能夠看到是很重要的一件事情,開始學習 HTML 與 CSS 之後你會發現網頁設計並不是一件那麼嚇人的事。
在這堂課裡面,希望你能夠打好前端最重要的基礎之一,至少能夠理解前端的一些重要概念,以及能夠切出簡單的版型。
最後我要先聲明一下,這堂課所學的東西並不完整,一些重要的排版方式例如說 float、Flexbox 或是 grid 都沒有介紹到,也沒有提到 media query,建議把這門課當作前端基礎的補充教材,而不是抱持著只要買這堂課就能學會 CSS 的這種想法,因為這堂課程缺少實戰,所以看完之後也不一定能夠學習到如何切版。
在購買這堂課以前可以先試看以及看一下課程大綱,以免買到不適合的課程。
你的老師
寫過一點後端也寫過前端,還寫了一堆你應該看過卻不知道作者是我的技術文章,致力於推廣淺顯易懂的程式教學。在新加坡工作過兩年半,是專職的前端工程師。一直都對教學有很大的熱忱,相信把話講得清楚又明白是一種專業,相信分享與交流可以讓世界更美好。
我不喜歡把自己講的很厲害,也不喜歡用學經歷說明什麼——我都用作品說話。
底下是我寫過的幾篇文章:
1. 零基礎的小明要如何成為前端工程師?
2. 成為前端工程師的四週年回顧
3. 從拉麵店的販賣機理解什麼是 API
4. 紮實的網頁前端學習路線與資源推薦
5. 當我們在學程式時,要學的到底是什麼?
我在自己的 blog以及 Medium 上面,常常發表許多心得,也曾經免費提供程式教學,希望能幫助那些剛踏入程式界的初心者們。 如果你想更了解我,可以參考:自學、哲學、講學:我的程式之路以及一個工程師的履歷進化史。
在嘗試過許多教學方法之後,終於決定自己跳下來開一個為初學者而生的線上程式課程平台。
課程
-
預覽絕對會用到的標籤:html、head 與 body (7:18)
-
預覽別忘了 HTML 最早存在的意義:h1~h6、p (4:45)
-
預覽很常見的標籤:div 與 span (3:52)
-
預覽顯示圖片就靠它:img (3:12)
-
預覽顯示清單:ul、ol 與 li (2:00)
-
Start保留完整格式:pre (3:03)
-
Start表格必備標籤:table、th、tr 與 td (3:34)
-
Start帶我走,到遙遠的以後:a (4:27)
-
Start語意化的 UI 標籤:main、nav、footer 等等 (4:38)
-
Start直接用別人的網頁:iframe (2:30)
-
Start表單相關標籤:form、input、textarea (9:48)
-
StartSEO 與相關標籤:meta tag (17:10)
-
StartEscape:該怎麼顯示標籤? (3:36)