網頁動畫與互動程式入門-HTML/CSS/JS/Sass/Pug [線上課程] 線上課程

網頁動畫與互動程式入門-HTML/CSS/JS/Sass/Pug [線上課程]

你曾經想學寫程式或網頁嗎?
看過線上課程，學校上課，卻還是不知道怎麼做？
以我自己的學習經驗，練習寫一個好的網頁是寫程式最快速入門的方式。但大部分的教學課程只著重在講解功能，卻沒告訴你要怎麼設計、怎麼把網站做得吸引人，離真正上線的網站還有段距離，覺得沮喪。
寫一個網頁，並不只是寫程式，更是一場設計與體驗的過程。
這堂課會告訴你為什麼要學寫程式，以及要怎麼規劃網站，不會在電腦前毫無靈感。會從設計師與工程師的角度看，去操作網頁，一切你想像的美麗畫面，我們會網頁的程式語言呈現。
不同於一般的網頁教學，我們會用最好用、簡便的平台 -- Codepen 來教學，學習中不需要上下傳檔案，也可以即時看到更新的效果。以進階的 Pug/Sass 樣板語法，簡化 HTML/CSS 的繁瑣，讓學習更加沒有負擔、程式好讀易懂，也可以分享給你的爸媽、朋友看，不會因為一點點打錯，導致網站出不來想翻桌。跟著這堂課從零到一，一起入門網頁開發！
不論你是國中生、高中生、大學生、設計師，只要是你想碰網頁，我會為你準備好一切你需要的素材，幫助你以最小的阻力入門，即使你不懂設計，也能知道去哪裡找資料。

課程大綱

這門課會帶領你從網頁的最基礎、網頁動畫到最後實作出自己一個自我介紹網站

我們不只是講投影片的網頁課，我們更著重實際寫程式的練習，在課程堂，老師會一步步帶領學生完成各種範例練習
也會很有耐心的解決學生的問題喔！適合不喜歡聽課，喜歡親手做出東西的同學來上課

本次課程分成 10 堂課
1. HTML, CSS 基礎練習
- 講解 HTML 與 CSS 的基礎概念
- 課堂練習：Google 首頁排版
- 範例連結：https://codepen.io/darrenyaoyaoyao/pen/BazoRrK

2. HTML, CSS 進階練習
- 講解HTML 與 CSS的進階概念
- 課堂練習：Google 搜尋頁排版
- 範例連結：https://codepen.io/darrenyaoyaoyao/pen/NWNKEWa

3. CSS Flex 排版技巧
- 講解 CSS Flex 的排版技巧
- 課堂練習：Youtube 首頁排本
- 範例連結：https://codepen.io/darrenyaoyaoyao/pen/GRqjjEj

4. CSS Flex 排版進階技巧
- 講解 CSS Flex 的排版技巧
- RWD 響應式排版觀念
- 各種排版觀念的補充
- 課堂練習：Youtube 影片排版
- 範例連結：https://codepen.io/darrenyaoyaoyao/pen/oNxgvMJ

5. Javascript 基礎一
- 講解 Javascript 變數、條件、函數等概念
- 課堂練習：計數器
- 範例連結：https://codepen.io/darrenyaoyaoyao/pen/oNxPRVe

6. Javascript 基礎二
- 講解 Javascript 陣列、迴圈等概念
- 課堂練習：待辦清單
- 範例連結：https://codepen.io/darrenyaoyaoyao/pen/eYZQwMJ

7. Javascript 進階
- 講解 Javascript 進階技巧與更多練習
- 課堂練習：待辦清單
- 範例連結：https://codepen.io/darrenyaoyaoyao/pen/eYZQwMJ

8. CSS 動畫基礎
- 講解 CSS 動畫觀念
- 課堂練習：文字動畫
- 範例連結：https://codepen.io/darrenyaoyaoyao/pen/abNvRgy

9. CSS 動畫進階與 Bootstrap
- 結合 CSS 動畫與 Javascript 打造更酷炫的動畫內容
- Bootstrap 基礎介紹
- 課堂練習：文字逐格動畫
- 範例連結：https://codepen.io/darrenyaoyaoyao/pen/wvGMwYO

10. 網頁進階知識補充
- 簡單介紹 Pug, Sass, Jquery
- 課堂練習：個人網站驗收

適合對象

不需要任何基礎
適合剛開始想學寫程式、網頁的初學者
對設計抱有好奇心的同學，會更加分

開發環境

任何一台可以上網的電腦
利用 Codepen 進行開發與練習

線上課程注意事項

●線上課程採遠距教學，無需到班上課!

●線上課程影片無字幕輔助

●線上課程為非同步教學，無法及時互動回覆，請學員需自行評估是否適合自己的學習模式。

● 上課教材、影片：開課當天會發送註冊信至信箱，註冊完畢後即可開始上課。

● 繳交作業期限：依照各班講師規定；通過課程標準才會製作證書。

● 課程影片下架日：結束日後六個月

●學員於開課後登入課程時， 登入帳號務必與報名時所填寫的EMAIL相同!!!

公務員全程參與課程學習後可於課程結束後申請登錄公務人員學習時數

 

(一)轉班或退費期限：開課日後⅓時數內，詳情連結

(二)結業狀況：查詢是否合格及證書製作進度，結業名單連結

(三)線上課程上課時間：請參考官網最新消息「線上課程常見QA」，詳情連結

(四)報名備註欄位僅可填寫優惠同行人，收據開立時間及其他問題請直接寄EMAIL向我們聯繫

近期班次

講師介紹

黃意堯

個人網站：https://darrenyaoyao.github.io/

學歷

  • 國立台灣大學電機工程學系學士學位
  • 美國加州大學聖塔芭芭拉分校交換學生

經歷

  • 牛奶找工作 App、網站開發者
  • 騰訊微信 AI 實驗室自然語言處理研究員
  • 成功大學人工智慧兼職講師
  • 牛奶網路有限公司負責人

得獎紀錄

  • 美國計算機協會ACM 人機互動會議CHI’15 學生遊戲競賽-創新介面組 TranSection Top 3
  • 2017 EMNLP 自然語言處理會議發表論文
  • 2018 ASRU 語音處理會議發表論文
  • HackNTU’14 第二屆臺大黑客松-第二名&人氣獎 ● Hackathon Taiwan 10th 台灣黑客松-最佳設計獎
  • 程式開發經驗：Javascript, Python, Java, C#, React, Pytorch, TensorFlow

專欄文章