食用基礎班上課-切版

# 食用基礎班上課-切版 ## 課程相關項目連結 ### 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

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.