網頁切版直播班心得

2020 秋季班

Chun
Dec 9, 2020

當初為什麼報名這堂課?

聽聞第一屆切版班的評價極高,加上我上過 JavaSript 作品實戰班,很喜歡線上直播互動和大量作業密集訓練的感覺,而且又不斷有加碼活動,所以毫不猶豫就報名了課程。

學習過程

week 1、week 2(個人履歷個人網站

基礎卻非常重要的觀念,往往出錯都是基礎觀念沒搞懂。container 容器、區塊元素、行內元素、盒模型、行距 line-height 才是影響文字高度的關鍵。

Flexbox 網頁排版術,善用 Flex,卻不過度使用 Flex。

前兩週算是牛刀小試,作業也都是單頁式網頁,從中理解如何讓切版 1 px 也不差。

week 3、week 4(眼鏡電商

RWD 小魔王週,不同的斷點下,需調整文字大小間距等,要顧慮的細節更多。可以先掌握大方向,桌機尺寸優先設計,再來 iPad 尺寸 992px ~768px。767px 以下則皆為 mobile 樣式。可再優化 414px、375px,最小需要注意斷點為 320px。

開始使用 gulp、ejs,練習「語意化」命名,並將 SCSS 檔使用 import 拆分,讓 SCSS 檔看起來更有結構。

多頁式 RWD 網站,需要花費的心力更多,發現不會寫的地方,就去多方參考其他同學怎麼寫,也在這兩週第一次拿到助教的星星,超開心,滿滿成就感,讓我在之後的作業都想更努力的完成!

week 5、week 6(後台表單設計香水電商

開始導入 bootstrap,之前就有使用過 bootstrap,但在這兩週對 bootstrap 的掌握度又更加提昇,使用格線系統做排版,客製化 bootstrap 的 variables 變數,normalize CSS reset,並持續練習拆分元件。

自己在開發上,還是覺得花費蠻多時間(大概四~五天),所以錄製一小段開發影片給老師看,老師也非常仔細給予建議,指導在幾分幾秒應使用熱鍵,減少使用滑鼠機會,這點大概只有六角學院做得到吧,覺得在開發上非常有幫助,再加上刻意練習,速度的確有提昇。

week 7(Fixie

使用第三方套件 AOS、hover.css,做出簡單的動畫效果。

week 8

最終大魔王,完成後應該就是一個可以面試的作品!還可以兩個版型自己挑選,直接獲得兩個版型。

分享些想入坑的新同學一些勉勵的話

如果你需要大量練習,又經常懶癌發作,真心推薦直播班的課程,每週都有作業,讓你不想進步都難 XD,線上直播有問題可以馬上發問,在 slack 上發問也會立刻得到答覆,我也經常在同學的問題上又學到更多,上了兩次直播班課程,覺得六角對於新手是非常友善且系統化,有淺入深的教學,所以不用擔心學不會,只怕你不想學~

--

--