## 關於我 去年在朋友的推薦下參加了六角學院2023年的軟體工程師體驗營，並且參加了後續的切版直播班與JS直播班。最近離職後，目前是邊看Udemy的線上課程來持續學習，但是由於這類的線上課程是完全由自己安排學習進度，最近感覺到學習節奏緩慢，所以想藉由再次參加軟體工程師體驗營來完成作品，重新掌握合適的學習節奏。 ## 為什麼選擇六角學院 去年2023年，我連續參加了六角學院的軟體工程師體驗營、切版直播版、以及JS直播班，六角學院的課程設計是結合影音課程以及每週一次的直播課來進行的，透過影音課程的預習以及直播課的老師的即時講課，讓我能夠完成主線任務並獲得成就感。並且，在學習過程中卡關時，不但能夠詢問助教，也能在**六角學院的Discord**進行提問，和其他同學一起解決問題，也能夠透過回答其他同學的問題來進行學習，是非常棒的社群。 此外，六角學院非常有趣的課程設計是**每日任務**，透過每天學習一個知識點，能夠一點一滴地累積成就感，讓我更有動力繼續學習並完成**主線任務**，整體的學習體驗良好，因此再次選擇六角學院，希望能夠透過本次的軟體工程師體驗營完成個人網站的架設。 ## 設定學習目標 這次參加軟體工程師體驗營，由於目前是全職學習，希望透過影音課的預習以及直播課的講解來完成LV3的主線任務，並且每天都完成每日任務，以每日任務作為錨點來開啟每天的程式學習。 本週的目標是完成切版任務作業一。 ## 本週直播筆記 這次在朋友的鼓勵下參加體驗營的志工，我認領的任務是本週直播課的時間軸以及部落格心得的撰寫，第一次寫部落格，是非常有趣的體驗。 #### 第一週 - 打造最強前端開發環境 * 使用深色主題，買好一點的眼鏡。最近剛好想要去JINS配新眼鏡:eyeglasses:。 * 常用的emmet語法 * p; p*2，透過乘法一次產生多個標籤 * h2 + p，加法 * .container>p，使用大於來包裹 * .header>(.logo>h1)+(ul.menu)，使用括號分群 * [emmet字典](https://https//docs.emmet.io/cheat-sheet/%20)，記得常用的幾個就好 * 開發習慣分享 * 不急著切版，先觀察是否有共通樣式 * **共通樣式**，例如文字屬性(大小)、顏色(主色及輔助色)、間距、單位 * `.font-xl .font-l .font-m` 設定常用的字體大小，統一使用設定好的規格來調整。 * 工程師的任務是1px不差的實現設計稿。 * **先把環境設定好**，在之後的開發流程可以省下很多時間。 * 先畫出草圖，將結構拉出來，也可以用 outline 作法 * 用軟體或者紙筆來畫出結構，可以釐清思緒，可以用emmet語法寫出來。 * `*{outline: 2px solid #000};` 將全部元件都加上邊框，方便看結構；outline沒有佔據空間，不會影響排版。 * `margin: 0 auto;` 居中的容器，用container包起來。 * 善用瀏覽器的開發人員工具，試用各種屬性，例如`display: flex`，修改到符合需求後，再修改檔案。 * 配置編輯器介面 * VScode的好用套件：**live server**，儲存即時顯示結果，不要再按重新整理了！ * 直接在瀏覽器的開發者工具調整到合適的樣式，再到編輯器修改。 * 要先開發 HTML，還是先開發 CSS？ * 建議先把一個區塊(例如，header)的HTML及CSS寫好，再寫第二個區塊，慢慢累積成就感。或是，先寫會寫的區塊。 * 開雙欄介面，多善用 Chrome 瀏覽器除錯，再來寫程式。 * 英打練習 * 透過 [keybr.com](https://http://keybr.com/) 練習英打，[教學影片](https://www.youtube.com/playlist?list=PLYrA-SsMvTPOxjOi9BvWLJcbGLULH-uQF)。 * 刻意練習 [emmet](https://https//docs.emmet.io/cheat-sheet/%20) 與常見英文命名鍵位，[emmet練習的程式碼片段](https://github.com/hexschool/EmmetPractice)。 #### 關於校長の肝 後來看錄影檔才發現，在開學典禮結束後，校長繼續回覆學員的問題，Q&A時間居然持續到凌晨一點，看來校長的肝真的非常之硬，謝謝洧杰校長:laughing:。 ## 未來展望 加油！:ghost:跟自己比較就好:ghost: * 持續學習，每天完成每日任務，並且觀看影音課程進行預習。 * 本週末完成切版任務作業一。 * 每天練習5至10分鐘的英打。