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

# 11/18 第一次網頁讀書會

## 簽到區
時間：111/11/18
地點：IB 12 樓討論區 - R03
參與人員： 王正宏(chenghung_wang#1933)、楊芷安(ZhiAn#4937)、呂欣怡(YI#3121)、吳宇凡(yu_7605_宇#3973)、蔡凱鈞(kevinabula#5071)、張睿麟(Jovi_Pig))、葉衍巖(沿沿#7061)、林信佑(CCcat#8059)

---

## 目錄
[TOC]

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

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

### 簡單
1. Modern layout
[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.

2. CSS Grid
Please implement the following layout in CSS grid

### 進階
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

## 今天規劃
|時間|活動|
|--|--|
|19:00-19:15|讀書會講解|
|19:15-19:30|認識彼此|
|19:30-19:45|網頁起手式/學習途徑分享|
|19:45-20:00|題目試解|

以後規劃
|時間|活動|
|--|--|
|19:00-19:30|分享上一次題目的解法|
|19:30-19:45|講解下週題目|
|19:45-20:00|分享自己酷酷的東西 or 討論|

## 你各位的codepen
#### 2022-11-16 前端課程檔案(Login)
正宏：https://codepen.io/chenghung-wang/pen/OJEOjgE
宇凡：https://codepen.io/wuyufan7605/pen/rNKYzwa
沿沿：https://codepen.io/Gabriel9208/pen/eYKeERY
睿麟：https://codepen.io/jovi920204/pen/poKdrPB
欣怡：https://codepen.io/YI-0924/pen/yLEPobW
信佑：https://codepen.io/CCcat134312/pen/mdKqwqE
凱鈞：https://codepen.io/kkabula/pen/XWYzagb

#### image grayscale transition
宇凡：https://codepen.io/wuyufan7605/pen/rNKYzwa
沿沿：https://codepen.io/Gabriel9208/pen/qBKVPEV
睿麟：https://codepen.io/jovi920204/pen/MWXOEej
芷安：https://codepen.io/zhian66/pen/poKdaYP

#### Modern layout
正宏：https://codepen.io/chenghung-wang/full/dyKJqER
王正宏：https://codepen.io/chenghung-wang/pen/poKpXgR
####

## 共筆

1. Flex 呱呱
- Property:
- justify-content : 改變物件的水平位置
- Value:
- flex-start: 將物件移至該物件所在的水平座標軸的最開始位置(若有被reverse, start&end的位置也會被reverse, 可視為reverse座標軸)(間隔大小不變)
- flex-end: 將物件移至該物件所在的水平座標軸的最末位置(間隔大小不變)
- center: 將物件移至該物件所在的水平座標軸的中間位置(間隔大小不變)
- space-between: 將物件等間隔分開(最左右不留空間)
- space-around: 將物件等間隔分開(最左右有留等大空間，但與物件間隔的大小不同)
- Property:
- align-items:改變物件的垂直位置
- Value:
- flex-end: 將物件移置垂直線的最底下
- flex-start:將物件移置垂直線的最上面
- center:將物件移置垂直線的中間
- baseline:
- stretch:

2. Codepen intro
codepen 基本介紹
codepen 基本操作、分享

3. 下周題目介紹

圖片灰階
hover