［前端］不是學了 Html+Css 就是會切版 !? 那些成為專業級你必須知道的事
閱讀時間約 1 分鐘
為甚麼寫這篇文章?
在參加 2022 年六角學院舉辦的公益程式體驗營之後，我認知到一個專業具有就職水準的切版能力不是只是會 html、css 以及一些 css framework 就足夠，魔鬼藏在細節裡，而我想要朝專業級前進。
這個體驗營有一個最終任務是透過客製化 Bootstrap5 來完成此設計稿的切版，此篇文章透過完成此任務以及學院提供的檢核點來說明，完成一個好的切版，必須注意那些細節。
版型檢核點
- 會檢視 h1~6、ul li、p 語意運用
- 不要使用 inline style 寫死在 HTML 標籤上
- 格線系統設計 : row 裡面第一層只能是 col +、col 外層只能是 .row、不用寫
col-12 - 單位設計不要出現類似 .width-63、.font-12，以一個單位或等級來設計，例如
font-xl、mb-5
表頭
- logo 請加上 a 連結，通常 logo 都有回首頁的功能
- 一個網站至少會有一個 h1，不會都沒有
表單
- label、for 的 focus 沒對應好
HTML 語意
- 過度濫用 div，不會利用 ul、li 或 article 與 section
- 在語意上，有 h2、h4，但卻沒有 h3，在語意規劃上要再留意，這就有點像你寫 word 文件，有副標題，跳過第三標題，確有第四標題
- 產品價格下了標題標籤
- 裡面是 p 段落，而非 div
格線系統
- 不要在 .col 的 HTML 標籤用到 margin 左右推擠
引用文章
https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2FXJodWdPwRN6PxLmkUEIvxA
3會員
21內容數
一位會切版的 UI 設計師，
以介面設計為錨，朝向 UX 、產品思維、數據思維前進。
喜歡透過書探索世界、看見自己。
著迷文字與內心產生共鳴的瞬間，
喜愛哲學、小說、心理、創造力，
喜愛將所思所想落地變成文字。
留言0
查看全部
你可能也想看
Google News 追蹤
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁，在現今多裝置的網頁設計中，可以透過 CSS Media Queries 來讓我們根據不同的裝置特性，如螢幕尺寸、解析度等，來應用不同的樣式規則。
本文將介紹 CSS 的四個基本概念：margin（外邊距）、padding（內邊距）、border（邊框）和 box-sizing（盒模型），接下來將透過實際的程式碼範例來展示這些概念如何運作。
本文將介紹 CSS 中的position屬性，position是用於控制網頁元素在頁面上的排列，接下來將逐一介紹position屬性的五種不同值：static, relative, absolute, fixed, 和 sticky，以及它們如何影響元素的排列。
本文將介紹 CSS Flexbox，CSS Flexbox 是網頁設計的佈局工具，Flexbox 能使元素的排列和對齊變得更加靈活和直觀，從而大大簡化了響應式網頁設計的過程，通過了解 Flexbox 的概念和屬性，你將能夠利用 Flexbox 創建靈活且響應性強的網頁佈局。
在網頁中，每個按鈕、文字或圖片等都是通過 CSS 來設定它們的樣子，要做到這點，我們就需要用到 CSS 選擇器。本文會從最簡單的選擇器開始講起，讓你了解如何使用 CSS 選擇器。
本文將介紹如何使用 CSS Media Queries 來創建適應不同裝置的網頁，在現今多裝置的網頁設計中，可以透過 CSS Media Queries 來讓我們根據不同的裝置特性，如螢幕尺寸、解析度等，來應用不同的樣式規則。
本文將介紹 CSS 的四個基本概念：margin（外邊距）、padding（內邊距）、border（邊框）和 box-sizing（盒模型），接下來將透過實際的程式碼範例來展示這些概念如何運作。
本文將介紹 CSS 中的position屬性，position是用於控制網頁元素在頁面上的排列，接下來將逐一介紹position屬性的五種不同值：static, relative, absolute, fixed, 和 sticky，以及它們如何影響元素的排列。
本文將介紹 CSS Flexbox，CSS Flexbox 是網頁設計的佈局工具，Flexbox 能使元素的排列和對齊變得更加靈活和直觀，從而大大簡化了響應式網頁設計的過程，通過了解 Flexbox 的概念和屬性，你將能夠利用 Flexbox 創建靈活且響應性強的網頁佈局。
在網頁中，每個按鈕、文字或圖片等都是通過 CSS 來設定它們的樣子，要做到這點，我們就需要用到 CSS 選擇器。本文會從最簡單的選擇器開始講起，讓你了解如何使用 CSS 選擇器。