A Practical, Hands-On Guide to Improving Your UI (JavaScriptmas Challenge)
A step-by-step guide on fixing bad user interfaces based on fundamental UI Design principles.
A step-by-step guide on fixing bad user interfaces based on fundamental UI Design principles, along with tips that will help you take your UI skills to the next level—based on a JavaScriptmas coding challenge "Ugly Advent Calendar".
JavaScriptmas Challenge
- Participate in JavaScriptmas to win MDN & Scrimba Merch, lifetime Scrimba access and a 13" - Macbook Air M3: https://cssw.io/javascriptmas
- Demo: https://cssw.io/javascriptmas-demo
- You need to be logged in to view the demo—but signup is free. 😉
Chapters
- 00:00 Intro
- 00:16 What is Javascriptmas
- 01:02 JavaScriptmas - Ugly Advent Calendar Challenge
- 02:30 How to set up a color palette
- 06:56 How to check color contrast in DevTools
- 07:39 How to set up good typography
- 09:48 How to set up HTML headline hierarchy
- 11:00 How to use alignment in UI
- 12:15 How to use whitespace in UI
- 13:43 How to fine-tune text sizes & spacing in UI
- 15:40 How to set up interesting calendar UI
- 17:33 How to set up clickable cards in HTML/CSS
- 23:48 How to create a ribbon in CSS using clip-path
- 25:05 How to add additional colors to UI
- 26:28 How to tweak CSS Grid sizing
- 26:48 How to tweak HSL colors
- 27:13 How to make UI more refined & interesting
- 29:24 How to use Font Awesome
- 30:49 How to make mobile responsive UI
- 34:34 How to add interactivity to Card UI
- 40:44 Ugly Advent Calendar Challenge Stretch Goals
- 41:19 Why should you participate in JavaScriptmas
