iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 16

Day16 網頁前端-刻意練習(履歷表#1)

  • 分享至 

  • xImage
  •  

Day16 AC 履歷表#1

https://ithelp.ithome.com.tw/upload/images/20200916/2012916108URZOuEAZ.jpg
https://ithelp.ithome.com.tw/upload/images/20200916/20129161pPdKJaJ6Yl.png

簡單小語

很快地又來到履歷頁面的練習,想當初剛開始學習時就在思考要放什麼在履歷表中,到了現在還是一頭霧水,就是一直練習一直練習,履歷的撰寫聽許多大神說簡單扼要,並且展現自己的能力,重複的技能不要重複寫,但仔細思考到現在我還是用flex居多,float使用頂多用在文繞圖或是首字放大時,技能樹點不夠滿,持續努力,或是各位看官能給小魯一些履歷撰寫建議,感激不盡。

筆記分享

  1. 版面都強迫重手機先做,然後慢慢做回電腦,畢竟手機觀看用戶直逼電腦。
  2. 這次切版特別講究paddingmargin的控制,讓每一區域間格及內容間隔皆相同,鍛鍊控版能力。
  3. 多採用組合式宣告,讓切版時事倍功半,難怪有做很快的錯覺(!?)。
  4. 時間軸的做法還是有瑕疵, .work-item .item:nth-child(1) .container::after(直線),位置就是喬好,磨練磨練。
  5. 圖片大小可外包一層div控制或直接用img控制,依照版面需求而定。
  6. 用到:not(內容)選取到內容以外的class,好用啊( .skills-item .item:not(:last-child):after)
  7. 選取器得靈活應用真的加快思考及選到想選的位置(:nth-child, :not)
  8. wiidth的控制也很重要,清楚了解每一個版面的空間,排版觀念更加清晰。
  9. height盡量靠內容撐開或是使用padding,才不因為RWD而破版。
  10. 目前自我練習僅headerbackground-img會限制height,功力不足。

刻意練習

Practice(200806 Day 16)

首次練習

Practice(200607AC_sample)


2020 iT邦幫忙鐵人賽 Day16 網頁前端-刻意練習(履歷表#1)


上一篇
Day15 網頁前端-刻意練習(英雄頁面#2)
下一篇
Day17 網頁前端-刻意練習(履歷表#2)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言