FreeCodeCamp #3 HTML5 and CSS
===
###### tags: `分享` `聚會`
---
## 歡迎來到 Monospace 共同工作空間
請點擊👉 [連結](https://www.facebook.com/monospace.tw/) 按個讚 👍
----
## 歡迎加入 FreeCodeCamp 繁中化計畫
* 發起人：Ryan 👏🏻
* FB社團：搜尋「FreeCodeCamp 繁中化計畫」
* 固定聚會：每週三晚上7點
* 線上群組：請點擊👉 [連結](https://join.slack.com/t/freecodecampclub/shared_invite/enQtMzQ2NDgxMjc2NDgxLTNlOGY1Y2U3MTc2YzM5NGNjMzM2ZTEzNjdkY2E1NDg0NTI4MzM4MDc0MWY3NDJkNzY5ZTBhOGI0NTljMjk4MWY) 加入 Slack
----
# 活動照片
---
# 在這邊...
- 不收費<!-- .element: class="fragment" data-fragment-index="1" -->
- 沒有講師，只有 mentor<!-- .element: class="fragment" data-fragment-index="2" -->
- 能學多少、多深，端看你願意花多少時間<!-- .element: class="fragment" data-fragment-index="3" -->
----
# 請主動跟上，如果你不問問題...
- 我不會等你，<!-- .element: class="fragment" data-fragment-index="1" -->
- 我不會等你，<!-- .element: class="fragment" data-fragment-index="2" -->
- 我不會等你！<!-- .element: class="fragment" data-fragment-index="3" -->
---
## 準備好
- 開啟 & 登入 [FreeCodeCamp](https://www.freecodecamp.org/map)
- 開啟 Slack 到 #beginner 頻道
- 你積極的態度
---
## 什麼是切版？「切」什麼？
---
<!-- .slide: data-background="#FFF" -->
## 怎麼「切」？
<p style="color: #1c6400">謹記口訣</p>
- 由上到下，<!-- .element: class="fragment" data-fragment-index="1" -->
- 由左至右，<!-- .element: class="fragment" data-fragment-index="2" -->
- 由粗到細<!-- .element: class="fragment" data-fragment-index="3" -->
---
### 練習：「切」設計圖 (1/4)
----
### 練習：「切」設計圖 (1/4) - 參考
----
### 練習：「切」設計圖 (2/4)
----
### 練習：「切」設計圖 (2/4) - 參考
----
### 練習：「切」設計圖 (3/4)
----
### 練習：「切」設計圖 (3/4) - 參考
----
### 練習：「切」設計圖 (4/4)
---
<!-- .slide: data-background="#FFF" -->
### 「切」成什麼？ HTML
- 是「 HyperText Markup Language 」的縮寫，
- 是 <span style="color: #1c6400">標記語言</span>
- 並 <span style="color: red">不是程式語言</span>
- 常見的 HTML 長這樣
---
## 怎麼學 HTML？
- 看一個
- 查一個
- 學一個
- 👉 字典：[w3schools](https://www.w3schools.com/tags/ref_byfunc.asp) 在手
- 推薦閱讀 👉 [Chris 前端新手村](https://ithelp.ithome.com.tw/articles/10191397)
----
👉 [連結：練習1](https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element)
----
```html
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My very first web page</h1>
<p>
This is pretty much the most awesome thing ever. Seriously.
</p>
</body>
</html>
```
---
今日任務 👉 [連結：練習2](https://www.freecodecamp.org/challenges/give-a-background-color-to-a-div-element)
---
## 來點樣式瞧瞧
示範：before HTML5 的作法
----
## HTML & CSS
HTML is the content, CSS is the style
----
---
👉 [練習2 (加入CSS)]
---
## 下一步...
- CSS 選擇器 (class, id)
- CSS 優先權 👉 [參考資料](https://www.minwt.com/webdesign-dev/css/17118.html)
- CSS BOX MODEL
- There is More...a lot more 😹
----
## 作業：
----
## 作業2:
----
## 更多好料：
- [20萬+點閱！Chris 前端新手村](https://ithelp.ithome.com.tw/users/20107637/ironman/1457)
- [必收藏 w3schools](https://www.w3schools.com/tags/ref_byfunc.asp)
- [網頁前端入門](https://docs.google.com/presentation/d/1fPJ4twSp9q5w7hpunaDC4DFkjufyi2ORNCzFNaZ2NTs/edit#slide=id.g1c582c356e_0_0)
- [一張圖看懂優先權](http://cssspecificity.com/)
---
## 參考資料
- [切版舉例用圖來源](https://www.websitebuilderexpert.com/awesome-home-page-design-layouts/)
- [CSS 畫幾合圖形](http://www.cnblogs.com/jscode/archive/2012/10/19/2730905.html)
---
> *關於我*
> ## LeeBoy
> - Web developer
> - [GitHub](https://github.com/Leeboyd)
> - [Medium](https://medium.com/@jobboy0101)
> - 近期研究: Angular、RxJS
{"metaMigratedAt":"2023-06-14T16:21:27.068Z","metaMigratedFrom":"Content","title":"FreeCodeCamp #3 HTML5 and CSS","breaks":true,"contributors":"[]"}