［前端］不是學了 Html+Css 就是會切版 !? 那些成為專業級你必須知道的事

為甚麼寫這篇文章?

在參加 2022 年六角學院舉辦的公益程式體驗營之後，我認知到一個專業具有就職水準的切版能力不是只是會 html、css 以及一些 css framework 就足夠，魔鬼藏在細節裡，而我想要朝專業級前進。

這個體驗營有一個最終任務是透過客製化 Bootstrap5 來完成此設計稿的切版，此篇文章透過完成此任務以及學院提供的檢核點來說明，完成一個好的切版，必須注意那些細節。

版型檢核點

1. 會檢視 h1~6、ul li、p 語意運用
2. 不要使用 inline style 寫死在 HTML 標籤上
3. 格線系統設計 : row 裡面第一層只能是 col +、col 外層只能是 .row、不用寫 col-12
4. 單位設計不要出現類似 .width-63、.font-12，以一個單位或等級來設計，例如 font-xl、mb-5

表頭

• logo 請加上 a 連結，通常 logo 都有回首頁的功能
• 一個網站至少會有一個 h1，不會都沒有

表單

• label、for 的 focus 沒對應好

HTML 語意

1. 過度濫用 div，不會利用 ul、li 或 article 與 section
2. 在語意上，有 h2、h4，但卻沒有 h3，在語意規劃上要再留意，這就有點像你寫 word 文件，有副標題，跳過第三標題，確有第四標題
3. 產品價格下了標題標籤
4. 裡面是 p 段落，而非 div

格線系統

• 不要在 .col 的 HTML 標籤用到 margin 左右推擠

引用文章 

https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2FXJodWdPwRN6PxLmkUEIvxA