# 學習歷程記錄器_Part 1:網頁設計&概念
時長: 1hr + 30 min實作時間

## 網頁基礎(知識系列: 1 hr)
- 一個完整的網頁包含兩個部分，前端與後端
- 前端: 網頁外觀的建立 (常用語言: HTML、CSS、JavaScript)
- 後端: 存放資料與各式功能的區域(做動邏輯+資料庫)
- 而前後端相連才可以形成一個可互動的網頁
- **今天的目標: 透過使用者在前端輸入資料進後端資料庫，並使用後端程式做出想要做的功能**
## HTML （HyperText Markup Language，超文本標記語言）基礎介紹
- 前端的架構
- 以 tag 來標記物件的屬性

[基礎語言查詢](http://jinjin.mepopedia.com/~jinjin/webdesign-notes/html.html)
[Reference](https://developer.mozilla.org/zh-TW/docs/Web/HTML)

## CSS(層疊樣式表 Cascading Style Sheets) 基礎介紹
- 前端的外觀(塑造網站的外觀與互動效果)
- 三大基礎: **選擇器(selector)、屬性(property)、與值(value)**
- 進階: Bootstrap 模板的套用

[參考資料](https://www.newscan.com.tw/all-faq/faq-detail-76.htm)
[Bootstrap 3 教學資料](https://www.w3schools.com/bootstrap/)

## JavaScript 基礎介紹
- 直譯式(Interpreted language)、物件導向(Object-based)的程式語言
- 可以嵌在HTML檔裡面
- 讓網頁更生動(可以動起來)

[語言介紹](https://www.awoo.ai/zh-hant/blog/javascript-introduction/#JavaScript%E5%9F%BA%E6%9C%AC%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%B4%B9)

## Figma 基礎使用
- 網頁UI/UX設計工具
- 可以製作出可互動的prototype,模擬網站的實際運作
- Figma Community可以觀摩別人的作品或加以改編應用
- 補充: 現在有些AI工具可以直接從設計稿轉成前端的code

[Ofiicial Website](https://www.figma.com/)
[參考資料](https://frankknow.com/figma-tutorial/)

---

:::info
💡實作時間: 用Figma畫出網頁想要的樣子吧!
:::