切版專案實作 - t-shirt 電商網站
閱讀時間約 3 分鐘
電商網站切版連結：
https://codepen.io/XavierHSIAO/pen/qBgvQyw
為什麼選擇這個專案？
電商已經是我們日常生活中不可或缺的一部份了，而前端市場也有不少相關產業的工作機會，加上最近學習了 CSS Grid 的用法，便挑戰看看這個切版任務。本次專案中著重的練習點如下：
- 依循設計稿畫出 wireframe
- 依情境選用 Flexbox 或 Grid 進行排版
::before與::after的實際運用- 更熟練
position定位 transform搭配transition的動作效果- 利用
media query實現 RWD
哪部分你相對能掌握？哪裡花了最多時間？
由於前陣子花了比較多時間學習 Grid，因此商品區的排版快速完成，此外，原先以為滑鼠 hover 所產生的模特試穿圖效果要不斷試錯，結果也比想像中更快實現。
至於花最多時間的地方，就是 navbar 了。由於本次專案提倡 Mobile First 的設計原則，因此我把注意力幾乎全放在手機版面上，導致 HTML markup 的部分沒有考量到 RWD 下的電腦排版。雖然最後有彌補回來，但著實花了不少時間調整。
明明有把兩種版面的 wireframe 畫出來，但還是採坑了 😑
這是次滿寶貴的經驗，期許自己往後能以更細膩的態度面對 HTML 架構。
navbar 電腦版的搜尋 icon 需要移動到左半邊，原先以為會需要用到某些特殊的手法，結果在實作時，想到直接透過 position: absolute 讓它離開 document flow 再定位就好。
印象深刻的部分
- 由於漢堡排沒有使用 fontawesome 提供的 icon，因此是用
::before和::after來添加上下兩條線。這麼做的好處，是避免在 HTML 寫入沒有內容的 markup。從前便耳聞過::before和::after能變化出許多效果，如今實際體驗過，有種恍然大悟的感覺。 - Flexbox 和 Grid 為現代 CSS 的排版兩大支柱，以往我都是 Flexbox 一路幹下去，如今透過此專案，認識到了 Grid 二維排版的滋味，和 Flexbox 相輔相成好不快活。其中
grid-template-areas更提供了視覺化的語法，讓我們免去計算輔助線的麻煩，也著實讓我開了眼界。
針對 Grid，我整理了兩篇學習筆記，若有興趣的話，歡迎參考討論~
預計的下一步
- 針對 Grid 再進行一次專案練習
- 多認識
::before和::after的使用方式，完成一些小專案
留言0
查看全部
你可能也想看
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
在參加 2022 年六角學院舉辦的公益程式體驗營之後，我認知到一個專業具有就職水準的切版能力不是只是會 html、css 以及一些 css framework 就足夠，魔鬼藏在細節裡，而我想要朝專業級前進。
文章節錄當時的檢核點，作為日後開發的 check list。
切版有許多眉角需要注意，來探討那些經常導致切版結果與設計稿產生落差的原因。
一、文字的高度本體是 line-height：🔍 文字所佔據的高度不是由font-size決定，而是line-hight。一開始練習切版時，都想著設定好字的尺寸和字重就 ok 了吧？殊不知這是造成切出來的網頁與設計
我想分享給那些曾有過相同感受的同學，覺得自己能力不適合、在學習中感到自卑想要放棄的那些時候。而後半篇則想分享自己對於老師、助教的感謝。
來解個任務，順便回顧一下這一年來開始接觸前端的心得。
認識六角學院是從今年年初的工程師體驗營開始的，朋友在去年參加了一系列六角課程之後成功轉職，於是今年體驗營消息一公布，就馬上建議我可以參加看看。
體驗營開始前我的前端學習狀況大概是︰漫無目的地從HTML、CSS、JavaScript一路看到了V
圖片可以說是 HTML 元素中以不受控出名的元素了，在預設情況下，完全不受父容器影響，以下就來看看有哪些方法讓圖片依照你的想法變化吧。
網頁中經常會出現正方形的設計，在切版時如果直接設定固定寬高就是破版的節奏，但單用百分比設定長寬，RWD 時還是會變得不夠正，這邊提供兩個方法：
你或許會好奇，為什麼早已在設計軟體完成的設計稿，還要進行修正？—— 沒錯，因為這中間的切換，經常會有元件不適應（也可能是設計稿本身）的問題。
在pxCode裡，和其他編輯工具的共同點.，就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整，都必須先把結構（既HTML）的基礎打好。
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
在參加 2022 年六角學院舉辦的公益程式體驗營之後，我認知到一個專業具有就職水準的切版能力不是只是會 html、css 以及一些 css framework 就足夠，魔鬼藏在細節裡，而我想要朝專業級前進。
文章節錄當時的檢核點，作為日後開發的 check list。
切版有許多眉角需要注意，來探討那些經常導致切版結果與設計稿產生落差的原因。
一、文字的高度本體是 line-height：🔍 文字所佔據的高度不是由font-size決定，而是line-hight。一開始練習切版時，都想著設定好字的尺寸和字重就 ok 了吧？殊不知這是造成切出來的網頁與設計
我想分享給那些曾有過相同感受的同學，覺得自己能力不適合、在學習中感到自卑想要放棄的那些時候。而後半篇則想分享自己對於老師、助教的感謝。
來解個任務，順便回顧一下這一年來開始接觸前端的心得。
認識六角學院是從今年年初的工程師體驗營開始的，朋友在去年參加了一系列六角課程之後成功轉職，於是今年體驗營消息一公布，就馬上建議我可以參加看看。
體驗營開始前我的前端學習狀況大概是︰漫無目的地從HTML、CSS、JavaScript一路看到了V
圖片可以說是 HTML 元素中以不受控出名的元素了，在預設情況下，完全不受父容器影響，以下就來看看有哪些方法讓圖片依照你的想法變化吧。
網頁中經常會出現正方形的設計，在切版時如果直接設定固定寬高就是破版的節奏，但單用百分比設定長寬，RWD 時還是會變得不夠正，這邊提供兩個方法：
你或許會好奇，為什麼早已在設計軟體完成的設計稿，還要進行修正？—— 沒錯，因為這中間的切換，經常會有元件不適應（也可能是設計稿本身）的問題。
在pxCode裡，和其他編輯工具的共同點.，就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整，都必須先把結構（既HTML）的基礎打好。