###### tags: `網頁讀書會`

# 04/15 共筆：換你動手來開發！（HTML/CSS）

### 挑戰！
繼上週的 Figma 設計出 UI/UX 後，這週我們要把介面轉為程式碼，呈現在網頁上。
你將會使用到 HTML 和 CSS 來幫你完成這項挑戰！
開發的過程中，若有遇到問題，非常推薦你問問 ChatGPT。省去到網路上查找資料的時間。
:::info
即使上週沒有做 Figma 的介面設計，也可以進行這週的挑戰喔！
:::

### 學習重點
- 架構出有邏輯的 HTML
- CSS 排版相關技巧（如：Flexbox, Grid Layout）
- 水平置中
- 重直置中
- 漸層顏色呈現
- 陰影效果
- 嵌入外部字體

### 題目
<div class="img-container">
<p>網頁版</p>
<img class="box-shadow desktop" src="https://i.imgur.com/Dv1t850.png">
<p>手機版</p>
<img class="box-shadow mobile" src="https://i.imgur.com/qNAf83y.jpg">
</div>

- [所需圖片 及 HTML 檔案 - Google Drive](https://drive.google.com/drive/folders/11_RMo-Qr0KYNVWhSsWJgad0X7zB8wKHS?usp=sharing)
- [題目來源 - Frontend Mentor](https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV)

### 實作流程
1. 先照著題目的圖片，利用 Figma 畫出 UI
2. 在打程式之前，可以先思考**層與層之間的關係**，有整體的概念後，再往下走，可以幫助你不會一直在整體架構上改來改去
3. 使用你熟悉的開發環境(如：VS Code)，試著用 HTML、CSS 把 UI 呈現出來
4. 把你完成的專案檔，上傳至 GitHub，讓大家一起看看你做的成果！

註：當不知道要怎麼實作特定效果時，不妨試試看上網搜尋關鍵字，看看其他人是怎麼做出來的，也可以問問 ChatGPT，請他提供簡單的範例實作。

---
### 設計指南 (建議查閱)
:::spoiler
## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

### Primary 主要顏色

- Light red: hsl(0, 100%, 67%)
- Orangey yellow: hsl(39, 100%, 56%)
- Green teal: hsl(166, 100%, 37%)
- Cobalt blue: hsl(234, 85%, 45%)

## Gradients 漸層

- Light slate blue (background): hsl(252, 100%, 67%)
- Light royal blue (background): hsl(241, 81%, 54%)
- Violet blue (circle): hsla(256, 72%, 46%, 1)
- Persian blue (circle): hsla(241, 72%, 46%, 0)

### Neutral

- White: hsl(0, 0%, 100%)
- Pale blue: hsl(221, 100%, 96%)
- Light lavender: hsl(241, 100%, 89%)
- Dark gray blue: hsl(224, 30%, 27%)

### Notes

Use transparency to get the colour variations necessary to match the design. Hint: look into using `hsla()`.

## Typography

### Body Copy

- Font size (paragraphs): 18px

### Font

- Family: [Hanken Grotesk](https://fonts.google.com/specimen/Hanken+Grotesk)
- Weights: 500, 700, 800
:::
---

### 學習資源
- [Kevin Powell 一步步帶你實作 - YouTube](https://www.youtube.com/watch?v=KqFAs5d3Yl8&t=1490s)

### 大家的 Figma 連結

[張睿麟](https://www.figma.com/file/he5yDOVSioeIdcxDAMNnwT/results-summary-component?node-id=0%3A1&t=ynLuIS71NLaXOf7I-1)

[吳宇凡](https://www.figma.com/file/DC1pIO8MkCjtA33BZSGQiD/Untitled?node-id=0%3A1&t=XGg9YFBdh9olDhgg-1)

[黃雅筠](https://www.figma.com/file/Df67ii2M2NoSzePusIP48e/practice?node-id=0%3A1&t=rRryGDmJJQqUIZmU-1)

[潘柏丰](https://www.figma.com/file/HP0csLp3CNtRN0a1X4lK9S/Untitled?node-id=0%3A1&t=kfLPMGdrGqeiTtF6-1)

### 大家的 GitHub 連結

---
<!-- 以下物動 -->
<style>
img{
position: relative;
left: 50%;
transform: translate(-50%);
margin: 10px;
}
.box-shadow {
box-shadow: 12px 12px 7px rgba(0, 0, 0, 0.1);
}
.desktop{
width: 70%;
}
.mobile{
width: 40%;
}
</style>