---
title: 第一週題目
---

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

# Week 1

### 基礎
1. 用 css 把一個東西拉到正中間（用4種方法）
- position
- flex 呱呱

2. transition & filter
keyword:
- html: 圖片怎麼放？
- css: 怎麼讓圖片變灰色(Turn the image on grayscale)？滑鼠滑入才套用css的方法(when hover the mouse)? 過渡動畫(with a transition)?

### 簡單
<h4 class="">1. Modern layout</h4>

[hint](https://codepen.io/chenghung-wang/pen/mdKqBqg)
Your task is to creat the following layout, the posts' width is 1/3 of the container's on desktop screen size(>=1440px) and full width below this.
:::info
放大仔細看，貼文的邊框和白底是分開的喔！
:::

<h4 class="">2. CSS Grid</h4>

Please implement the following layout in CSS grid

<h4 class="">3. Yellow Square(New)</h4>

Make an animation that starts with a big yellow square, and this square turns a small red circle, the animation needs to be centered on the view and the animation needs to loop;

<h4 class="">4. Triangle(New)</h4>

Make a blue equilateral triangle on the center of the view, and animate this to transform a yellow square. the animation needs to be fluid and loop infinite;

### 進階
1. Loading Screen
Create an animated loader using only HTML and CSS asme as GIF below.
The loader animation should be looped. 4 defferent colors(`#19A68C, #F63D3A, #FDA543, #193B48`) should be used.

2. Toggle
To create an IOS Toggle switch using HTML and CSS only. View video for animation details.

3. Javascript

<style>

</style>