心怡的學習筆記

讓排版技巧更為洗鍊
讓排版技巧更為洗鍊
更通盤了解數據分析
更通盤了解數據分析
讓簡報變得更精彩
讓簡報變得更精彩
網站前端設計_基礎觀念
網站前端設計_基礎觀念
1.網站設計札根學習
2.優化網頁結構
3.了解RWD設定情形
4.介紹CSS3常用屬性
網站前端設計_基礎觀念
網站前端設計_基礎觀念
1.網站設計札根學習
2.優化網頁結構
3.了解RWD設定情形
4.介紹CSS3常用屬性
程式設計_jQuery
程式設計_jQuery
語法入門介紹
Vue個人筆記
Vue個人筆記
(陸續建置中…)

　網頁設計練習

　主題式網站範例分享

Travel World

  1. 網站設計基礎介紹
  2. HTM5結構及CSS3常用屬性介紹
  3. transition應用
  4. animation動畫結合
  5. before、after應用
  6. @font-face與 Icon font結合
(適合：桌機顯示)

Bakery House

  1. 網站設計基礎介紹
  2. HTM5結構及CSS3常用屬性介紹
  3. transition應用
  4. animation動畫結合
  5. before、after應用
  6. @font-face與 Icon font結合
(適合：桌機顯示)

Happy School

  1. 網站設計結構了解
  2. 範本/版型應用
  3. 優化網頁結構

(適合：桌機顯示)

Wild Life

  1. 藉由實際範例了解RWD設定情形
  2. @font-face與 Icon font結合
(適合：RWD)

Interior Design

  1. jQuery應用
  2. Tabs應用
  3. AD廣告顯示
  4. 自動輪播
  5. 視窗scroll事件
(適合：桌機顯示)

主題一　網站設計整合

  1. PhotoShop網站設計規劃
  2. illustrator Svg格式 logo匯出
  3. 圖片匯出方法介紹
  4. @font-face與 Icon font結合
  5. Html及Css網頁設計
  6. RWD應用
  7. jQuery初體驗
(適合：RWD)

主題二　Bootstrap套用

  1. Bootstrap套用
  2. jQuery應用
  3. 善用Flex版面結合
  4. Vue構建用戶界面的漸進式框架
(適合：RWD)

主題三　電影開麥拉

  1. jQuery應用
  2. 資料載入【XML、Json】
  3. Vue構建用戶界面的漸進式框架
(適合：桌機顯示)

　筆記

課程參考書
(1)w3schools(英):https://www.w3schools.com/
(2)runoob(中):http://www.runoob.com/
(3)wibibi(觀念參考書):http://www.wibibi.com/
課程素材
(1)照片:https://pixabay.com/
(2)向量圖:
https://www.freepik.com/
https://www.vecteezy.com/

(3)人像圖庫
https://generated.photos/

複製
複製
複製
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-grid.css">