---
# System prepended metadata

title: 網頁前端基礎

---

# 網頁前端基礎 
>雲端系統工程師養成班 
>講師：張智雅
>IG：ch_ch_ya._.a
> Email: chihya.chika@gmail.com

## 課程講義

### 4/18

[Day1 上午 - HTML 網頁前端開發入門](https://docs.google.com/presentation/d/1byMZw7pOpHW01-BQOXayVrqqXvBnVRIoYI-QnXdhjto/edit?usp=sharing)

[Day1 下午 - CSS 網頁定位與佈局](https://docs.google.com/presentation/d/1tXPEG5zGV4Ap0UVmgyn1VMQs6awhlUXRJSCok9X0FEw/edit?usp=sharing)

### 4/19
[Day1 上午 - Javascript 程式基礎](https://docs.google.com/presentation/d/1nEqAl8NlEJYN29OgLl8VviVEZ99IAii6IkE1rwGynyk/edit?usp=sharing)

[Day2 下午 - Javascript 資料處理](https://docs.google.com/presentation/d/1OjOVYOq-8x2ePAKFSWkh7ECQRpMzcjO5iCwTJfWfv1s/edit?usp=sharing)

### 4/20 
[Day3 上午 - 網頁前端互動與資料傳輸](https://docs.google.com/presentation/d/1z-9ZnsLFin_AOColRgRoUzYai2AAeqSl_7EJi5Acx7Y/edit?usp=sharing)

## 課堂練習
### 4/20 動態抓表單資料 [參考範例](https://codepen.io/pen?template=RwxvZWY)
練習要點：
> * HTML input datalist
> * HTML form 序列化

1. [han](https://codepen.io/appleapple802/pen/LYeqQME?editors=1011)
1. [dudu](https://codepen.io/dudututu324/pen/oNpmyNm)
1. [Lucas](https://codepen.io/Lucasqwq/pen/GRyzdRX?editors=1011)
1. [linda](https://codepen.io/lielin/pen/dyJamoX?editors=1011)
1. [Jimmy](https://codepen.io/chih-kuan-dung/pen/bGazKBg?editors=1111)
1. [jerry](https://codepen.io/jerryis123/pen/vYpbjMw?editors=1111)
1. [Tom](https://codepen.io/iijean/pen/bGazLZY)
1. [David](https://codepen.io/se211605035429/pen/NWXoMQr?editors=1011)
1. [rita](https://codepen.io/pbdlayac-the-selector/pen/OJzdZmY?editors=1011)
1. [Hugo](https://codepen.io/am031993/pen/MWrLXWE)
1. [keivn](https://codepen.io/lichieny/pen/mdpvLZN?editors=1011)
1. [Bob](https://codepen.io/tong1006/pen/VwygQqe?editors=0011)
1. [will](https://codepen.io/will-chuang/pen/ZEvwodX?editors=1011)
1. [Cinna](https://codepen.io/cinnaahml/pen/KKZJewm?editors=1011)
1. [ZT](https://codepen.io/xuzhenting/pen/gOoqKpp?editors=1011)
1. [Sherry](https://codepen.io/sherry404621921/pen/MWrLXYE?editors=1011)
1. [Zoe](https://codepen.io/i3fos109e/pen/QWaYreG)
1. [Rileepher](https://codepen.io/rowolphy/pen/oNpmEGK?editors=0110)
1. [神秘連結](https://eloquentjavascript.net/11_async.html)
### 4/20 狗狗照片牆練習成果 [參考範例](https://codepen.io/pen?template=NWXoyeX)

> 練習要點：
> * Web API 串接
> * Ajax 動態載入（axios）
> * CSS Flexbox 

* [han](https://codepen.io/appleapple802/pen/LYeqQME?editors=1111)
* [Tim](https://codepen.io/timse211/pen/gOoqvEm?editors=0111)
* [Tim](https://codepen.io/timse211/pen/gOoqvEm?editors=1011)
* [Jerry](https://codepen.io/jerryis123/pen/vYpbRKx)
* [Nick](https://codepen.io/Nickse614/pen/eYyxMYo)
* [Hugo](https://codepen.io/am031993/pen/RwxvMNp?editors=1111)
* [Lucas](https://codepen.io/Lucasqwq/pen/GRyzdRX?editors=1111)
* [Bob](https://codepen.io/tong1006/pen/VwygQqe?editors=1111)
* [Zoe](https://codepen.io/i3fos109e/pen/GRyzxZv)
* [Jimmy](https://codepen.io/chih-kuan-dung/pen/RwxvQEG?editors=1111)
* [Tom](https://codepen.io/iijean/pen/bGazLZY?editors=1111)
* [rita](https://codepen.io/pbdlayac-the-selector/pen/OJzdZmY?editors=1111)
* [linda](https://codepen.io/lielin/pen/dyJamoX?editors=1111)
* [Albert](https://codepen.io/Albert0224/pen/eYyxryW?editors=1111)
* [Dudu](https://codepen.io/dudututu324/pen/wvpNmMm?editors=1111)
* [Jerry](https://codepen.io/jerryis123/pen/dyJamvN?editors=1111)
* [Rileepher](https://codepen.io/rowolphy/pen/oNpmEGK)
* [kevin](https://codepen.io/lichieny/pen/LYeqQKV?editors=1111)
* [Sam](https://codepen.io/chishengliu/pen/BaJMrWx?editors=1111)
* [will](https://codepen.io/will-chuang/pen/PoEVRVd)
* [David](https://codepen.io/se211605035429/pen/eYyxrMW?editors=1111)
* [ZT](https://codepen.io/xuzhenting/pen/KKZJQEe?editors=1111)
* [Sherry](https://codepen.io/sherry404621921/pen/abEXqeo?editors=1010)
* [Chengs](https://codepen.io/Chengs/pen/PoEVeKv?editors=1111)
* [Cinna](https://codepen.io/cinnaahml/pen/popGLox?editors=1111)
* 
### 4/19 三次方練習成果
> 練習要點：
> * 函數語法
> * 將函數作為引數
>
> 
* [Andrew](https://codepen.io/andrew-chen-the-encoder/pen/RwxEdKj?editors=1111)
* [Rileepher](https://codepen.io/rowolphy/pen/JjMxPej?editors=1111)
* [Tom](https://codepen.io/iijean/pen/XWVOrzO?editors=0011)
* [jerry](https://codepen.io/jerryis123/pen/xxpmvYj)
* [rita](https://codepen.io/pbdlayac-the-selector/pen/wvpNwQP?editors=1011) 
* [Tim](https://codepen.io/timse211/pen/GRyzKOj)
* [linda](https://codepen.io/lielin/pen/OJzdLzm?editors=1111)
* [Lucas](https://codepen.io/Lucasqwq/pen/popqXVz?editors=0011)
* [ZT](https://codepen.io/xuzhenting/pen/YzYBKgG?editors=0011)
* [Sherry](https://codepen.io/sherry404621921/pen/MWrLgMx?editors=1111)
* [Hugo](https://codepen.io/am031993/pen/zYpygRp?editors=1111)
* [Jose](https://codepen.io/leo870319/pen/jOYdOEQ?editors=1111)
* [Cinna](https://codepen.io/cinnaahml/pen/bGazbXM?editors=1111)
* [bob](https://codepen.io/tong1006/pen/dyJwxew?editors=0011)
* [Zoe](https://codepen.io/i3fos109e/pen/QWaYLeV)
* [will](https://codepen.io/will-chuang/pen/KKZJPyo?editors=0011)
* [Nick](https://codepen.io/Nickse614/pen/KKZJPjG)
* [jimmy](https://codepen.io/pen/?editors=0011)
* [kevin](https://codepen.io/lichieny/pen/abEXoVr?editors=0012)
* [han](https://codepen.io/appleapple802/pen/xxpMKBx?editors=0011)
* [David](https://codepen.io/se211605035429/pen/JjMxjpE?editors=1111)


### 4/19 九九乘法表練習成果  [練習 Template]( https://codepen.io/pen?template=WNdYvda)
> 練習要點：
> * 陣列
> * 巢狀迴圈 for 
> * jQuery 虛擬元素.append("")


* Rileepher https://codepen.io/rowolphy/pen/BaJvgyr
* Hugo https://codepen.io/am031993/pen/xxpmojg
* Tim https://codepen.io/timse211/pen/qBpLzqa
* kevin https://codepen.io/lichieny/pen/KKZbjPr
* Jimmy https://codepen.io/chih-kuan-dung/pen/RwxEzyM?editors=1010
* ZT https://codepen.io/xuzhenting/pen/LYeMKOy?editors=0011
* Sherry https://codepen.io/sherry404621921/pen/gOoZNdd
* ***Jerry*** https://codepen.io/jerryis123/pen/WNdLqbg?editors=1111
* Albert https://codepen.io/Albert0224/pen/BaJvgqv
* Zoe https://codepen.io/i3fos109e/pen/ExoGBOZ
* bob https://codepen.io/tong1006/pen/popqXaM?editors=0010
* han https://codepen.io/appleapple802/pen/gOoZNQB?editors=0010
* Linda https://codepen.io/pen?editors=1111
* rita https://codepen.io/pbdlayac-the-selector/pen/vYpvqjd?editors=1011
* Sam https://codepen.io/chishengliu/pen/bGaOZwx?editors=1111
* Tom https://codepen.io/iijean/pen/jOYXjVd?editors=1011
* will https://codepen.io/will-chuang/pen/MWrZMbM?editors=1111
* Cinna  https://codepen.io/cinnaahml/pen/xxpmoMd?editors=1010
* David https://codepen.io/se211605035429/pen/oNpJrye?editors=1010
* Dudu https://codepen.io/dudututu324/pen/dyJwxYK
* Lucas https://codepen.io/Lucasqwq/pen/PoEXrLX
* Jose https://codepen.io/leo870319/pen/vYpbxPw

### 4/19 BMI計算機練習成果
> 練習要點：
> * 變數宣告
> * 條件判斷式 if/else if/else 
> * jQuery 修改元素內容 $("Selector").text("")

* Sam https://codepen.io/chishengliu/pen/WNdLmGY
* Jimmy https://codepen.io/chih-kuan-dung/pen/oNpJVXY?editors=1011
* Nick https://codepen.io/Nickse614/pen/yLpGwVd
* Zoe https://codepen.io/i3fos109e/pen/KKZbEgE
* Hugo https://codepen.io/am031993/pen/popqYEB?editors=1111
* ***jerry*** https://codepen.io/jerryis123/pen/GRyPerQ?editors=1111
* Albert https://codepen.io/Albert0224/pen/yLpGwer?editors=1111
* will https://codepen.io/will-chuang/pen/wvpROoE?editors=1111
* Dudu https://codepen.io/dudututu324/pen/KKZbEEw?editors=0010
* Sherry  https://codepen.io/sherry404621921/pen/WNdLmwY
* David https://codepen.io/se211605035429/pen/eYybXzO?editors=1011
* ZT https://codepen.io/xuzhenting/pen/PoEXLbe?editors=1011
* Cinna https://codepen.io/cinnaahml/pen/zYpybdr?editors=1111
* Tim https://codepen.io/timse211/pen/xxpmMaK?editors=1011
* Tom https://codepen.io/iijean/pen/jOYXJWX?editors=1011
* Jay https://codepen.io/gherkintw/pen/popqGxx
* bob https://codepen.io/tong1006/pen/YzYdgXV?editors=1011
* Rileepher https://codepen.io/rowolphy/pen/mdpagyQ?editors=1111
* Chengs https://codepen.io/Chengs/pen/NWXeJxL?editors=1011
* kevin https://codepen.io/lichieny/pen/zYpybqG
* linda https://codepen.io/lielin/pen/dyJwagM?editors=1011
* rita https://codepen.io/pbdlayac-the-selector/pen/popqYgY?editors=1011
* Lucas https://codepen.io/Lucasqwq/pen/OJzrdBx?editors=0111
* han https://codepen.io/appleapple802/pen/eYybXBY


### 4/18 Flexbox 練習成果
> 練習要點：
> * 認識並應用 flexbox 常見參數
 
* will ![](https://i.imgur.com/Afmhxy8.png)
* Jose ![](https://i.imgur.com/pkyfiUk.png)
* Rileepher ![](https://i.imgur.com/aNOPop5.png)
* Hugo ![](https://i.imgur.com/AuE8ZHJ.png)
* Zoe ![](https://i.imgur.com/6d2M2L2.png)
* kevin ![](https://i.imgur.com/DSXVPKp.png)
* Tim ![](https://i.imgur.com/YFPszOg.png)
* ZT ![](https://i.imgur.com/22AMsc8.png)
* Sam ![](https://i.imgur.com/6rBuwKO.png)
* Lucas ![](https://i.imgur.com/p7USEx4.jpg)
* Albert ![](https://i.imgur.com/UjBZIPm.png)
* Bob ![](https://i.imgur.com/98Erf2k.png)
* David ![](https://i.imgur.com/MwmRPit.png)
* Nick! [](https://i.imgur.com/HDBDcAK.png)
* Tom! [](https://i.imgur.com/noiHpqh.png)
*  ***Jerry*** ![](https://i.imgur.com/URsQFO5.png)
* Linda ![](https://i.imgur.com/tuOTdyq.png)
* cinna ![](https://i.imgur.com/MDVNzG3.png)
* sherry ![](https://i.imgur.com/aLxRheJ.png)
* Dudu ![](https://i.imgur.com/Cn1lRPJ.png)
* Chengs ![](https://i.imgur.com/m1zOdDs.png)
* han ![](https://i.imgur.com/xWx0RMD.png)
* rita ![](https://i.imgur.com/eKLVSqM.png)
* Jimmy ![](https://i.imgur.com/sKTY1lk.png)

