［前端］不是學了 Html+Css 就是會切版 !? 那些成為專業級你必須知道的事
更新於 2024/10/15閱讀時間約 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 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
本文將介紹如何使用 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 選擇器。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
本文將介紹如何使用 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 選擇器。