---
# System prepended metadata

title: 食用基礎班上課-切版

---

# 食用基礎班上課-切版

## 課程相關項目連結
### Markdown
- [MD 語法](https://markdown.tw/)

### 需要的應用程式
- [VS Code](https://code.visualstudio.com/)
- [Github](https://github.com/)
- [Git](https://git-scm.com/)
- [Homebrew](https://brew.sh/index_zh-tw)
    - Homebrew for M1: https://zhuanlan.zhihu.com/p/341831809

### 參考資料

- [網頁架構基礎](https://hackmd.io/@SidStraw/HyxnYFpmO)
- [HTML 教程 | 菜鸟教程](https://www.runoob.com/html/html-tutorial.html)
- [CodePen](https://codepen.io/pen/)
- [HTML 基礎 - 學習該如何開發 Web | MDN](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics)
- [W3school 中文版](https://www.runoob.com/html/html-tutorial.html)

## 學生 
學生：Kero / ~~亭瑄~~ / jack / 洪敬哲 / 小貓

## 共筆內容
### 1. 下載 VScode
- 裝套件：
    中文套件

### 2. 在本地文件夾新增資料夾
### 3. 註冊 Github 並新增並新增專案硬碟
- 輸入專案名稱（不能與自己的其他專案同名）
- 選擇“public"

### 4. 安裝 Homebrew
* 在 [Homebrew](https://brew.sh/index_zh-tw) 複製指令到 VScode 貼上並執行
* 可在 VScode 內打`brew -v` 做檢查

---

### Windows 安裝 Git 後可以設定 VSCode 使用 Git bash 做為預設 Shell
`"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"`

---
### 快捷鍵
* 在 VScode 裡叫出終端機：
`control`+`~`

* 遇到當機可以輸入：`git status`
___

## Git config

```
git config --global user.name "YOUR_NAME"
git config --global user.email "YOUR_NAME@example.com"
```

# Git 指令範例 
```
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:ＸＸＸ/ＸＸＸ.git
git push -u origin main

＝＝＝＝=====改動後=====＝＝＝＝
git add README.md
git commit -m "commit 我動後了什麼"
git push



````

commit -m = commit message
git add must be a verb

# 6/19 課前複習作業繳交區

亭瑄： https://github.com/tingxuantx/monoweb01

敬哲： https://github.com/Hungchingche/MyWordpressTemplate

Kero: https://github.com/kerosuany/Lesson01

Jack:https://github.com/jackpan503/test01

小貓：https://github.com/meow1020/mono-web01

---


### 敬哲の小筆記

#### div、section、article的差異
1、div：作為布局以及樣式化時使用。
 
2、section：表示文檔中的節，一般是具有標題的。比如：文檔大綱、文檔章節、博客條目、用戶評論部分或者論文中有編號的部分時使用；通常會帶有標題。如果沒有標題，那麼就不推薦使用section
<img src="https://i2.kknews.cc/SIG=3a5uh8k/2p2r0001234158rn6prp.jpg"><br>
 
 3、article：表示獨立的自包含內容，如：一篇文章。文章找那個可以包含標題、內容、腳註
<img src="https://i2.kknews.cc/SIG=2timq90/2p270001rp4pr9132r69.jpg"><br>
原文網址：https://kknews.cc/tech/293jn2g.html





---

# HTML CSS 基礎學習
```
<html>
<head>
	<title>HTML CSS教學</title>
	<meta charset="UTF-8">
</head>




<body>
     <h1>HTML CSS教學</h1>
     <p>在這堂課程上面，你會了解如何使用HTML CSS來設計一個網站，並發佈到網路上</p>

     <h2>這章節你認識的HTML標籤</h2>
         <ol>
         	<li>h1-h6標籤</li>
         	<li>p段落</li>
         	<li>a超連結</li>
         	<li>img圖片</li>
         	<li>ul li 項目清單</li>
         </ol>
      <h2>撰寫文字超連結</h2>
           <a href="#">文字超連結內容</a>
      <h2>插入一張圖片</h2>
         <img src="https://www.udemy.com/staticx/udemy/images/v6/logo-coral.svg">
</body>
</html>
```
網址：https://codepen.io/water80216/pen/JMOZqj

---

Tag 小知識 <br>
a = anchor <br>
herf = Hypertext Reference <br>
src= source<br>
ol= ordered list 1-6....<br>
ul= unordered list 無序列列表 <br>
alt= altnative 

---

# Html 顏色參考

https://nipponcolors.com/#jinzamomi

https://cssgradient.io/

# Web 字體參考

https://fonts.google.com/specimen/Teko


# Html 練習繳交區
https://codepen.io/CS6/pen/xxqebrw

https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics

https://www.runoob.com/html/html-tutorial.html


亭瑄：https://codepen.io/tingxuantx/pen/MWpRYJx

Kero: https://codepen.io/kerosuany/pen/XWMQJpv

小貓：https://codepen.io/meow1020/pen/vYxMEgx

jackpan：https://codepen.io/jackpan503/pen/QWpPwRP

敬哲：https://codepen.io/hungchingche/pen/NWpmPxY

# Flexbox 學習

https://flexboxfroggy.com/#zh-tw

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

---
# 6/21 課前複習作業繳交區

亭瑄：https://github.com/tingxuantx/monoweb01
Jack:https://github.com/jackpan503/test01
敬哲:https://github.com/Hungchingche/MyWordpressTemplate

---
# CSS 筆記

註解：`command + /`

flex:

---


# 6/21 CSS作業繳交區

亭瑄：https://codepen.io/tingxuantx/pen/wvJZVxm?editors=1100

敬哲の真希：https://codepen.io/hungchingche/pen/GRNMmqO

小貓：https://codepen.io/meow1020/pen/PopvYwa

Jack:https://codepen.io/jackpan503/pen/bGqybYJ

Kero:https://codepen.io/kerosuany/pen/KKWYOBr

---


# 6/28 課前複習作業繳交區

亭瑄：https://github.com/tingxuantx/monoweb01

敬哲：https://github.com/Hungchingche/MyWordpressTemplate

小貓：https://github.com/meow1020/mono-web01



----

# 6/28 身分證作業繳交區

小貓：https://codepen.io/meow1020/pen/PopvYwa

Jack：https://codepen.io/jackpan503/pen/bGqybYJ

亭瑄：https://codepen.io/tingxuantx/pen/wvJZVxm

Kero:https://codepen.io/kerosuany/pen/KKWYOBr


# 7/02 簡易架站 Gitpage

https://gitbook.tw/chapters/github/using-github-pages.html

基礎模板

```
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

```
# 7/2 課前複習作業繳交區

亭瑄：https://github.com/tingxuantx/monoweb01

敬哲：https://github.com/Hungchingche/MyWordpressTemplate

Kero:https://github.com/kerosuany/Lesson01

JACK:https://github.com/jackpan503/test01

cat:https://github.com/meow1020/mono-web01

----

# 7/2 作業


Kero: https://kerosuany.github.io/Lesson01/

亭瑄：https://tingxuantx.github.io/monoweb01/

敬哲：https://hungchingche.github.io/MyWordpressTemplate/

cat:https://meow1020.github.io/mono-web01/

Jack:https://jackpan503.github.io/test01/

Bennett:https://benchiang7.github.io/homepage/

----


# 7/5 Figma 0 基礎

https://www.figma.com/downloads/
https://www.figma.com/
https://figmachina.com/





# 框架開始

`14.17.2 LTS` https://nodejs.org/en/

react https://zh-hant.reactjs.org/docs/create-a-new-react-app.html


常用指令
http://linux.vbird.org/linux_basic/0220filemanager.php
https://ithelp.ithome.com.tw/articles/10235530

mkdir=新增資料夾



```
npx create-react-app my-app
cd my-app
npm start
```

code .

https://blog.fntsr.tw/articles/635/



https://play.tailwindcss.com/

https://tailwindcss.com/docs/responsive-design#overview

https://rsuitejs.com/design/dark/#artboard2


https://material-ui.com/zh/components/selects/

https://www.tailwind-kit.com/components/data