2020春季網頁切版直播班-八週全記錄

2020春季網頁切版直播班

前言

今天是切版直播班結業式,獲得老師頒發的最坦助教XD 也恭喜老師突破全台完課率,達到 55 %!

後來去看 Excel 紀錄,我改了 264 份作業!!(雖然還有 20 份左右還沒看,等我~) 改過的學生名字我大約有印象,也去看了一些人的心得(有看的有拍手),於是也想記錄一下自己這兩個月的心得和成長,另外在文章後段也會分享每周作業中重要的觀念,大家可以藉這篇文章檢視自己是否都有達到目標喔~

改作業的起點

在直播班正式開始前,我負責的是前段的小練習和 Flex 作業,都不算一個完整的作品,在第一週開始的時候覺得自己沒跟著做過一遍會不知道要怎麼看常見的問題和要注意的地方,也比較難了解大家可能卡住的點,所以在前幾週週末我都在做大家的作業,就這樣大概跟了四週終於終於慢慢抓到訣竅

開始直播

到了第二週因為老師想提供給大家更多的資源,所以我被老師半路推坑直播,我當下反應真的是「蛤?我嗎?」老師還笑著回答我「不然是誰XD」

驚喜驚嚇又有一點點的期待,因為知道自己不是很擅長講話,但又可以嘗試新的挑戰是難得有的機會,我的四月真的如同自己在三月底時的願望一樣,依舊充滿挑戰呀哈哈哈

還記得第一次直播完我馬上私訊洧杰說我講的爛爆了,那天直播緊張到不行,學生問我問題的時候都覺得腦袋一片空白,有時候是知道答案卻因為不知道怎麼表達讓我很困擾,臨時反應很差

老師午休時特地走過來跟我說沒關係啦,人生總是要挑戰一下沒做過的事麻!當下沒想很多只覺得很抱歉,吃午餐的時候腦袋空白到下午。後來想到這件事,覺得老師的鼓勵真的是很欣慰,讓我在之後的每週更認真準備內容,我也體認到自己的弱點和需要加強的觀念。第二週直播就順利非常多,時間掌控也抓得剛好,但那次應該真的只是剛好而已啦XD。

遇到困難

第二週作業快速增長的時候我開始有改不完的情況,甚至讓學生等我超過三四天,洧杰那時候連假日都在改作業還幫我分擔了沒改完的部分。我也反省自己是不是看得太嚴格給通過的作業很少,導致學生修改時間被拉很長,我也要花大量的時間重新看,於是讓新的作業一直被等待批改,當時老師給了我一些改善的建議,並告訴我讓每位學生都能立即獲得回饋和鼓勵才是最重要的,也因為那次機會我重新調整自己的工作順序和心態,後來已經被大家練到一天可以看完十個左右惹

成長

大約到第六週的時候,我有深刻感受到大家的程式碼都進步了,我自己也覺得有所收穫,透過改作業和回覆問題,我一直在學習理解每個人的思考邏輯、學習聆聽和想解決辦法。在技術上的成長是在第五週因為要開始使用 Gulp 和撰寫 SCSS,我在週末快速看完了這兩個六角課程,我才知道自己以前 SCSS 寫得有多爛哈哈哈,直播教學真的會使人成長,因為有責任在所以逼迫自己要達到一定的程度就會拼命學習,直播這件事也是,到後來 Ray 都說我開始可以很自然的跟大家聊天聊 20分鐘了(?
是說很感謝你每個禮拜都幫我錄影剪片、開場半小時前和我對內容,讓我在直播時對自己有更多的自信。

因為早上直播的關係人數不多,所以也不知道有多少人會去看錄影,但老師後來跟我說蠻多人有在看,這件事才讓我開始覺得內容真的是對大家有幫助的,在第七週左右的時候我開始收到一些學生的回饋,有學生跟我說很多時候都是看完直播才知道怎麼開始寫作業,好感動喔嗚嗚QQ 因為每次直播完我也不太清楚大家吸收得如何,所以收到這樣的感謝真的很開心!

另外也從老師身上學到很多教學的想法,因為目標是提升完課率和作業繳交率,中間就一直不斷地想出各種能鼓勵學生交作業的方法,每次洧杰來找我討論的時候都覺得老師真的是為這個直播班奉獻很多心力,真的很佩服他能想出這麼多招,包含最初規劃的 Boss 讓你身處打怪的遊戲體驗中、分組讓團隊合作解任務讓團員產生共患難感情進而鼓勵彼此到後來互相學習、團隊間的小小競賽、助教直播、後勤組範例給各位滿到爆的資源、影片觀看操作服務、雙倍爆擊、加開 DLC 直播(我也是就這樣再次被推下去的)最後甚至完成前四關有小禮物、六關能獲得加碼錄影等等…,大家還不寫爆作業!

特別感謝英鳴(後勤組成員)自願擔任我的小幫手,在直播前都會問我有沒有哪些地方需要協助,有兩三次還跟我一起熬夜到兩點多,有一次就是很難的第三關啦~~more 的字特效就是他幫我做的!還有葉子,常常會問他一些版型問題也都很熱心幫我看,第三週的圖片因為遇到 flex 就無法正常縮放,也是當天下班後討論了很久的東西

接著我們就來回顧一下這八週我們都經歷了什麼哈哈

八週

第一週

練習主題: margin / padding

第一週的打底真的非常重要,雖然看似簡單的主題,但是對一些新手來說這絕對是常使用錯誤的前三名。也因為是第一週,有很多小細節要講,像是標籤使用是否正確以及符合語意化學會看設計稿找出規範,這些到第八週依舊都是很重要的事,這也是我第一次直播的時候跟大家分享的內容。

另外我自己也在第一週學到 認識字體設定和 img 底下會留白這件事(到現在還是覺得很不可置信)

Demo: https://yinmin8610.github.io/hexschool-webLayoutTraining/week1/

本週的學習目標:

  • 了解 box-model
  • margin / padding 推擠方向一致
  • 抽取共同 class (container 的使用)
  • img 設定 display:block 的含義
  • 文字與文字行高的關係

第二週

練習主題: flex

作業不同於第一週全部垂直的排列,開始出現並排的呈現方式,可以練習最基本的 flex 語法。另外小任務是解 froggy 和 flex pirate ,可以幫助大家在很短的時間內熟悉 flex。

Demo:https://yinmin8610.github.io/hexschool-webLayoutTraining/week2/

本週的學習目標:

  • margin padding 和 flex 的搭配
  • 使用 flex 的垂直水平置中語法
  • 背景圖設定

第三週

練習主題: RWD

這週版型困難以外還要碰一點點 jQuery ,加上初次接觸 RWD 的人應該覺得第三週是地獄吧!我記得版型難到前三天都沒人交作業XD (後來有交作業的真的要幫你們拍手),也因為這週的種種考驗,讓大家可以檢視自己前兩週的底子是否有打穩,面對複雜的版型如何去拆解等等

直播前幾天我也一直在回想自己當初學習 RWD 卡住的點是什麼,在直播前練習表達了好久,怕自己講的內容大家越聽越不懂(表達真的好難)

這週我也有一些小收穫,像是 img 在使用 flex 下無法正常縮放,目前找到兩種解決方法,第一個是在外層加

來限制圖片區塊範圍,第二是使用 CSS object-fit,另外還有 CSS filter 的使用

Demo:https://yinmin8610.github.io/hexschool-webLayoutTraining/week3/

本週的學習目標:

  • container 的使用(設定 max-width)
  • RWD 的基礎觀念(單位 % 取代 px)
  • media query 的使用 (max-width & min-width 差別)
  • 斷點與裝置尺寸的關係

第四週

練習主題:多頁式 RWD

延續第三週版型,但是多加了三四頁內頁,這週又迎來新挑戰:使用 Gulp 編譯 ejs 和 SCSS,學生表示:「每週都在刷新三觀」

我在這之前完全沒用過 Gulp (只有接觸過一點 Webpack)趁這個機會來增加技能,另外也複習了 SCSS 重新了解設計模式 SMACSS / OOCSS / BEM 和命名規範,在學習前端一段時間後重新複習 SCSS 真的可以得到更深一層的體悟

本週的學習目標:

  • Gulp 應用
  • 拆分 layout 觀念
  • SCSS 注意階層過多問題、變數命名、檔案拆分可參考 7-1 pattern

第五週

練習主題: Bootstrap

這週要做出六角的後台介面,主要使用 Bootstrap 搭配 SCSS,介面簡單讓初次接觸 Bootstrap 的人可以在這週先快速了解元件的使用方式

本週的學習目標:

  • 熟悉 Bootstrap 元件使用
  • 模組化的概念
  • SCSS 練習
  • 表單內不同的狀態

第六週

練習主題: 多頁式 Bootstrap

這週版型算蠻有挑戰性的,結合 Bootstrap 最大的特點響應式版型。俊儀的設計稿真的很多細節,常常看到中間就會想說這邊怎麼突然變這樣了XD 我自己覺得需要對 Bootstrap 有一定的熟悉度才能快速修改成自己要的樣式,在看 Bootstrap 文件時也可以學習到他的命名方式和結構,採用 OOCSS 的設計規範,容器與樣式分離的最佳典範,我也寫了一篇介紹 OOCSS 的文章

Demo:https://yinmin8610.github.io/hexschool-week6/

本週的學習目標:

  • 熟悉 Bootstrap 網格系統、元件組成、通用類別 (utilities)
  • Bootstrap 斷點使用(從手機開始的開發方式)

第七週

練習主題: 網頁特效

Ray 先前有用過 JS 和 jQuery 各寫出一個版本(完全沒用到套件超強~~)我也希望自己這週能不要靠套件完成,但還沒完成切版哈哈,之後再附上連結

本週的學習目標:

  • 使用外部套件 AOS

第八週

練習主題: 大型訂房網

這週設計稿有超過 20 頁,包含平板及手機版型,還有非常多特殊排版的應用,很值得大家練習

本週的學習目標:

  • 元件模組化
  • 利用 variables.scss 修改自己要的元件樣式
  • 太多惹,結合以上

經歷了八週荼毒,大家可以再回去看自己第一週的 code,看著自己寫的東西如果會懷疑這真的是我寫的嗎?的心聲 ,那恭喜你 6600 花得非常值得,進步超多~~ 也恭喜完成八週的挑戰一起經歷這麼多苦難哈哈,雖然要說掰掰了有點捨不得,但是很開心能認識你們!

Bootstrap 設計模式 - OOCSS

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×