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

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

課程大綱

這門課會帶領你從網站的草稿跟設計開始,要怎麼思考佈局,不會在螢幕前不知所措。

除了教你怎麼佈局網站外,我們的目標是要把網站做『好』,而不是單純的做出來,但卻不好用,不敢給同學、家人、男女朋友看。




教材方面,我也會準備好需要用到的圖,以及各種輔助工具,帶著完整整體的網站開發流程。也會有 Facebook 社團、聊天群組,幫助大家及時解答問題,定期把更新的教材告訴大家。報名一次,終身教學。

我們一起一步一步,將夢想的網站以及動畫實現出來!

網頁動畫與互動程式入門課程大綱,共計 30 小時課程為一期

主題一:認識什麼是網頁?
網頁的歷史
網頁是如何運作
HTML / CSS 基礎認識
開發工具簡介
作業一:幾何圖案設計

主題二:美感的重要性
什麼是設計
配色選擇
HTML / CSS 進階認識
CSS3 動畫教學
作業二:個人名片設計

主題三:為什麼寫程式很厲害
程式的歷史與故事
程式可以發揮的價值
程式管理工具介紹
Bootstrap 介紹
Pug/Sass 基礎介紹
作業三:文字動畫特效

主題四:突破!動態控制你的網頁
程式語言介紹
Javascript 基本介紹
利用 Javascript 控制網頁
Pug/Sass 進階練習
作業四:學期課表製作

主題五:網頁設計師養成之路與未來學習方向
用手機打開網頁怎麼辦:RWD 原理
網頁視覺概念介紹
Javascript 進階介紹
Jquery 介紹
未來學習路線

課程內容將依照學習狀況進度做調整,亦可斟酌大家的意見追加內容。

這將是一系列課程的第一步:
網頁動畫與互動程式入門
網頁開發進階班 React
網頁前後端整合 React, NodeJS

對這一系列的內容有興趣的同學,趕快來加入我們的行列!

適合對象

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

開發環境

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

近期班次

  • 第336期 開課日期:2020.11.16 招生中

    上課時間: 週 (一)(四)
    7:00 PM ~ 10:00 PM
    上課日期:2020.11.16 ~ 2020.12.17
    學費:新生新台幣5000元整

  • 注意事項

    • 上課地點:台灣大學資訊工程學系系館 詳細位置;教室號碼將於開課前一日公佈於官網"最新消息"中。
    • 上課教材:開課後將公布教學網站給同學查閱。
    • 結業狀況:請上官網”結業名單”查閱是否合格及可領取證書進度。

    講師介紹

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

    專欄文章