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

# 04/08 共筆：換你動手來開發！（Figma）

### 挑戰！
當大家大概知道 Figma 的基本操作後，我們先用簡單的題目，更加熟悉整個操作。
再來使用簡單的網頁語言，實際把介面呈現出來，過程中也一邊學習 HTML 以及 CSS 的語法。
我們並不會要求大家一定要怎麼做，所以放輕鬆的挑戰吧~

### 題目
<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，讓大家一起看看你做的成果！

註：當不知道要怎麼實作特定效果時，不妨試試看上網搜尋關鍵字，看看其他人是怎麼做出來的

---
### 設計指南 (建議查閱)
:::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
:::
---

### 學習資源
- [PAPAYA 電腦教室 _ Figma 教學](https://www.youtube.com/watch?v=P96TQwsY_VY)

### 大家的 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>