[前端]不是學了 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


avatar-img
3會員
21內容數
一位會切版的 UI 設計師, 以介面設計為錨,朝向 UX 、產品思維、數據思維前進。 喜歡透過書探索世界、看見自己。 著迷文字與內心產生共鳴的瞬間, 喜愛哲學、小說、心理、創造力, 喜愛將所思所想落地變成文字。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧,包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法,鼓勵讀者分享自己的作法與交流。
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
是的,身為前端工程師的基本功! 還是需要時不時拿出來打磨一番,這系列文章每個禮拜三都會更新一題CSS Battle的題目,歡迎與我交流喔!
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目與解法
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目解法
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧,包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法,鼓勵讀者分享自己的作法與交流。
對於想要嘗試學習前端技術,卻還沒下定決心或不知道是否合適的初心者,六角的體驗營就像是前端開發的新手村,提供基礎的新手教學,讓你對前端有基礎的概念;教你最基本的心法,讓你去打幾隻簡單的怪累積一點經驗值。
Thumbnail
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
是的,身為前端工程師的基本功! 還是需要時不時拿出來打磨一番,這系列文章每個禮拜三都會更新一題CSS Battle的題目,歡迎與我交流喔!
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目與解法
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目解法