# Part2 網站開發 Week06 - Week10

:::spoiler 學習網頁基礎 HTML
熟悉基本及常用標籤的運用
熟悉比較冷門的一些標籤
熟悉如何使用有語意的（semantic）標籤
熟悉 SEO 基本概念
熟悉常見網站的 HTML 標籤
:::

:::spoiler 學習 CSS
熟悉常見屬性如 background, color, width, height 等等
知道 inline、block 跟 inline-block 的區別
知道什麼是 box model
知道 position 的所有屬性及其差別
熟悉 CSS selector，可以輕鬆選到想選到的元素
:::

:::spoiler 學習 JavaScript 在瀏覽器上的運用
知道如何用 JavaScript 操控 DOM 物件
知道如何幫一個按鈕加上 event listener
知道捕獲與冒泡是什麼
知道什麼是事件代理（delegation）
知道怎麼用 JavaScript 更改元素的 style
:::

:::spoiler 學習 MySQL 資料庫
知道如何使用 Select 選取資料
知道如何使用 Update 更改資料
知道如何使用 Delete 刪除資料
知道如何使用 Insert 新增資料
熟悉 where, join 等等這些基本語法
:::

:::spoiler 學習後端 PHP 開發
理解前端與後端的差別
理解前後端溝通流程
熟悉 PHP 基礎語法
熟悉 PHP 與資料庫的串接
能夠寫出基本網站
:::

## [Week06（05/17 ~ 05/23）：前端基礎 HTML 與 CSS](https://hackmd.io/UcFK370bTa2HMBdZ7r4mlQ?view)

- 指定教材
- [x] [FE101] 前端基礎：HTML 與 CSS
- [x] [Chrome 網頁除錯功能大解密](https://www.udemy.com/course/chrome-devtools/)
- [x] 小遊戲 : [CSS Diner](https://flukeout.github.io/)
- [x] 小遊戲 : [Flexbox Froggy](http://flexboxfroggy.com/)
- [x] 可參考 : [金魚都能懂的網頁設計入門](https://ithelp.ithome.com.tw/users/20112550/ironman/2072)
- 文章
- [x] 零基礎的小明要如何成為前端工程師？
- [x] 跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR
- 作業
- [x] HW6 作業
- [x] 挑戰題
- [x] 超級挑戰題
- 自我檢測
- [x] P1 你知道 HTML 是在做什麼的
- [x] P1 你知道如何使用有語意的（semantic）標籤
- [x] P1 你知道基本 SEO 的概念
- [x] P1 你知道 CSS 是什麼
- [x] P1 你知道 inline、block 跟 inline-block 的區別
- [x] P1 你知道什麼是 box model
- [x] P1 你知道 position 的所有屬性及其差別
- [x] P2 你知道 :hover, :before, :after
- [x] P2 你知道 :nth-child 的各種用法
- [x] P2 你熟悉 CSS selector，可以輕鬆選到想選到的元素

## [Week07（05/24 ~ 05/30）：前端基礎 JavaScript](https://hackmd.io/lnrX8cfgRTO5NGAiMHxnkw?view)

- 指定教材
- [x] [FE102] 前端必備：JavaScript
- 文章
- [x] DOM 的事件傳遞機制：捕獲與冒泡
- [x] 好用的網站：https://htmldom.dev/
- 作業
- [x] HW7 作業
- [x] 挑戰題
- 自我檢測
- [x] P1 你知道 JavaScript 跑在網頁上跟跑在 Node.js 上差在哪裡
- [x] P1 你知道 DOM 是什麼
- [x] P1 你知道如何用 JavaScript 操控 DOM 物件
- [x] P1 你知道如何幫一個按鈕加上 event listener
- [x] P1 你知道捕獲與冒泡是什麼
- [x] P1 你知道什麼是事件代理（delegation）
- [x] P2 你知道怎麼用 JavaScript 更改元素的 style
- [x] P2 你知道 preventDefault 與 stopPropagation 的差異

## [Week08（05/31 ~ 06/06）：前端基礎串 API](https://hackmd.io/6dhEYvauTfuopuVSaMIuLw?view)

- 指定教材
- [x] [FE102] 前端必備：JavaScript
- 文章
- [x] 輕鬆理解 Ajax 與跨來源請求
- 作業
- [x] HW8 作業
- [x] hw 1 挑戰題
- [x] hw 2 挑戰題
- 自我檢測
- [x] P1 你知道什麼是 API
- [x] P1 你知道什麼是 Ajax
- [x] P1 你知道從網頁前端呼叫 API 與在自己電腦上寫程式呼叫的差異
- [x] P1 你知道什麼是同源政策（Same-origin policy）
- [x] P1 你知道如何存取跨網域的資源（CORS）
- [x] P1 你知道什麼是 JSON
+ [x] P2 你知道什麼是 JSONP 及其原理
## [Week09（06/07 ~ 06/13）：後端基礎 PHP 與 MySQL](https://hackmd.io/GNutKAchQZWg3ca0rg5YIg?view)

- 指定教材
- [x] [BE101] 用 PHP 與 MySQL 學習後端基礎 : 70% ( 到 PHP 內建 session 機制 )
- 文章
- [x] 白話 Session 與 Cookie：從經營雜貨店開始
- [x] 淺談 Session 與 Cookie：一起來讀 RFC
- [x] 深入 Session 與 Cookie：Express、PHP 與 Rails 的實作
- 作業
- [x] HW9 作業連結
- 自我檢測
- [x] P1 你知道 PHP 是什麼
- [x] P1 你知道前端與後端的差別
- [x] P1 你知道什麼是資料庫
- [x] P1 你了解基本的 SQL 語法，包括 Select、Insert Into、Delete 與 Update
- [x] P1 你能夠寫出基本的 CRUD 應用
- [x] P1 你知道什麼是 Session
- [x] P1 你知道什麼是 Cookie
- [x] P1 你知道 Session 與 Cookie 的差別
## [Week10（06/14 ~ 06/20）：複習週](https://hackmd.io/E9CWfxFwSwOiTXhQBFF9Cg?view)
- 複習
- [x] HTML 與 CSS
- [x] DOM 以及 JavaScript 如何與網頁互動
- [x] 前端利用 Ajax 與後端串接
- [x] PHP 與 MySQL
- 測驗
- [x] [面試考題綜合能力測驗](http://mentor-program.co/huli/game/index.php) ( 難道網頁看不見東西就是真的沒東西嗎？)
- 闖關遊戲
- [x] 一共十關 [r3:0 異世界網站挑戰](https://r30challenge.herokuapp.com/)（特別感謝第三期 @minw 製作遊戲）。
- 作業
- [x] HW10 作業