網頁切版直播班心得 - 2021 夏季

Cate
14 min readJul 2, 2021

--

真心感謝六角學院的所有人 🎁

報名動機

接續 UI 設計觀念必修直播班的課程之後,就連著投入六角的網頁切版直播班,剛好在離職後無縫接軌學習,也讓浮躁不安的心情稍微平穩下來,把精力投入在學習新技能這塊。

而在為期八週的訓練期間內,六角還推出了兩項免費活動 — — Vue 3 新手夏令營六角筆記王,以及全新錄製的 JavaScript 課程,再次感嘆六角提供的前端學習資源跟辦活動的熱情衝勁,讓整個學習氛圍非常熱絡。不過因為之前分心學習的經驗,讓我知道人的精力的確有限,至少對我來講能把切版班的知識量跟作業完成就是個奇蹟了,尤其是越後面體悟越深,跟 UI 直播班比較起來,沒有任何切版實務經驗的新手真的超級挫,以下就紀錄這八週以來的心情起伏,真的是想大喊:「這就是人生呀!😂」

因為有設計背景就選了設計魔劍組,喜歡有魔法攻擊的職業 🔥

第一週 :1 PX 也不差的版型控制術

小細節也不能馬虎 🔍

難度:⭐

你不需要一開始就很厲害,但必須開始才有辦法很厲害。 — — 《校長語錄》

在正式開課前,就已經有課前影音教學可以先複習基礎觀念,以及課前最終作業可以練習,在學習銜接上難度不會差異太多,這週主要是些切版細節上的補充。

這週作業分兩部分,一個是個人履歷的切版練習(也同時是課前作業的版型),另外一個是是校長新增的 pixel perfect kata,刻意練習 Emmet 在最短的時間內切完版型,自己也從最初的 30 分鐘,到最後可以在 10 分鐘以內完成。 Slack 上也出現許多勇者挑戰速度的極限,每天登入 Slack 都感覺到大家熱血挑戰的精神(整個刷成一片),一瞬間覺得好像來到了不得了的訓練營,心想六角果然是前端教學的大本營,大家整個鬥志都被激起來了!

從 Slack 也可以看出小組的討論氛圍也很活絡,還有些人會把筆記分享在 Slack 上,不單只給自己組員看,也發現直播班上不時會有人分享自己整理的筆記心得或資源攻略,有時卡關沒靈感就上 Slack 滑一下,也會找到解方。

本身小組活動就沒參與了,在開課前會先 mail 問卷調查是否要進行分組。雖然全職學習時間上算是充裕,但我習慣照著自己步調行事,而且 Slack 上也可以發問或是觀看其他人的討論串,資源算是很充裕。不過也是很多人在小組活動中找到一起奮鬥的夥伴,學習路上有伴還是比較有動力 🙌

🔎 第一週 :個人履歷

切版班正式的第一份作業!🚀

第二週 :Flexbox 網頁排版術

Flexbox 在排版上非常重要 👀

難度:⭐⭐

不與他人比較,專注跟過去的自己比較。 — — 《校長語錄》

這週專注在講解 Flexbox 這塊本週作業來講難度比起第一週提高些,須了解哪邊該下 Flex,還要知道主軸交錯軸之間的關係,透過六角學院的 Flex 小工具以及 Flex 小遊戲能更快釐清基本的觀念。

透過小遊戲加深觀念 ⚓

此週開始每週二中午也會加碼助教直播,會補充直播班中未細講的觀念,以及主線作業該如何去解題,對於新手來講幫助很大。聽著穎旻助教分享的直播,默默地想著六角學院的助教怎麼都這麼年輕可愛!(重點歪),想起 UI 直播班上 Joanne 助教也像個小天使般關心著大家,跟講課內容扎實有趣的講師們相比,又是另一股心靈的調劑呀 🌹 連幫忙批改作業們的助教們,也是各個熱心親切,能讓人更放心的提出問題,所以同學們發問都很踴躍呢!

🔎 第二週: 個人網站

又是 Joanne(笑)

第三週:伸縮自如的 RWD 手機網頁排版術

RWD 讓你三個願望一次滿足(?)

難度:⭐⭐⭐

第三週來到現代網頁必備的響應式設計,必須針對不同斷點去做規劃設計,也就是同樣一個頁面,還要另外設計在平板跟手機的版型,燒腦的程度也跟著提升!😵

至於主線作業的設計稿頁數,也不再是單頁而是多頁式,所幸這週跟下週作業都是同一份設計稿,還可以一併在第四週繳交,於是我選擇了花費多一點時間,雖不至於全切完(本來有這打算,但最後快崩潰就臨時修正計畫 😂)也至少切了五頁出來提交。

本週校長提醒千萬不能出現以下狀況!

網頁有 x 軸,有的話會被釘在牆壁上。 — — 《校長語錄》

熟悉的名場面(?)

第四週:多頁式網頁設計

此週還開始嘗試使用 Sass 寫法,觀念多多的一週 🤓

難度:⭐⭐⭐⭐

算是直播班開班以來的第一個大魔王關卡,因為有多個分頁互連,勢必不能再歡樂的使用 CodePen 提交作業 (真的好方便 😭),本週一定要使用 Gulp 來管理上傳網頁,開始跟 GitHub 培養感情。校長前幾週就千叮嚀萬交代,說一定要提前預習 Gulp 的影音教學,後來又追加補充一批影片,就是為了讓學生們能順利學會 Gulp 這項技能。

很像飲料店 Logo 的 Gulp 🥤

Slack 上也常常看到同學們卡關發問的訊息,自己在安裝時也曾一度卡關,後來看了補充的常見問題整理集,也順利排除問題,學會了上傳多個網頁,才開始有些小成就,六角提供的影音資源真的很多呀!也會把同學們常見的問題整理起來,再一併分享出來提供解方。

另外這週直播日隔天,剛好有 Vue 作品實戰班 的作品發表會,校長問過副校長能不能也開放讓切版班的同學參觀,最後也順利透過直播方式見識到各類型的好作品,最佩服的是這些發表的同學們,不管是網站美感或是功能規畫上都有一定水準,又擁有寫出一個網站的能力,還會後臺管理(都有上架商品跟購物功能),讓我想起之所以會選擇六角學院,也是當初看到作品牆上有許多不錯的作品,很佩服大家創作的毅力與想法,覺得程式跟設計很像的一點就是要持續輸出,對作品要有自己的想法,久了就會找出自己的風格,感謝開放讓切版班的同學參與作品發表會 🙏

🔎 第四週:多頁式 RWD 網站

老天,看了好幾天的眼鏡官網 👓

第五週:後台表單設計

六角學院的後台設計真是太有材了 👍

難度:⭐⭐⭐

這週主力在介紹表單標籤Bootstrap 初步入門,作業內容是要切出後台版型,上課時還透露六角學院的後台管理介面,隱藏各種有趣彩蛋(雖然校長整個被後台設計氣瘋,爆氣的校長讓大家喊上課就是要這味 XD),每次聽著校長講課,就覺得有種個人魅力,又很貼近大家的心,六角學院裡面有幾位講師上課氛圍都不同,但相同的是都讓人會想繼續聽課下去,期待每次的教學,在眾多的線上課程中累積不少忠實粉絲 🎵

而這週作業在實作方面,反而讓我有點障礙感,一方面是要學習用 Bootstrap 內建的變數與規範去設計,另一方面是看到表單腦袋就有些卡住(那些標籤跟值看得頭發暈),中間也使用每日助教服務,把問題貼到 Slack 上發問,當日的助教也很快就回覆,六角的助教真的各個是天使(再度感動拭淚),最後以最低標準完成這週作業。

🔎 第五週:後台表單設計

Modal 效果我沒做 😂

第六週:導入網頁規範設計流程

Bootstrap,我實在摸不透你 🙄

難度:⭐⭐⭐⭐⭐

繼上週初步認識 Bootstrap,這週講到更多 Bootstrap 的設定,像是格線系統,如何規劃斷點設定,跟怎樣去修改內建變數

這週作業難度也是難度比較高的一週,因為比起上週後台設計不用做響應式設計,這週需要做出響應式版型,而且設計稿只有 PC 版跟手機版,中間的平板尺寸需要自行通靈做出 (校長曰 :孩子們,這是業界常態!)

所以這週我整個發懶,除了一開始的上課筆記整理好後,就開始東摸西摸,甚至開始超前部屬(?)先打起心得文來 ,連上 Slack 做每日任務時,看到認真發問的同學們不禁心裡有種罪惡感 😱

不過有預感再研究下去,會超越崩潰臨界點 🤣🤣🤣

我得了一種看到程式碼就會昏迷的病 🤒

第七週:視差滾動

動畫是客戶最喜歡功能 ✨

難度:⭐

這週終於講到網頁中最吸眼球的動畫效果,像是 Animate.cssAOS 視差滾動,快速好上手實用性非常高!而且作業可以套用之前做好的網站上交,整個很歡樂的一週 😆 (也有新版型可以練習,整個簡約時尚很好看 🚲)

週五晚上下課就有許多同學繳交了,我也在隔天複習完影音做完筆記快速地完成,此週我已經下定決心就放掉第六週跟第八週的作業,繼續解每日任務,最後把心得文好好寫完收尾。

🔎 第七週 :視差滾動

第八週:CSS 模組化管理

專業的來了 😎

難度:⭐⭐⭐⭐⭐⭐(爆星)

這週算是整合前面的知識點與講解設計模式,懂得切版之後,要怎樣進一步讓自己的程式碼顯得專業好管理。

最後的最後也少不了精神喊話,只剩最後一週的繳交期限,校長還特意在直播前一天釋出最終版型(新主題是瑜珈),果然 30 頁的設計稿不是蓋的,膜拜完最新版型,我就摸著已經不會痛(?)的良心,繼續撰寫心得文,已然進入靜養模式,標準的:面對它、接受它、處理它、放下它 ️🧘‍♂(胡說)

最大的收穫

除了學習切版的專業知識,學習習慣的養成是參加切版班後,意想不到的最大收穫。

參加切版班後,才逐漸養成寫學習筆記的習慣(已經不想花時間在通靈回想這塊,寧可乖乖做筆記 😅),目前切版班是用 HackMD(複製老師、同學們的筆記比較方便 XD),切版班結束後打算改用 Notion,複習之前買過的線上課程,做成筆記方便重溫知識點 ✍

也很喜歡寫感想文,把自己學習過程做個紀錄再來回顧也很有趣,不管是開心或難過都仔細地記錄著,因為本身就很喜歡閱讀,最近也發現寫文章時,會不自覺進入一種心流狀態,持續輸出對於成長學習都很有幫助。

而切版班中,每週一到週五也會有每日任務 (六、日是休息日),對於新手幫助很大,不會花費很多時間,但每天都可以學到一個新觀念,長期累積下來,不知不覺也解了很多小任務,跟做筆記一樣回顧起來都會有種小成就呢!

每日刻意練習一點,短時間內雖然不會很顯著,把時間拉長下來就會感受到成長。像是訓練菜單裡面有英打練習,剛開始打得很慢,一個月後英打的速度是當初的兩倍以上。最初也是速度慢到很想放棄,但後來換個心態,只要每日練個 10 分鐘就好,先讓自己大腦習慣,把目標難度降低後,反而可以持續下去。目前也是將這套原理代入其餘想養成的習慣,只要每日 10 分鐘就行,先讓自己養成習慣最重要,真的有興趣就會不自覺把練習時間拉長 💪

隨著完課率上升也能取得更多獎品 👑

結語

校長在直播時,有提及關於比較的心態,由於我之前工作上在網頁切版方面沒任何經驗,也只有在今年初時,完成六角學院使用 HTML、CSS 開發一個網站的課程。

在懵懵懂懂的狀態下參與了這堂直播課,雖然說也有不少新手參與,但更多的是已經在工作上有過切版經驗的人,或是已經投入前端學習一段時間,想繼續補強實力;亦或是同樣是新手,但對於學習非常的有熱誠,參與的積極度相當高,與單純想嘗試網頁這塊的我相比,就感受到決心的差異。

看著彼此間的差異剛開始會感到挫折,但仔細想想我參與這堂直播課的目的,一方面是想藉由直播班的安排規劃,短時間內提升對網頁切版的相關知識,同時也是讓自己去思考是否能從中找出興趣來。

就算自己最後沒往前端領域深造,但是比起未加入六角學院前,對網頁一竅不通的那時比起來,現在的我已經懂得用 Google Chrome DevTools 去看別人網頁是怎麼寫的,也練習切版過一些網頁,對 HTML、CSS 這塊有基本的認識。

之前就一直覺得工程師是很迷的生物,他們看著那些程式碼,腦袋到底在想些什麼呢?🤔 (好奇寶寶開關 on)

上完直播課更加佩服工程師,每天看著程式碼不斷除錯,想辦法嘗試效果並解決問題,不管是上直播課或是在 Slack 上,看著大家熱烈地討論著程式碼該如何拆分撰寫,忽然有種格格不入的感覺,這到底是什麼異世界!😂

我是誰?我在哪?我在做什麼?

有時會提到跟設計師合作的經驗,看來想嘗試「物理溝通」的工程師不在少數(心驚),此時我心理默許著,未來還在設計領域發展的話,希望能成為一位及格的合作對象,我還需要抱緊工程師的大腿一起合作呀 🤣

最終奧義「物理溝通」💪

同時我也發現自己心裡一直掛念著設計這塊,每次直播班最期待就是打開設計稿那一刻,很喜歡看別人的設計,加上之前也是學設計的,雖然因為工作性質自主設計的時間比較少,大多時間都是利用現有的素材來做規劃,也因此雖累積了多年的工作時間,相對的創作實力並沒有一併累積起來,不管是想法創意或是設計產出能力,都離理想中有很大的差距。

切版班進行到越後面,就越是讓我想回到設計這方面,因為年齡關係會對自己感到很焦慮,什麼都想掌握結果沒有一樣精通。一直很佩服設計與程式雙管齊下的人才,可是實際專心研究切板好幾個禮拜,逐漸遠離設計這件事讓我很難受,變得更加焦慮。

也體悟到要走前端這條路,勢必得把許多技能點上去,如果沒決心又沒熱情的話,很難突破瓶頸,最終放棄的可能性很高。如果真的要選擇一條辛苦的路,那我想在設計這條路繼續努力看看,逐漸補齊之前所累積的技術債,也開始練習專屬於自己的創作 🎨

感恩的心

六角香不香?比八角香喔(欸)

網路上看到很多六角學長姐的心得文,看久了難免會懷疑業配的可能性,但實際加入後卻也成為推廣六角學院的一員(撥瀏海)

說穿了,就是單純的受到了幫助,就會想回饋對方的心情。

出社會久了就會逐漸知道很多現實面,對於人性也會開始產生動搖,都會想著對方應該是想從中獲取些什麼好處,思考逐漸變得複雜起來。

但相對的,什麼是真心,也能從經驗中逐漸學會判斷。

特別是直播班的設計模式資源量,是能讓有心變強的人短時間學好學滿(雖然我不是那個有心人,我是變心人 😂)助教們回訊息跟批改作業都非常用心,很仔細的檢閱每行程式碼,再列舉建議讓你知道如何做會更好,連校長本人也親自跳下海來幫學生檢閱,哪個單位請了一群助教,本人還來批改學生作業啦!(尤其後面的作業批閱都半小時起跳的),整個住在切版星球上的校長,到半夜都還在回覆學生訊息,沒看過反過來被學生關心的老師,校長拜託你早點睡好嗎!🤣

雖然最終我沒把所有的作業完成,只完成了 80% 的任務。不過每日任務我是每出必做,也好好參與每次的直播(個性比較低調都沒發言 💦)最後的心得牆是我能好好把握說出內心話的時刻,我也想反饋些什麼,讓六角學院的大家知道又幫助到一位學生,謝謝你們。

今年加入六角學院這件事是最棒的選擇!尤其參加直播班的效果,比起一般影音課效果好很多,不管是課程作業的進度規劃,強大的線上助教服務,以及眾多的學習資源,絕對值得這價格,從中學習到不止是技術層面,更多的是自我成長的心態,今後還是會繼續關注六角學院的成長跟活動的 :D

感謝洧杰校長創立了六角學院,召集了這麼優秀的夥伴們一起幫助大家,能感受到校長是真心想要提供一個好的學習環境,讓更多人一起學習成長,謝謝校長提供這份資源環境,雖然很擔憂校長身體,實在太拚了啦!不時聽到校長傳來的咳嗽聲,大家會心疼啊!😭

最後感謝六角的所有成員們,盡心幫助每一位學員,你們真的很棒!💗

只要你願意在這條路走下去,我們就不會放棄你。 — — 《校長語錄》

大家來一起打怪提升經驗值吧!( •̀ ω •́ )✧

--

--