---
# System prepended metadata

title: 第一週題目
tags: [網頁讀書會]

---

---
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)?
![](https://i.imgur.com/dhHeRQz.png)

### 簡單
<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
放大仔細看，貼文的邊框和白底是分開的喔！
:::
![](https://i.imgur.com/33c6kJm.png)

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

Please implement the following layout in CSS grid
![](https://i.imgur.com/rQQhwKk.png)

<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.
![](https://i.imgur.com/Y4cvfTS.gif)


2. Toggle
To create an IOS Toggle switch using HTML and CSS only. View video for animation details.
![](https://i.imgur.com/txHy3ti.png)


3. Javascript
![](https://i.imgur.com/7UefPZJ.png)

<style>


</style>