###### tags: `網頁切版直播班 - 2021 夏季班`

# 網頁切版直播班課程心得-2021六角學院夏季
> 校長語錄
> 你不需要一開始就很厲害，開始才會厲害。
> 不與他人比較，專注跟過去自己的比較。
## 一、八週心路歷程
結束了八週的網頁切版旅程，可說是幾乎天天熬夜寫作業啊🥺~黑眼圈增加不少，每週都感覺有學不完的前端知識，但是都要告訴自己撐住，最後也順利完成每一週的作業，讓我學習到很多，成長多多👏，在這之中也透過小組討論，組員們都很親切願意分享，會分享不同的想法去討論要如何去做，最後也找到之後可以一起學習前進的夥伴，在這要感謝組員們💞，同時也要感謝六角學院的住在slack上的校長老師、助教、同學們，只要每當在寫作業時遇到問題，不管在甚麼時間都幫忙看程式碼幫助我解決問題，讓我能順利完成每周的作業👍。

## 二、第一週~第八週的學習歷程

### 第一週 1 px 也不差的版型控制術
:link:[第一週-個人履歷作業](https://codepen.io/jhoujhou-the-decoder/pen/zYwvybB) :link:[pixel perfect kata影音練習](https://www.youtube.com/watch?v=_uwBpg504Aw)
這週應該是我最輕鬆的一週:laughing:，之前就有課程預習，學習到透過box-modal概念在版型排型時不會跑版，另外老師也特別辦了pixel perfect kata活動，透過emmet去鍛鍊自己寫網頁的速度。

### 第二週 - Flexbox 網頁排版術
:link:[第二週-個人網站作業](https://codepen.io/jhoujhou-the-decoder/pen/YzVGWPe) :link:[Flex網頁排版屬性圖解筆記](https://hackmd.io/@JHOUJHOU/r1c9hRxzK)
Flexbox之前有學過，但不是很熟，透過第二週的課讓我再重新學習Flex主軸與交錯軸、外容器container觀念，如何讓內元件在外容器中排出想要的版型位置。另外也學習到了用[CSS background在HTML在入圖片](https://hackmd.io/@JHOUJHOU/rJWFbDe0u)。

### 第三週 響應式網頁設計 & 第四週 多頁式網頁設計
:link:[第三&四週-眼鏡官網作業](https://jhoujhou.github.io/rwdmaintask/):link:[RWD響應式-使用者體驗](https://hackmd.io/@JHOUJHOU/HJLxPIgAu)
這週的課開始漸漸變難，開始熬夜之旅😭，在之前都有聽過RWD響應式網頁可以依不同裝置大小顯示網頁不跑版，但都不知道如何寫出來的，透過第三週的課程學習到使用@media、斷點設計去寫出響應式(Responsive Web Design)網頁，也透過作業的練習更佳熟悉，雖然並了解到CSS權重覆蓋的觀念，避免寫了樣式卻不知為何沒有被吃到。同時老師還有再提供[Gulp前端任務管理工具、EJS模板、SCSS的教學](https://hackmd.io/@JHOUJHOU/weblayoutclass/https%3A%2F%2Fhackmd.io%2F%40JHOUJHOU%2FBJtYOPW0O)，也讓我學習到可以透過gulp簡單的指令就可以將程式上傳到GitHub產生網頁，也透過EJS讓多頁面的網站如有共同區塊(如頁首頁尾)可以不用每頁都寫，只要改一次全部頁面都修改到了，另外還有SCSS結構用途及要如何去拆分，去減少重複用的CSS，去建立共同的元件使用。

### 第五週 - 後台表單設計
:link:[第五週-後台表單設計作業](https://jhoujhou.github.io/BS5maintask/admin.html#)
這週是Boostarp 5的元件、通用類別應用，像是input表單、Modal等，從如何載入到應用在網頁上的效果，並學習到如何去修改boostrap SCSS中util，修改後可以讓網頁依照自己想要的樣式效果去呈顯。

### 第六週 - 格線系統
:link:[第六週-藝術展覽作業](https://jhoujhou.github.io/gridtraining/)
這週也是與Bootstrap有關，是學格線(Grid)，透過格線系統可以減少用margin、padding的推擠去完成網頁排版，並且透過修改SCSS中variables，來去針對設計稿中的樣式去修改，並且也可以用格線套用斷點，不用自己設定斷點再去寫CSS樣式。

### 第七週 - 視差滾動
:link:[第七週-視差滾動作業](https://codepen.io/jhoujhou-the-decoder/full/qBjWBwz):link:[透過CSS做出視差滾動(Parallax Scrolling)筆記](https://hackmd.io/@JHOUJHOU/parallaxscrolling)
這週教的會讓網頁變高級喔✨，學習了animation相關屬性設定，並使用[AOS.css](https://michalsnik.github.io/aos/)套件，套用在第一週的作業中讓網頁變成有動畫效果，讓網頁動起來🤹。
### 第八週 CSS 模組化管理
:link:[第八週-大型線上服務-瑜珈官網作業](https://jhoujhou.github.io/yogawebtask/index.html)
這週給我自己的目標是將設計稿全部頁面做完並且將前幾週所學習到的RWD、SCSS結構、Grid、AOS動畫等套用進去，熬夜多天終於做完了🥱，雖然還有部分不太對後續再來慢慢修改，感覺自己有小小的進步🏃。這週也講解道OOCSS設計模式，但是我還是不太熟悉，需要再多多複習課程了。