---
tags: 2021 程式體驗營
---

# 2021 程式體驗營 第一堂直播筆記

## 發問教學

限有加入至 slack 的 2021 程式體驗營頻道使用
老師上課時會在 slack 中開啟第幾堂討論大廳的對話串
同學可進入該對話串中查看問題
回覆問題時請點擊emjio 按 1 2 3 等表情符號回覆

## ZOOM 發問教學

請同學進入 ZOOM 後點擊下方聊天區
留言時請選用 全體嘉賓與觀眾 大家才看的到你的訊息

## 2021 程式體驗營期限

截止日為 6/30
50 小時教學影音課程會關閉
並且五道主線任務與小節作業提交問答也都會關閉
6/30 後交的作業將不會被助教&老師批改
請同學把握時間！
建議於現在就選擇好方向 看是要直衝 JS SCSS 等方向 就現在直接開始看
後面影片關閉後就無法再查看影片內容了

## 小組任務

這邊其實就是出來交朋友的～
如果有同學也想分組 請通過分組名單申請分組
附上[連結](https://docs.google.com/spreadsheets/d/1t25mXqAro7TSURVA2YVs9lDOcxeItoBLAPcp8MVrBaE/edit#gid=200788826)

## 下週規劃

基本上從下週一開始會出現每日任務
有 CSS 的也有 JS 的 大約是花費五到二十分可以解決的小題目
主要用來讓大家養成好習慣 要知道學習不是一件痛苦的事
多練習就多會～～
另外下週會說第二道跟第三道的主線任務

## 溫馨建議

老師希望大家都不用註冊購買六角學院的課程 因為這是公益活動
單純是讓大家對程式理解感受 體驗一下看有不有趣 想不想繼續深入學習
目標不是讓每個人都成為工程師 而是要讓你體驗 決定未來方向是否繼續深造工程師
整個體驗營結束後 如果你發現自己真的很愛程式
七月每天都有 10~15 小時的時間 可以報名參加 7/2 的切版直播班
還想聽老師上課 有時間願意花時間做作業 就可以參加
但是切版直播班的作業量是這裡的五到八倍 同學要想清楚後再決定

再說一次 不要特別花錢在六角學院上 真的想學習再買再上
(校長在後面喊：不要花錢買影音課程拜託)

## 等級表
老師有特別建立一個[等級表](https://hackmd.io/GY_Tigk3RvKqGoYvy9XLuQ?fbclid=IwAR1C1vsRjeYzOGOgjxV5VEr-mNKdXQnY3ImskWMaZOrwYAI4HnoCH8MwsUU)
2021 程式體驗營三十天結束後 會建議你們到達 LV3 的程度
這樣自己做網站時會較容易一點 LV3 CP值比較高 LV2 沒什麼意義
另外一週若只學習兩到三小時還是太少 最少要五到十小時比較合適 給大家參考

## 上課

老師直播這邊講的是自己的開發心得跟流程 教學的部分在 50 小時影音課程講很清楚了
直播是給大家看老師是怎麼做的

在業界水準 第一道主線任務的新手切版任務 大約是半小時內可以做完

其實就是要一直做 拼熟練度 做越多越能提升熟練度
可能第一次做三天 第二次一天半 第三次八小時 依此類推 往後速度會越來越快
都是練習練出來的 每次刻板會有不同的感想 也能幫助自己提升能力

這邊也補充一下 在第一堂講義主線有教學練功菜單
練習就是要刻意練習 練習你不熟悉的地方 所以請在練功菜單中自己挑不熟的來刻意練習～

## 開始切版

首先到新手切版任務裡面 抓 XD 標示文件
該頁面下方有一些相關說明連結 可以看一下線上預覽操作教學

這邊說一下 該任務建議是先不用任何 flex 效果 因為是給新手作的 先不深入

流程大致是這樣：
1. 新增資料夾
2. 在資料夾中新增 img 資料夾、 css 資料夾、 index.html 檔案
3. img 資料夾中放入該任務的那六張圖片
4. css 資料夾中新增一支 all.css 檔案
5. 在 index.html 寫代碼開發

要開始用 emmet 需要注意 檔案應為 .html 或 .css 才有辦法打 ! 開啟頁面檔案

第一步先引入樣式檔案 使用 link:css 引入剛才的 css/all.css 檔案

老師習慣是左邊放編輯器右邊放網頁

寫代碼時要先提升信心 所以先隨便寫一行來測試看看樣式跟代碼是否有正常顯示在畫面上 有了就有信心 有信心了再開始寫 不要一次寫完全部才去看畫面結果發現都壞掉了會崩潰潰～

### 看設計稿

收到設計稿先看結構長怎樣 比如字體、線、文字大小、間距等等再開始做
這邊在設計稿中先點一個東西 滑鼠 hover 下一個東西時就會看到兩者之間的距離了

看設計稿時順便找一下設計師的設計規律 比如大家都喜歡用 8 的倍數當距離標準 會推 16 48 72 等等的間距這樣

設計稿中看起來字大約都是大小 24 行高 36
假設同一個樣式約佔 80% 以上就可以直接設在 body 裡面做全站設定

補充：
1 rem = 16 px 要自己算才能轉 rem ，設計稿 XD 無法幫我們轉換數值

要清除瀏覽器預設樣式可以使用 reset.css 和 normalize.css
這部分可以直接 Google 抓過來複製貼上在 all.css 裡面即可～

字體設定的資料後面老師會補上 這邊先不做

### coding

老師在設定樣式時因為有不少地方重複使用到相同數值來推間距 所以寫了以下這種樣式：

.mb-1{
  margin-bottom: 8px;
}
.mb-2{
  margin-bottom: 16px;
}
.mb-3{
  margin-bottom: 24px;
}
.mb-4{
  margin-bottom: 32px;
}
.mb-5{
  margin-bottom: 40px;
}

這邊順便推薦同學在寫程式時使用 emmet 比較不會打錯字。
像上方代碼 你可以直接在 .css 中打 mb8 按下 tab 自動生成～

有人問說可以寫 .mb-8 當名稱嗎？答案是這邊你想怎麼寫就怎麼寫 每個人習慣不同沒有一定要怎麼寫的說法

接下來看到設計稿中第一個線條
他的寬度是 1200px 這樣就知道整個內容的寬度是多少了
可以看到下面有一個深藍色的區塊寬度是 1920px 這邊要說一下
設定那邊的樣式 width: 1920px 是禁忌
因為那個 1920px 其實是表示該區塊為 100% 滿版寬度 自適應延伸
不是說固定寬度是 1920px 請同學再注意一下這部分～

往下技能那邊的線 寬度是 996px 這邊到時候就另外寫 skills 寬度 996px 就可以了

以上是說明 接下來就開始正式寫完了
這邊會建議同學最好能在五分鐘內完成所有內容的 HTML 結構

首先建一個 container 區塊 他就是 1200px 的內容區塊啦
然後名字那個 Joanne Chen 地方這邊會用 h1 標籤 並設置樣式為 title
往下每個區塊的標題 樣式會設置為 subTitle (副標題的意思)
圖片的部分有一個 alt 屬性 是因為視障看不到畫面 所以這邊需要寫圖片是什麼 做政府無障礙網站時沒寫會被打回來哦
另外該屬性也可以用於圖片連結失效、圖片跑不出來時提示該圖片是什麼～

接下來下方的個人資料建議是設為列表來做
分別用一個一個的 li 來寫 裡面要換行的地方再加上 br 標籤～

然後因為其實 技能 跟其他的個人資料啊學歷啊等標題是類似的結構
所以這邊會寫成 `h2.subTitle.subTitle-white` 這樣子
用原本的樣式結構加上修改該顏色來實現 而不需要複製貼上來撰寫樣式
這樣子的寫法 在 .css 中 當樣式有重複設定的屬性時 位於下方的樣式會覆蓋上方的樣式 所以 subTitle-white 寫在 subTitle 的下面 文字顏色白色的設定就會蓋掉原本的文字顏色囉！

工作經驗那邊 也是建議使用列表下去做五個 li 每個的內容都是 h3 標籤
用 h3 當作標題 告訴他有哪些工作經驗
因為這邊屬於相同性質 都是工作經驗 所以會建議用列表的 li 來做這個區塊
另外為什麼不使用 p 標籤來寫這邊 是因為他裡面結構是有標題(工作經驗)圖片(六角學院跟樹的圖片)還有一個文字段落的部分
假設他單純只有工作經驗的五個標題 才會建議用五個 p 標籤來寫這塊

這屬於老師自己的習慣 用工作當標題 然後裡面有其他資訊 讀起來會比較順

最下方深藍色那邊可以另外寫 footer 或 method 的樣式名
然後裡面結構也是列表 寫 5 個 li 裡面放字跟圖(3 個 icon)

大致上就這樣～其他主要是設定樣式的部分
這邊重點講一下關於 技能跟工作經驗的區塊

技能的部分：
主要就是給 li 設置一個寬度 然後往左邊推 padding 再設置 margin auto 置中
工作經驗部分：
建議是直接給 ul 區塊設置 padding margin 推左邊間距出來即可