細節注意

  • class 複用性
  • class 名稱順序,先放自訂 class 名稱再放共用 class 名稱。
  • 不可寫死容器高
  • 圖片要設 display:block;

設計稿流程規劃

開版

設計稿中區分為兩大區塊:滿版 ( .container-fluid ) 、1200px ( .container )

複用性 class

  • 設計稿中會使用到的內距外距統整到 Utilities 內。
  • 標題分 .mainTitle.title :『 個人資料、學歷、技能、工作經驗、聯絡方式 』 中 font-size、line-height、內距、外距 皆相同,但『 技能與聯絡方式』 文字顏色與英文副標顏色不同,所以分別設定兩個標題 class 。
  • 設計稿中大部分 ul > li 樣式相同,所以設定 .list-group.list-group-item 做複用。 技能與聯絡方式的 ul > li 樣式不同則各別設定。
    • 每個 li 結尾 padding-bottom 都為 0 ,寫一個 .list-group-itemPb0 做複用。本來想要使用 li:laster-child ,但看到洧杰老師 CSS 階層效能優化建議 文章,決定降低選取器的複雜性,使用一個類別方式命名。
  • border : 設計稿中設計了共用的 ul > li 樣式,所以另外客製左側線,方便複用。

小劇場回顧

第一週切版嘗試使用 " emmet 熱鍵 + Wrapping individual lines 技巧 " 開發。

邊回想熱鍵邊一根手指一根手指的按著鍵盤,

讓我想起以前去上電腦課回家練習打字的我媽媽,哈哈哈 XD

.

開始切版前,先統整了設計稿架構,避免寫到後面不知道自己在寫甚麼鬼,然後發瘋掉。

為了增加複用性,尋尋覓覓找出相同的樣式變成可複用的 class ,但不夠熟練總有漏網之魚 ( 例如最後一個 li 的 padding-bottom:0; 這種小細節 XD ),就這樣來回調整了一些時間,也是滿疑惑複用的 class 是否正確,希望再練習幾週能抓到些精隨。

另外發覺自以為飛快的敲著鍵盤時,其實常常打錯字,按到隔壁按鍵,於是加入 " 洧杰老師訓練菜單 " 中的英打練習,把常用的程式碼片段加到 keybr.com 上,每天花 5 ~ 10 分鐘練習手感。

資料來源

六角學院 : 第一週 – 個人履歷

六角學院 :emmet 熱鍵中文表VS Code 編輯器熱鍵

最後修改日期: 19 10 月, 2020

作者