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

更新於 發佈於 閱讀時間約 8 分鐘

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


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


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

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


week01 作業截圖

week01 作業截圖

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

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

https://flexboxfroggy.com/


第一次破關畫面太難得了,所以截了圖做紀錄 21.07.09

第一次破關畫面太難得了,所以截了圖做紀錄 21.07.09

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


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


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


淺嚐bootstrap就能套出這樣的版型,覺得超級開心(雖然一些間距沒有排得很精準就是了,這也是我個人的小缺點o.o,很常會偷懶就覺得形有排對就好,區塊間甚麼的距離就…別太離譜就好)

淺嚐bootstrap就能套出這樣的版型,覺得超級開心(雖然一些間距沒有排得很精準就是了,這也是我個人的小缺點o.o,很常會偷懶就覺得形有排對就好,區塊間甚麼的距離就…別太離譜就好)

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

果然閉門是造不出甚麼漂亮的車的,靠著這堂課又衝破我的一課知識盲區啦~

果然閉門是造不出甚麼漂亮的車的,靠著這堂課又衝破我的一課知識盲區啦~

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

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

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


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

“願你始於渺小,但能終於強大” -- <so far away> Suga

“願你始於渺小,但能終於強大” -- <so far away> Suga





留言
avatar-img
留言分享你的想法!
avatar-img
日淺的沙龍
17會員
10內容數
在不用上緊發條的時光中,大約有60%的時間中活成沒有音樂就無法動彈的狀態。 不過雖然花了大量的時間在聽音樂,但真的在聽得比較頻繁的好像就是那幾首,喜好也是大約一段時間就會換了一輪歌單。 為了不讓未來的自己聽著聽著又忘記曾經喜歡過哪首歌,或是曾經為了哪段旋律著迷到無法自拔,我決定從現在開始記錄。(笑)
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
這 30 天的軟體工程師體驗營我體驗到了什麼? 一、60 小時總計超過 150 部的影音課程 這個體驗營完全適合沒有接觸過軟體程式的小白來參加,為什麼這麼說呢? 總計 60 小時的影音課程,是從安裝網頁瀏覽器開始教啊! 從基本中的基本開始,只要有心,你還會怕你學不會嗎? 當然後面的課
Thumbnail
這 30 天的軟體工程師體驗營我體驗到了什麼? 一、60 小時總計超過 150 部的影音課程 這個體驗營完全適合沒有接觸過軟體程式的小白來參加,為什麼這麼說呢? 總計 60 小時的影音課程,是從安裝網頁瀏覽器開始教啊! 從基本中的基本開始,只要有心,你還會怕你學不會嗎? 當然後面的課
Thumbnail
由於去年我是直接從JS直播班出發的,想當然沒參加過體驗營這類的短期嘗鮮課程,就抱著試試看的心態來體驗看看了,也因為我本身有一些些基礎了,這次就果斷幫自己加碼擔任志工,多多少少能幫助到剛開始就卡住的同學,希望能借著多次的經驗累積來增加我的經歷。
Thumbnail
由於去年我是直接從JS直播班出發的,想當然沒參加過體驗營這類的短期嘗鮮課程,就抱著試試看的心態來體驗看看了,也因為我本身有一些些基礎了,這次就果斷幫自己加碼擔任志工,多多少少能幫助到剛開始就卡住的同學,希望能借著多次的經驗累積來增加我的經歷。
Thumbnail
我依舊維持著修習 JS 的步伐,但我仍然覺得自己對 JS 的熟悉度不足。在 JS 班開課後,我藉由刷題庫和做 side project 專題,填補了課前的不自信感和知識焦慮。最終我們小組在 2.5 個月內開發了一個訂閱制電商網站的前後台,我也參加了 F2E week1 完賽,獲得銀級徽章
Thumbnail
我依舊維持著修習 JS 的步伐,但我仍然覺得自己對 JS 的熟悉度不足。在 JS 班開課後,我藉由刷題庫和做 side project 專題,填補了課前的不自信感和知識焦慮。最終我們小組在 2.5 個月內開發了一個訂閱制電商網站的前後台,我也參加了 F2E week1 完賽,獲得銀級徽章
Thumbnail
OBJECTIVE 除了這些技術與見識的增加,與先前學習較大的差異,會強迫自己每週撰寫ORID學習筆記,並針對每週的作業,新增至少一個教材沒有提到的功能,訓練自己查資料並內化的能力。 REFLECTIVE INTERPRETIVE DECISIONAL
Thumbnail
OBJECTIVE 除了這些技術與見識的增加,與先前學習較大的差異,會強迫自己每週撰寫ORID學習筆記,並針對每週的作業,新增至少一個教材沒有提到的功能,訓練自己查資料並內化的能力。 REFLECTIVE INTERPRETIVE DECISIONAL
Thumbnail
先說學期2-1完課的整體感覺: 非常精彩刺激!
Thumbnail
先說學期2-1完課的整體感覺: 非常精彩刺激!
Thumbnail
Google背書與較親民的價格吸引了許多對UX感興趣的人紛紛加入了學習的行列,我花了400小時以上將所有影片、延伸資料看完、也做完所有練習的詳細心得報告,希望能幫助到還在考慮要不要上課堂的廣大網友們。. “Google UX Design線上課(七大證照完整取得)心得&優缺點分享
Thumbnail
Google背書與較親民的價格吸引了許多對UX感興趣的人紛紛加入了學習的行列,我花了400小時以上將所有影片、延伸資料看完、也做完所有練習的詳細心得報告,希望能幫助到還在考慮要不要上課堂的廣大網友們。. “Google UX Design線上課(七大證照完整取得)心得&優缺點分享
Thumbnail
距離六角學院開辦的網頁切版直播班的正式課程結束後又過了一周,回顧一下從七月初到八月底這八周的課程強度和自身的學習狀況,我會說課程整體安排非常棒,而且課後強大的助教系統跟slack上的交流平台真的很優質,這些都是一般影音課程所無法提供的...
Thumbnail
距離六角學院開辦的網頁切版直播班的正式課程結束後又過了一周,回顧一下從七月初到八月底這八周的課程強度和自身的學習狀況,我會說課程整體安排非常棒,而且課後強大的助教系統跟slack上的交流平台真的很優質,這些都是一般影音課程所無法提供的...
Thumbnail
參加六角學院的 JS 工程師養成直播班,課程由洧杰老師擔任授課老師,總共有九週的線上直播課程以及課前知識補充的學習影片,與大家分享此次直播班的簡單心得
Thumbnail
參加六角學院的 JS 工程師養成直播班,課程由洧杰老師擔任授課老師,總共有九週的線上直播課程以及課前知識補充的學習影片,與大家分享此次直播班的簡單心得
Thumbnail
【實體課程?線上課程?別再挑錯課程了,確保你三大選課準則都有符合!】 今天這篇文章將與你分享我透過「實體課程和線上課程的兩點學習心得」,還有「三大我選擇一門課程的基本準則」,希望給每個極力學習成長的你一些收穫與幫助,少走一點彎路。 下篇文章預告:將於1/20(三)早上7:30發佈
Thumbnail
【實體課程?線上課程?別再挑錯課程了,確保你三大選課準則都有符合!】 今天這篇文章將與你分享我透過「實體課程和線上課程的兩點學習心得」,還有「三大我選擇一門課程的基本準則」,希望給每個極力學習成長的你一些收穫與幫助,少走一點彎路。 下篇文章預告:將於1/20(三)早上7:30發佈
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News