【六角學院網頁切版直播班】心得淺談

距離六角學院開辦的網頁切版直播班的正式課程結束後又過了一周，回顧一下從七月初到八月底這八周的課程強度和自身的學習狀況，我會說課程整體安排非常棒，而且課後強大的助教系統跟slack上的交流平台真的很優質，這些都是一般影音課程所無法提供的，但身為網頁設計的超級門外漢，我覺得中後期以後的課程其實對於新手來說真的太難了，比較建議已經對切版已經有點熟練甚至是懂一點JS在來上，如果是純新手(比如我)又加上並非是全職學習的話，後面幾周的作業真的會做到崩潰，因為花在上網google一些之前沒有學過的觀念或是查找除錯方式的時間大約是真正拿來寫作業的好幾倍時間，像是最後一周的作業需要用到swiper 套件，來做出滑動的效果，光是這一塊我大概就耗了一整個周日還有三個平常日晚上還搞不出來，即使求助了slack上的大神同學最後也沒能成功做出設計稿的樣子。這部分我覺得如果我能先有一些JS的基礎，在如何調整套件來達成我想要的效果或許會比較快，不過也可能是我本身對於程式在知識太過貧乏所致(笑)，只是如果有機會能在重頭上一次課的話，大概會想趕在課前先惡補好一點JS的基礎，這樣至少可以縮短後續做作業做到崩潰的時間(喂)

以下來記錄一下這幾周課程的心得。

第一周<1 px 也不差的版型控制術>

這周主要是在介紹網頁的一些基本知識，還有如何控制版型才能精準的切出想要的版型，特別是練習Kata那部分，發現自己越做越快，而且每次都能好好的使用emmet 並將每個區塊的尺寸大小控制在規範裡面時，超級開心。

說實話第一周順利過完後，一度對自己學習前端這塊的掌握能力感到信心滿滿，雖然後來就發現這一切都是錯覺…

第二周<Flexbox 網頁排版術>主要在學習flex要如何使用，我覺得flexbox超級有趣的，就幾個看似不起眼的設定就可讓物件乖乖的排在你想要的位置，簡直就是排版神氣啊。下面這個青蛙遊戲很推薦跟我一樣的新手可以去玩玩，可以練習flex技巧順便被小青蛙療癒一下。

第三周 <響應式網頁設計>如果說前兩周算是試水溫的前菜，我覺得從這裡就開始有點困難了，但也是現在要做網頁必學的東西之一。在這一周學到了如何讓網頁在不同媒介上面也能呈現美美的畫面，雖然RWD的觀念不管是之前看語音課程還是直播班課程老師超詳細的解釋，多聽幾次就能好好理解，但是實際運用起來很常就不是那麼一回事。每次就是做完PC的版型很開心，但要來做phone 跟pad 的時候就痛苦阿，另外就是因為我本身其實不是很善於規劃，是屬於邊做邊想下一步那種類型的人，所以很常會做完很多個區塊後才發現，裡面很多東西其實屬於共通特性，應該要拉出來一起設定，或是完成一部分的PC版型後，卻發現如果要考量後續的手機板型，應該要換另一個方式做比較適合… 諸如此類的事情很常發生。

第四周<多頁式網頁設計>老師分享了很多關於多頁設計的管理技巧像是非常重要的layout 設計還有神奇的gulp，可以code寫到一半按個ctrl+s後瀏覽器的網頁就自動更新成最新的畫面，省去按那個重新整理的小圈圈的時間，真的是超級完美的工具。不過可惜的是，因為直播課程主要重在觀念解說，很多細節資訊都還沒有完全掌握好，比如說ejs更深入的使用技巧、SCSS完整寫法或是gulp更細節的背景知識或是運作流程，但之後再找時間補齊吧(嗯!)

第五周<後台表單設計>講解了表單設計(重要的表單三劍客: form、input、submit~)還有介紹了bootstrap，這周課程跟前周比起來偏輕鬆，算是新手也能好好掌握的程度。

下面這張圖只是想分享一個又是快被套件搞死的故事，其實就如我剛前面說的，我對於這個領域的知識太太太過淺薄了，開始寫html跟css後，就以為全部的東西可以靠這兩個搞出來XD，結果我就在那邊下面那個留言視窗研究超久，還無法理解到底為啥同學們都可以做出一模一樣的東西，連編輯列的小icon也精準的排列整齊在那邊(到底!!) 印象中真的是研究了有超過半天以上的時間，結果後來詢問才發現，原來那個只要套一個較ckeditor 的套件就可以做出來了啊O.O!!

第六週<格線系統>也是超級重要的觀念(關鍵字：column(欄)、gutter(間距)~)，用來讓網頁元素可以乖乖排隊站在你想要在那塊裡，可以理解成像是用excel的行跟欄的關係。這周也是觀念是一回事，但實際操作又是一回事的課程，實際在做作業的時候，因為還不太熟悉多頁版型以及bootstrap的套用，也是邊摸索邊犯錯邊完成它，大約花了快兩周的時間吧，雖然很多地方不完美，像是在scss結構拆解不是很ok還間距跟版型不能完全符合設計稿(老問題了哈)等，但看到完整作品生出來的那一瞬間還是有點小感動。順帶一提，我自己把這周當成這八周切版班的小小結業作業，因為第八周真的太~難~啦~，一些常見的版型倒是還好設定，但問題就是那個讓我卡關超久的swiper。如果是懂這塊的應該都知道它其實只是一個很為不足道的小東西，但這個小東西就卡死我了，光是同一段code就複製貼上好多次，然後修修改改很多次，但就是沒辦法讓它滑動阿OAO!! 雖然後來就發現原來是我的link放錯位置了，導致效果沒有導入，但目前也只能勉強做出基礎的滑動效果，那種花式的雙欄阿、滿版外加下面多兩個小箭頭的，我真心覺得我需要整個砍掉重練，好好重頭研究整個swiper的運作模式。(請原諒我這門外漢的偷吃步心態，以為東西只要copy 貼上後就會自己有效果了O.O)

第七周<視差滾動> &第八周<CSS模組化管理>

寫到這裡有點疲乏了，最後兩周的課程就讓我稍微偷懶一下，快速帶過吧，第七周是講酷炫的動畫效果，還有最後一周的課程則比較像是觀念統整，基本上也是來補充很多基本觀念用的，但實際上的大魔王就是第八周的作業(嗯!)，對於超級新手來說，如果能做完首頁簡直就是可喜可賀阿..

以上，就是針對各周的小小心得分享。如果到了最後還想說甚麼的話，就是感謝囉!雖然因為自身平常還要忙工作，能拿來學習的時間並不多，但這八周下來倒也是收穫滿滿，感謝這段時間老師的爆肝式用心教學還有每位小天使助教，也很感謝slack上回覆我的笨問題的各位大神，好幾次作業卡關都是靠著大神同學們的救援順利闖過 (≧▽≦) 至於會不會推薦其他認識的人並且也想了解這方面的事情來上這堂課呢? 當然啦，就如我前面所說，這堂課對於全然的新手(外加本身並非是全職學習者)有點太勉強，所以這方面就… 想上課的人要自行評估一下啦，但如果本身已經有點切版知識還會一點JS，非常推薦來上這門課，相信必定會是收穫滿滿的一段旅程。