學習紀錄 ▎在職學習，我是如何完成side project的？

相信不少人在學習寫程式的過程中，光是學習知識點就已經消耗大量腦細胞，如果跟我一樣選擇自學，本身美感和創意並不充裕到可以完成一份設計稿，也不像在學校裡有一起學習的夥伴，雖然有想做side project的念頭，也會完全不曉得該如何著手吧...

那麼我是怎麼完成的呢？ 是從加入六角切版直播班開始的！

說了這麼多，到底過程是如何推進的呢？我會依照切版直播班(7/8~9/14)的每週作業進度和我自己的side project進度穿插來做分享，因為side project是這次切版班的重磅加碼，讓我練功的課程主線任務才是參加的主要目的啦！

我的程度在哪裡？

先簡單介紹一下我的自學歷程和程度，非本科系從三月份開始學習，在摸索過程中遇到六角學院，買了最基本的ＨTML和CSS課程，從基礎學起，大約在四月份完成六角學院最經典的作業－六角西餐廳（約三頁版型含RWD）。

五月份加入六角舉辦的體驗營，完成 拼拼募資網站 和 chatTalker聊天機器人 兩份作業，把RWD磨的更熟練一些，也有掌握基本 bootstraps 5 和 SCSS 的觀念，接著就順勢報名直播班了！

當時完全不知道這次直播班，居然有六角校長－洧杰老師的加碼，他本人親自帶同學們一起做side project，打造一個獨一無二，專屬於自己的作品，就只有切班的程度也能做專題，只能說這個班也太值回票價了吧！

不過老師在開學典禮也講得很清楚，想完成地獄等級作業的話，每週需要投入約20小時以上時間，不同週數之間的難易也有差別，並不保證每個人都能完成自己的side project，因為前面已經累積幾個月的知識量，覺得自己是可以完成每週地獄等級作業並且額外參加專題的，我馬上就規劃起線稿圖（捲袖子）。

直播班第1~2週 | 專題發想規劃、設計師媒合

前面有說過，side project的一切發想、規劃，都來自於自己，不過老師早已經超前部屬，提供一系列教學影片和各種免費的參考資源給我們，他也會親自跟我們討論並了解每個學生的專題內容，所有學員的專題都是公開的，我也參考了很多同學的發想，最後才決定自己的主題，這個部分對毫無經驗的新手小白很有幫助。

這次專題我規劃的是一個靜態形象網站，取名為「Sollys－把丹麥的陽光帶進你家」，動機是想幫朋友建立室內設計個人工作室的官網，架構上就是從使用者角度出發，思考一下如果自己想找設計公司，會期望得到什麼樣的資訊，附上陽春的線稿圖給大家參考：

基本上還是有考慮了自己的能力啦，整體沒有太複雜，一共七頁純切版，包括首頁、裝修案例、案例細節、裝修學堂、裝修文章，以及服務流程和諮詢表單這些頁面，給自己的目標就是完成全部的切版，並且在首頁加入一個swiper輪播套件就很不錯了哩。

很神的是老師甚至知道我們所有的痛點，讓我們規劃網站架構、畫畫線稿圖都還行，但「不會設計也不會配色」的學生要怎麼做出吸引人的作品？答案是他來幫你找設計師！這麼佛的學院找不到第二個了吧。

很幸運地我是第一批專題審核通過的學生，老師很快就幫忙媒合到設計師，在七月中就收到設計稿了，設計師會提供配色和首頁的設計，其他頁面就依照自己規劃的線稿搭配設計師給的配色去製作就沒問題了💪。

直播班第3~6週 | 自主開發、專題會議

前期直播班作業進行到第2週左右，對我來說都算輕鬆（我3小時內可以切完的程度），有充裕的時間把最複雜的 layout 和首頁切出來，先安心一半。

之後因為要繼續完成直播班3、4、5週的作業，專題先暫放了一陣子，這時候比較細碎的時間，我就會用手機寫一下專題裡面的文案或找一些配圖之類的（沒錯，連文案都要自己寫！）不然一直開發也會很疲勞，轉換不同工作也是很好的方式！

其實在職學習，要用周末時間完成這些地獄等級的作業，真的就已經很吃緊了（當然也可以完成普通等級就好）殊不知真正困難的時候現在才開始勒😭八月中的時候老師啟動了專題會議（意思是會盯人、給你進度死線了呵呵

要一邊完成第6週的程式家教作業，還要繼續推進專題進度，真的覺得時間不夠用，應該要在3、4週的時候擠時間出來，持續做專題的，就在我後悔莫及的這時候！我確診了...一整個禮拜被關在家裡（也算是因禍得福？😂）我邊咳嗽邊順利把第6週作業和專題都切完了，不然真的會難產身亡...

也剛好第6週作業有用到swiper 套件，搭配每日任務和參考其他同學的程式碼，自己也花了一些時間翻找教學文和閱讀swiper文件，有順便把專題中的顧客評價輪播部分也一起完成！這時候專題大概都成型啦~

直播班第7~8週 | 專題細修打磨

第7週的作業很簡單，第8週超級困難，因此老師有提早釋出第8週的設計稿，在八月底的時候就持續開發這份的NFT作業，花了比前面作業更多的時間，才終於交出去（擦汗），也是唯一一份沒有完成地獄等級的作業，因為要留點時間回頭來修改專題細節。

之前專題會議上老師有建議，諮詢表單的部分，我不會寫JavaScript的話，可以先串接google表單，讓這個網站能真的上線使用，中秋節連假時間，有把這部分研究了一下，雖然網路上教學的程式碼並沒有完全看懂，但我還是成功接上了（🤭

直播班收穫 | 逼自己參加side project值得嗎

先說說在切版直播班上的收穫吧，最欣慰的是自己有完成第6週－程式家教的全部頁面和效果，在第8週－Art NFT 裡學到了瀑布流、offcanvas、各種偽元素、相對/絕對定位和更進階的RWD切換效果。

切版班提供的每日任務和助教批改服務真的非常讚！後期還加開每日提問服務，讓同學可以線上問到飽呢，每次助教給的回饋都是一長串，多到我都懷疑自己的作業真有那麼多問題嗎？明明我交出去的時候都盡力了啊，但按照建議去修改之後，也會發現原來這部分還有這種做法，原來那部分可以改寫成這樣，原來我這個細節疏忽了...等等。

很多時候助教們不會直接告訴你該怎麼做，就只是建議你哪些部分可以改進，這種方式真的幫助我成長很多很多，訓練我在coding的過程中大部份時間先自己去思考、自己上網找答案，真的理解不了的時候，也學習怎麼去闡述問題點，助教們也會非常樂於幫助你解答！

再來是專題的部分，洧杰老師真的很有耐心，每週日晚上額外撥出自己的時間，線上跟「每一個」學員討論專題規劃的問題，經常都超時到我撐不住先跑去睡覺了（噓）

過程中老師也不斷在修正整個帶專題的流程，持續詢問我們有哪些可以改進的地方，像是最早拿到設計稿的我，就覺得只有一個缺點是設計師沒有給固定的間距和格線系統，響應式完全要靠手刻，我就全當練功了😂 畢竟業界上會遇到的設計師也是千百種，總不可能每次都要求別人配合自己的程度吧！提高自我的能力才是我參加side project的初衷。

做Sollys這個專案的時候，也經歷了很多自我懷疑的時刻，尤其是自己的作品已經看到膩了，突然看到其他同學的成果很棒，難免羨慕，自己的能力只能做純切版，有的同學都在用Vue 了，還是會有很灰心的感覺，但老師會不斷「打醒」我，他最常說「不用一開始就很厲害，但你要開始了才會很厲害」還會強調我們上的就是「切版班」，只要做好切版就很棒了，不需要好高騖遠！簡直是我深夜的心靈雞湯😂

在side project推進的過程中，老師不是想帶我們完成一個很酷很炫，很厲害的作品，而是做為指導教練的角色，根據每個人的程度給予適切的方向和建議，只要夠積極、夠努力，你要的資源洧杰老師會不吝嗇全部丟給你！這才是最值得的地方。

Side Project 最終成果

還記得我前面有提到，這次專題我給自己立下的目標嗎，就是切版完成，最好還能加上個swiper套件，完美！

最後的成果不只是swiper而已啦！　

僅僅是純切版的專題，我也學到很多以前不會、未曾嘗試過的技巧，也有把直播班課堂上和作業裡學到的css效果盡數用到不同版面之中，包括：

• linear-gradient
• animation
• line-clamp
• AOS套件　等等

並且額外找了地址套件twzipcode來使用，串接google 表單，組成一個可以真正上線的諮詢頁面，完全超出我當初給自己設的目標！

自己有了飛躍的進步，是我在切版班最真實的感受，也看到其他優秀同學的作品，督促自己還有很多的不足，需要更努力，我的 side project 可能沒有很厲害，不過是我還在學習程式語言的初期階段，就從頭打造，並且透過自己的努力打磨出來的作品，這樣就很值得啦！

切版直播班結束了，但我們的學習之路都還在繼續~

我是Amber，前端學習中，歡迎交流討論🧸