網頁動畫與互動程式入門-HTML/CSS/JS/Sass/Pug

網頁動畫與互動程式入門-HTML/CSS/JS/Sass/Pug

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

課程大綱

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

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

本次課程分成 10 堂課
1. HTML, CSS 基礎練習
- 講解 HTML 與 CSS 的基礎概念
- 課堂練習:Google 首頁排版

2. HTML, CSS 進階練習
- 講解HTML 與 CSS的進階概念
- 課堂練習:Google 搜尋頁排版

3. CSS Flex 排版技巧
- 講解 CSS Flex 的排版技巧
- 課堂練習:Youtube 首頁排版

4. CSS Flex 排版進階技巧
- 講解 CSS Flex 的排版技巧
- RWD 響應式排版觀念
- 各種排版觀念的補充
- 課堂練習:Youtube 影片排版

5. Javascript 基礎一
- 講解 Javascript 變數、條件、函數等概念
- 課堂練習:計數器

6. Javascript 基礎二
- 講解 Javascript 陣列、迴圈等概念
- 課堂練習:待辦清單

7. Javascript 進階
- 講解 Javascript 進階技巧與更多練習
- 課堂練習:待辦清單

8. CSS 動畫基礎
- 講解 CSS 動畫觀念
- 課堂練習:文字動畫

9. CSS 動畫進階與 Bootstrap
- 結合 CSS 動畫與 Javascript 打造更酷炫的動畫內容
- Bootstrap 基礎介紹
- 課堂練習:文字逐格動畫

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

適合對象

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

開發環境

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

近期班次

講師介紹

個人網站: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

專欄文章