---
tags: 公益程式體驗營 - 2022
---
# 作業檢核點｜2022 程式體驗營

## 主線任務

> 進入舊系統 > **任務系統** > 任務審核 > 任務篩選，找出體驗營的任務。
> 點選「指派給我的任務」

> ==主線任務學員提交的影片==
> 只要螢幕上有顯示
> 1. **系統時間**
> 2. 他們**有切指定的區塊**
>
> 這樣就好
> ==沒有提供到要請他們補交==

[切版任務一 - 產品列表排版](https://rpg.hexschool.com/task/293/show)

請先不要點出背景圖案的問題，像是 logo 部分，他如果是 a > img，也讓他過，因為還沒教到背景設定的教學（圖片取代文字技巧）

建議：
HTML 標籤運用
    - 一個網頁一定會有一個 h1，用來標示網頁中最重要的資訊。可以建議在 logo 使用（如果同學使用在甜點類別也可以）
    - 「甜點類別」為選單列表標題需使用標題標籤
    - 產品標題是否有用標題標籤 h3~4，價格可以用 p 標籤
    - ul li 運用（右上購物車 icon 可以不放進 ul 內）
    - 選單連結使用 a 標籤，「加入購物車、心形 icon」使用 a、button 標籤都可以
- 文字大小和間距可以稍微提一下嘗試依照設計稿調整
- 不要寫死高度！！請善用 margin、padding 推擠
- 容器 .wrap、.container 依照設計稿寬度是 940px
- Flex 運用上是否正確
- 有無設計連結 hover 效果，例如左側選單、加入購物車 ..
- 當右側區塊的產品文字變多時，價格會不會被擠壓到，或者是跑版，例如這個版型，產品跟價格沒設定寬度，導致產品文字變多時，擠壓到右側價格
  (https://codepen.io/liao/pen/oNxdvRO)
- 建議盡量提在 10 個左右，如果上面主要建議都提完了還沒超過十個，可以再提出更細節的建議

也可以參考
[30 分鐘彩蛋任務](https://www.notion.so/b7c8b8022d834be988c578a077904b1f?v=26f66e55fbdf49998c63fba943025020) 提到ㄉ建議（Adobe XD 和 emmet 不用提）
[穎旻講解 1:27:40](https://courses.hexschool.com/courses/1713908/lectures/39987737)
<br>
[切版任務二 - chatTalker AI 機器人](https://rpg.hexschool.com/task/294/show)

- 不能有 x 軸，若有則退件，但仍需要幫對方批改
- h2、h3、h4 分配，不能有 h2、h4，但卻沒 h3，權重標題要設置清楚
- header、footer 可嘗試滿版設計
- ul、li 結構設置，不要都用 div

若有用 BS5
- 盡量建議學生用 BS5 既有的 util 去寫，不要自己寫 class
- 如果學生自己有寫自己的 SCSS，請嘗試用 BS5 內建的 SCSS Mixin， breakpoint mixin

[老師批改參考](https://discord.com/channels/801807326054055996/964348844584366090/974606131043381248)、[六角助教天團檢核點](https://courses.hexschool.com/courses/bc2694/lectures/40189606)（有更新到這邊）

## 小節作業
> 學員會繳交在**課程問答區**，因此要在**助教系統**批改回覆。
> 請將問題列表滑到底，全部載入後，再點選「指派給我的問題」
> -> 改為[**新系統**](https://rpg-assistant.hexschool.com/#/assistant/questions)摟，可以直接點「指派給我的問題」然後「套用篩選」就可以ㄌ

注意這個問題
https://discord.com/channels/902012488495820882/965515611688030278/967806467845550130

如果有發生[這個問題](https://discord.com/channels/902012488495820882/965515611688030278/969251519943827467)（繳交的作業內容和該小節不同）
1. 只回覆作業範圍內的問題與批改
2. 如果他貼錯，但還是在本課程有提供的範圍內，就還是幫她批改

（回覆上若有遇到任何問題都可以在群組使用討論串提出）

**CSS - VS Code 網頁編輯器、HTML 基礎教學(附小節任務作業)**
[CodePen 教學 - 將你的程式碼分享給別人](https://courses.hexschool.com/courses/1713908/lectures/38836737)

- Codepen 連結有成功分享
- h1, p 標籤使用正確

[HTML 標籤教學 - 小節作業](https://courses.hexschool.com/courses/1713908/lectures/38836792)

- 使用 CodePen 繳交
- 正確使用 HTML 標籤

**CSS - CSS常用語法(附小節任務作業)**
[小節練習 - 使用 CSS 優化網頁](https://courses.hexschool.com/courses/1713908/lectures/39463523)

- 類別選擇器，例如 .style1
- 擬態選擇器，例如 a:hover
- 文字設定，例如文字大小、文字顏色等等
- 有練習到 border 線條設計
- CSS 語法設定正確，例如 color: blue; ，每個語法後面有記得加上 ; 分號

**CSS - 使用 CSS 變更 HTML 標籤特性(附小節任務作業)**
[小節練習](https://courses.hexschool.com/courses/1713908/lectures/39463631)

- 後代選擇器練習，例如 .content p
- 內容是否有水平置中，例如 margin: 0 auto
- 中間的 p 段落有嘗試用 margin-bottom 推擠出空間
- 檔案下載部分，是否用設定寬高，例如 a 標籤設定 display: block
- 不寫死高度，皆是用 padding 來產生留白，像是 .content 中間區間，許多學生會嘗試寫死寬度

**CSS - Flex 網頁排版技巧(附小節任務作業)**
[Flex 小節作業](https://courses.hexschool.com/courses/1713908/lectures/38838681)

- HTML 標籤的使用時機 (h1、2、p、ul li)
- 是否有使用 flex 設計並排效果
- course-item 嘗試使用 ul li 結構來排版
- footer 不需要使用 flex 效果
- 善用 padding 與 margin 推擠，不寫死 div 高度
- 嘗試練習 CSS 後代、類別選擇器

**SCSS - 環境建立、基礎語法教學**
[Sass、SCSS 小試身手](https://courses.hexschool.com/courses/1713908/lectures/38839486)

- SCSS 可以透過 & 來縮寫語法
- SCSS 階層盡量以不超過四層為主，過巢的結構會導致編譯出來的 CSS 過長，影響網頁渲染效能