【2020六角前端】網友5顆星推薦 切版班!心得、評價、懶人包、體驗

六角學院網頁切班直播班

前端切版班練習 六角學院 學案 作品 課程 線上課程

#使用web story做了一款心得 ,想看滑動、圖片、簡單說明的可以點擊連結

(一)切班直播班內容:

⋄報名動機:報名一開始動機是因為在前公司當PM,想加強自己對前端切版的知識以及實戰能力,更加知道如何跟網頁設計師、工程師溝通。

⋄課程介紹

⋄上課時間:每周五晚上8:00~10:30(每次結束時間不一定、老師也會提早開始、大約7:40進Zoom,我自己是下班後,回到家邊吃飯邊打開Room看課程)。

⋄上課方式:六角會發送信件,可以登入信件的網址,就可進到Zoom做直播上課,如下圖。

⋄上課流程:晚上8:00用六角系統報到、老師會貼上課報到碼。

⋄上課講義:老師每次上課前會貼在六角製作的後台中,如圖。

▲六角學院-直播班講義、任務牆

⋄小組分組:六角學院會依照學員們背景分成全職鬥士、轉職忍者、軟工盾坦、學生劍士、斜槓煉金組,每組一位指派組長,加上6-7位組員,每個禮拜都有小組討論及小組任務。

⋄老師加碼課程:課前影音課程、助教直播、每日任務挑戰、一次問答討論會(地點在台北)

⋄老師加碼獎品:

⋄課程大綱

週次內容
第一週-
1 px 也不差的版型控制術
作品主題:履歷設計
教學關鍵字:
盒模型、line-height 行距計算、vertical rhythm (垂直韻律)、display 狀態、CSS 實務選擇器技巧、圖文排版技巧
第二週:Flexbox 網頁排版術
李小龍說過:「我不害怕曾經練過一萬種踢法的人,但我害怕一種踢法練過一萬次的人」,網頁排版擁有 float、inline-block、flexbox、grid 流派,但是你真的有認真將一個流派專精到讓人會怕嗎?本週題目我們將會詳細講解 Flexbox,並藉由後面幾週的反覆練習,讓您成為 Flexbox 的切版專家!

作品主題:個人網站
教學關鍵字:
Flexbox 排版技巧、水平與垂直置中、常見版型教學
第三週:伸縮自如的 RWD 手機網頁排版術
行動裝置這麼多,你的網頁在 全部螢幕解析度都支援嗎?還是你只會下 一個 手機版 media query,而 中間的 size 都忽略了?其實 RWD 沒你想像中的複雜,讓我們來教會你!

作品主題:RWD 形象官網
教學關鍵字:
media query、SCSS 、使用者體驗、表單設計
第四週:多頁式網頁設計
去面試時準備的作品,永遠只有一頁個人介紹網站嗎?頁面一多就不知道該怎麼管理你的 CSS 了?這堂課我們將會分享心法與工具,讓你頁面再多也不怕!

作品主題:多頁式 RWD 形象官網
教學關鍵字:
gulp、多頁設計、SCSS 管理、layout 版型規劃
第五週:後台表單設計

一個完美的前台,一定會有個維護方便的管理後台方便上稿,也同時會是你與後端工程師協作時,必須要會的版型設計!

作品主題:後台頁面設計
教學關鍵字:
Bootstrap 元件運用、表單使用者體驗、jQuery 動畫設計

第六週:導入網頁規範設計流程
當你頁面數量不是 3~5 頁,而是 30~50 頁以上,該如何制訂規範,讓產出的網頁都能模組化輸出,進以提升效率,也是網頁設計師需考量的一環!

作品主題:電商網站
教學關鍵字:
SCSS 自訂 Bootstrap、格線系統、版型管理術
第七週:視差滾動
在 2020 年,網頁已經擺脫中規中矩排版,我們能藉由簡易的 JS 套件,讓自己的網頁具有動感,設計出具備視差滾動技巧的優美網站!

作品主題:產品介紹網站
教學關鍵字:
熱門視差滾動套件、JS 瀏覽器控制
第八週:CSS 模組化管理
一個成熟的前端介面,不論是版型管理、語法支援度、元件應用都得顧及到位,本週將會詳細介紹各角度的技術詮釋,以做為完美的收尾。

作品主題:大型訂房網站
教學關鍵字:
SMACSS、OOCSS、Template 元件設計

(二)各週作業心得:

  1. 第一週的功課是做出一頁式履歷
第一週主要功課示意圖
▲第一週主要功課示意圖

功課困難度:★

心得:對於細節的把握度要注意,我這週主要在細節沒有掌握好orz我覺得之後若有時間,我會嘗試練習使用scss製作,加強對scss的寫法練習。

2. 第二週的功課是做出個人網站

第2週主要功課示意圖
▲第2週主要功課示意圖

功課困難度:★★

心得:我主要對於一開始先畫一張簡單的示意圖,大致標註html的結構,寫了才發現,時不時少包一層div,規劃結構的能力是我這週所欠缺的;此外,也在練習flex的應用,flex真是大家的最愛,好用且方便、省時。

3. 第三週的功課是做出RWD網站

功課困難度:★★★★

心得:老師這週幫我們分級,依照自己的狀況決定要提交的等級

  • LV1:只做 header 與 footer 的 RWD
  • LV2:任選一頁,僅做 PC 版型
  • LV3:任選一頁,需含RWD
  • LV4:做二~三頁以上的 RWD
  • LV5:所有頁面都有設計

4. 第四週的功課是做出RWD網站

  • LV1:任選二頁,只需做 PC 版
  • LV2:任選二頁需含RWD
  • LV3:做三頁以上的 RWD
  • LV4:所有頁面都有設計
第3週和第4週主要功課示意圖
▲第3週和第4週主要功課示意圖

功課困難度:★★★★★

心得:嚴格說來,第三週和第四週的功課都是把RWD網站完成,我覺得主要困難度在於對RWD的掌握,我這次練習斷點部分是我覺得很奇怪的,從pc版到手機版,從中平板版的斷點很容易出錯,因此,我覺得可能是我太仰賴padding和margin去推擠寬度﹔此外a下面會少寫hover效果做使用者互動; width和max-width 常常使用錯時機。

5. 第五週的功課是做出後台表單設計

第5週主要功課示意圖
▲第5週主要功課示意圖

功課困難度:★★★★

心得:其實第五週我主要在練習boostrap和scss的應用,我覺得我寫的其實很雜,有了很多東西都用!important去製作,很多樣式覆蓋不掉,但我這週覺得卡很痛苦,但學的也很多,嚴格說來,我蠻喜歡製作這週作業課程帶給我的感覺。

6. 第六週的功課是做出香水電商

第6週主要功課示意圖
▲第6週主要功課示意圖

功課困難度:★★★

心得:在製作第六週時剛好遇到全八週課程直播結束,老師給了多一個月的時間繳交功課,此外,老師在台北開了個問答會,我真心感謝這個問答會,讓我認識了一些想要努力往前端發展的夥伴,大家平常幾乎都有在上班,但回家或是有空閒時,仍然努力不懈地學習和切版。在製作第六週時,我在訓練我自己對Boostrap4的掌握度,比第五週來的熟悉多了^口^其中no-gutters的使用,還好有夥伴們提醒,不然我往往切版都差那1px和2px。

7. 第七週的功課是做出視差滾動效果

功課困難度:★

心得:這週我卡在的地方很奇妙,是Github pages,我怎麼設定我的github總是報錯,恩……還需要一些時間研究或請教高手!至於作業本身,我選了第一週的作業作為動畫效果,套用animate.css,多加一點效果,果然讓人覺得網頁活潑了起來。

8. 第八週的功課是做出旅遊、訂房網站/寵物相關服務的網站

第8週主要功課示意圖-旅遊網
▲第8週主要功課示意圖-旅遊網
第8週主要功課示意圖-寵物相關服務
▲第8週主要功課示意圖-寵物相關服務

功課困難度:★★★★★ ★★★★★

心得:我挑「旅遊、訂房網站」製作,且挑戰從手機板做到PC版,果不其然,光一個header就卡了好久orz,但我相信我能做到的,只少先把首頁完成,其他的一步一步來。

(三)課程總心得:

我非常強烈建議六角這八週課程,第四週接第五週可以暫停一周時間讓學員消化。原因是對全職學習的人可能影響不大,但對平常有在上班的,負擔真的很重QAQ。

第四週講到SCSS、GUIP,但其實光要熟悉這幾種寫法,就需花上一些時間,其實到第四週課程+功課有種想放棄的感覺,但還是作業硬著頭皮把作業完成(但此時課程進度已經到第六週了orz);第四週課程內容也需要消化,我把老師的直播上完後,又把影片看了一遍;內容很值得、但聽了還需消化、吸收、應用。

我認為六角切版班完全不適合沒有基礎的人來上,你必須要熟悉基本HTML、CSS,甚至Boostrap4、JQuery再來上會比較適合。

但我蠻推六角影音課程,我會建議把以下課程買了、看了、消化了、再來上這個直播班,原因是欲速則不達、欲達(除非你天資聰穎、時間多到爆)則不速。

六角學院-網頁設計-影音課程

另外,謝謝洧杰老師舉辦問答會,我覺得問答會讓學員透過線下實體互動,彼此認識,在趕作業的過程中,彼此吐槽、踩坑、勉勵,真的是一句話:「一個人走得快,一群人走得遠。」同時,也謝謝老師給我職涯的方向,老師說我可能比較適合走UX,其實我之前有在研究這一塊,但是經過這次老師直接挑明,我可能在當PM和學習SEO的過程中,無意、有意的接觸到這些相關知識,JS可能是之後極為重要的條件,我會深深思考、挖掘更多的自己後再做判斷。

我下一步預計先把切版班課程在RUN一遍,把六角的功課不足的地方趕快補上。若之後能在1/17前把JS學徒試煉完成60-70%,可能會報JS直播班。

一言以敝之,謝謝六角學院老師們、助教們的分享,同學一路相伴相互成長!

#使用web story做了一款心得 ,想看滑動、圖片、簡單說明的可以點擊連結

5/5

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

台中SEO讀書會

(相關資訊歡迎點擊以下按鈕)
Scroll to Top