網頁切版直播班心得

chiayu
Dec 8, 2020
Photo by Ilya Pavlov on Unsplash

當初為什麼報名這堂課?

踏進這個領域也已經兩年多了,因為一直都屬於個人開發,從設計到切板都是屬於我ok就ok的狀態,所以沒有太注重在程式易讀性或是複用性上,往往都是頁面呈現出來了,但背後的程式碼就是那種如果進到團隊開發會被同事釘到牆壁上的糞code 😂,這個時候剛好出現了六角的網頁切版直播班,看看課程內容感覺很實用,再加上是直播的方式上課,能強迫我這個拖延症加上懶癌末期的人上課,也想藉由這個課程,補足我至今可能一直都忽略的細節,就這樣,開啟了我維持八週的旅程

第一週~第八週的學習過程

第一週&第二週

對我而言還算容易,但對於css的命名有了大大的轉變,
想當初我也是那個喜歡命名.lefe、.right、.list123…的那種,方便又快速,所以老師在直播中說這樣的缺點的時候,默默地中了好幾槍😅 不過也藉由這次機會,強迫自己拋棄這種命名思維,雖然後來想名字真的想得很痛苦,但可能1年後回來看自己code的我會感謝現在痛苦的自己

第三週&第四週

這時候開始進入大型網站和RWD,我彷彿到了另外一個世界,開始導入bootsrtrap、gulp、ejs開發,每天都是在思考哪些地方可以用util哪些地方可以拆成元件增加複用性、以及如果減少page、layout的css,以前都覺得bootstrap不就那樣嗎我應該會用了吧? 後來才發現是我太天真了,透過這兩週,讓我重新認識了bootstrap也學會了如何客製成自己想要的樣式,這兩週也練習了如何拋棄css語意命名,專注在util上,一個class就專注在一件事情上,當然這過程也會有陣痛期,當我的code從

<div class=”box”></div>

變成

<div class=”bg-primary text-xl py-2 mb-3"></div>

免不了還是會自我懷疑一下,但後來了解util之後,就會慢慢習慣了😂
甚至會有點上癮(?

第五週

第五週進到後台網站切版,學習要如何與後端工程師溝通,以及之前一直似懂非懂的form、input運用,也練習如何使用bootstrap寫好的component,加快切版速度

第六週&第七週

導入bootstrap的格線系統,在這個時期經過前面幾週的磨練(? 對於util以及component有了一定的了解,所以在切版上有感覺到速度明顯的加快了,這時候就是專注於有沒有哪裡的程式碼可以更簡化以及再次練習元件的拆分,這時候看到自己的css切分,有系統多了😂,看class名稱基本上就能知道在控制甚麼樣式,再加上簡單的動畫效果,讓整個網站的質感都提升了不少

之前對於OOCSS、BEM、SMASS這些名稱都是很模糊的,透過這幾週其實這些觀念都在默默的灌輸給我們,當我回頭看的時候才發現自己早就在運用了,只能說老師真的佈局的很用心!

第八週

這週就是個大魔王,前七週學的全部要在這時候拿出來了,同時也可以檢視自己哪裡觀念還很模糊哪裡還可以加強,同時也把之前學的觀念再複習一次加深印象

最大的收獲是?

這八週下來,回頭看看自己上課前的網頁,再看看自己這八週的CODE,真的明顯感覺自己進步了,之前還有很多模糊的觀念,當別人問我block跟inline的差別時,終於能用白話文解釋一遍了 😂

老師一直強調的刻意練習,無論是英打還是emmet都幫助很大,在util和component上,我也秉持著刻意練習的精神,讓自己能做到不要有layout和page這兩個css資料夾,雖然過程真的很痛苦,有時候真的很想每個page就有一個對應的css,能快速解決很多事,但這樣就失去刻意練習的意義了,所以還是含著眼淚強迫自己寫在util或是component裡😂,不過也因為這樣的練習,讓我對util和component更熟練

通過八週的作業累積,也默默地收集了自己的作品集

最喜歡直播班的哪些活動?

不得不說六角的直播班真的很棒,人數眾多的助教群,隨時在線上回覆問題,還有300多人的slack群組,當你有問題時在上面發問,都會有好多熱心的同學回覆,感覺就是沒有slack解決不了的問題😂,一個人學習可能會怠惰,但當你知道有那麼多人跟你一起努力時,就會覺得自己不努力不行,再加上看著同學一個一個的完成作業,也會燃起自己也要盡快把作業交出去的決心,而且還有老師助教的code review,讓我更清楚知道哪邊語意可以再改善,哪邊寫法可以更好,而且在期間內是沒有次數限制的,提交幾次老師助教就看幾次!!

同學的作業也是公開的,當自己在做作業卡住時,就可以去參考其他人是怎麼做的以及老師助教給了那些建議

還有一些精神糧食,當我的作業得到老師或助教的星星時,我彷彿得到了全世界 👑 👑 👑

當然還有一些額外的bonus,不過這就留給有興趣的人去探索了 🤣

分享給想入坑的新同學

如果你覺得你要先有些底子才能參加,真的不用~~
在開始上課前會有課前影音及作業讓你入門,直播課也是循序漸進的,課堂中有問題發問老師也會即時回覆問題,還有助教群和300多位同學是你的好夥伴

想當初我也是還停留在.left、.right命名方式的人,現在整個都不一樣了🤣

不過必須要有一個心裡準備,接下來的八週會長期與code為伍,為了能吸收當週觀念,真的需要花時間去練習,基本上下班回家就是繼續寫code,為了交出作業真的能廢寢忘食了(誤,偷偷說我連上班都默默地在做作業(對不起老闆😂,但得到的遠比你想像的多!

最後的最後

必須說刻意練習真的真的很重要,刻意的過程或許痛苦,但之後都會變成一種自然,會慢慢變成自己的一種習慣,到那個時候在切版上就會變得越來越順手

當初參加的原因就是覺得自己寫的都是糞code,沒有辦法團隊合作,課程結束後,我認為自己的code稍微有系統了,很多觀念也釐清了,在bootstrap運用上也更得心應手,真的收穫了很多,接下來還要繼續參加JS直播班!

300多人都在努力,我怎麼能不努力

--

--