References

Readings

• Reading 1
• Reading 2
• Reading 3
• Reading 4
• Reading 5

Exercises

Exercise 1: GitHub

• GitHub Setup

Exercise 2: Grid

• CSS Grid in 100 seconds
• CSS Grid Garden

Execise 3: CSS Fonts & Animation

• CSS Text Animation
• MDN Web Docs
• CSS Rotating workds: YouTube

Exercise 4: Flexbox

• Digtial Ocean
• Learing FLexbox: YouTube
• W3 Schools

Exercise 5: JavaScript

• JavaScript Loops: YouTube
• StackOverflow
• MDN WebDocs JavaScript Guide
• MDN WebDocs JavaScript Basics
• setTimeout() and setInterval() – JavaScript Tutorial: YouTube
• JavaScript Input: YouTube

Exercise 6: jQuery

• FigJam File
• W3Schools
• jQuery UI

Exercise 7: Responsiveness

• Media Queries: YouTube
• MDN WebDocs

Exercise 8: JSON

• GitHub: Public APIs
• MDN WebDocs: JSON
• How to use API: YouTube
• What is an API: YouTube
• The Coding Train: YouTube
• JSON APIs: YouTube

Exercise 9: Favicon

• WebFLow
• HTML Favicon: YouTube

Projects

Project 1: Storybook

• CSS only: YouTube
• How to pure CSS that: YouTube
• Process Template: Peter Ha
• Shapes of CSS: CSS tricks

Project 2: Poster

• What Comes After The Environment: YouTube
• Naomi Klein: Guest Speaker
• Mirko Zardini: Guest Speaker

Project 3:Interaction

• Hover Interactions: Educate
• SimpleLearn: Hover
• MDN WebDocs: HOver
• Dribble: Hover Interaction
• Awwwards
• Mousemove

Index

• Webflow
• Circle animations
• Sky and Telescope
• Space website design: Jahidul Bin Rafiq
• Website design: Iskandar Agung

ChatGPT was also used for assistance.