網頁前端課程目錄

這個系列是本人在教老婆前端開發時的所有點點滴滴，把它全部從 codepen 移植過來 Blog 保存，也提供給所有對前端開發有興趣、或是想要投入這個領域的朋友們

希望大家都能順利學習，並完成自己心目中的夢想或目標喔，加油!~

第一章：HTML5 與 CSS3

HTML

• 第一課 - 何謂 HTML
• 第二課 - 常用HTML標籤
• 第三課 - HTML引用外部資源
• 第四課 - 何謂 RWD
• 第五課 - Iframe 插入 youtube 影片

CSS3

• 第一課 - 何謂 CSS
• 第二課 - CSS撰寫構造
• 第三課 - CSS使用位置
• 第四課 - CSS常用屬性
• 第五課 - CSS進階屬性
• 第六課 - CSS選取器
• 第七課 - 何謂 CSS Reset, Normalize
• 第八課 - 何謂 Functional CSS

第二章：切版

FlexBox 基礎練習

• 第一課 - 單欄切版
• 第二課 - 兩欄切版
• 第三課 - 三欄切版
• 第四課 - 四欄切版+RWD
• 第五課 - 多欄切版

常見切版問題

• 第一課 - 文字強制換行
• 第二課 - 元素間距調整問題
• 第三課 - 虛擬 table 排版
• 第四課 - 垂直居中

第三章：元件製作練習

簡單元件

• 第一課 - 文章區塊
• 第二課 - 自訂按鈕
• 第三課 - 下拉選單 Dropdown

進階元件（含部分動畫效果）

• 第一課 - 導覽列 Navbar
• 第二課 - 滑動介紹板
• 第三課 - 圖片 Zoom 功能
• 第四課 - 圖片鏡向顛倒功能
• 第五課 - RWD Iframe 影片

UI 框架 Bootstrap

• Bootstrap 範例實作(Forms 之前)

第四章：CSS 動畫

基礎練習

• 第一課 - transition 基礎練習
• 第二課 - transform 基礎練習

進階練習

• 第三課 - @keyframes 動畫基礎

第五章：網頁開發常用工具

編輯器

• Nodepad++
• VSCode
• Sublime

開發工具

• CSS 自動前綴詞補齊工具 - Autoprefixer
• 程式碼壓縮工具
• 測試用圖片產生工具 - Placeholder
• 測試用免費 API 工具 - JSONPlaceholder

其他工具

• 瀏覽器相容性查詢 - CanIuse
• 線上圖片壓縮工具
• Email 測試工具

第六章：JavaScript

基礎篇

• var 變數定義, 資料類型, typeof
• JS - 給值, 運算, 比較運算符
• JS - if / else if / else 條件判斷句
• JS - For Loop 迴圈處理
• JS - String, Number, Array 基本方法
• JS 基礎 AJAX 請求

語法基礎練習

• JS - Basic Practice

常用內件模組篇

• Date 日期模組
• Math 運算模組

重要觀念篇(面試必會)

• Scope 變數作用域
• Hoisting 變數提升
• Strict Mode 嚴格模式
• this 指標
• JSON 儲存資料格式
• AJAX 資料傳輸

第七章：JQuery

基礎練習

• JQuery Ready State 判斷html已載入完全
• JQuery - parent 用法

基礎實戰練習

• JQuery 動態加入 HTML
• JQuery Nav Tab 頁簽功能
• JQuery Alert Box 彈出視窗
• JQuery LightBox & Modal
• JQuery - 動態彈窗內容
• JQuery 平滑滾動
• JQuery Photo Caption

進階實戰練習

• JQuery 動態加入 HTML (複雜版)
• JQuery - 動態插值並套用事件打開彈窗
• JQuery 浮動式選單(封裝)
• JQuery AJAX Get 請求

第八章：Vue.js

基礎篇

• 何謂 MVVM
• Vue 組件 component 和 props
• Vue 計算屬性 computed 過濾器

實作練習

• Vue TodoList 待辦事項
• Vue 計算屬性過濾器搭配 v-if, v-for
• Vue - double v-for with click 事件傳值
• Vue Calendar日曆