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

閱讀時間約 1 分鐘

為甚麼寫這篇文章?

在參加 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-xlmb-5

表頭

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

表單

  • label、for 的 focus 沒對應好

HTML 語意

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

格線系統

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

引用文章 

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


2會員
21內容數
關於 Html 、 Css 、JS 等相關程式語言的學習筆記或開發紀錄
留言0
查看全部
發表第一個留言支持創作者!
從 Google News 追蹤更多 vocus 的最新精選內容