Uploaded December 2024 | Updated September 2026, 2 hours ago
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".
🎄 Participate in JavaScriptmas to win MDN & Scrimba Merch, lifetime Scrimba access and a 13" Macbook Air M3: cssw.io/javascriptmas
📆 Demo: cssw.io/javascriptmas-demo
📆 You need to be logged in to view the demo—but signup is free. 😉
🔗 Links
Scrimba Course Intro to UI Design Fundamentals: scrimba.com/intro-to-ui-design-fundamentals-c0q?via=ZoranCSSweekly
Guide to HSL Color Format: youtu.be/VInSzHOeFkE
Guide to :root selector: youtu.be/lXUS5E4gqV0
Guide to Logical CSS Properties: youtu.be/cV9JhEV4Ll0
Guide to Individual Transform Properties: youtu.be/ZAXSbjrOZwg
Adobe Color: color.adobe.com
Coolors: coolors.co/palettes
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
📖 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
Help support my channel
👨🎓 Get a course: masteringlinting.com
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: patreon.com/cssweekly
Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
👨💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #javascriptmas
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".
🎄 Participate in JavaScriptmas to win MDN & Scrimba Merch, lifetime Scrimba access and a 13" Macbook Air M3: cssw.io/javascriptmas
📆 Demo: cssw.io/javascriptmas-demo
📆 You need to be logged in to view the demo—but signup is free. 😉
🔗 Links
Scrimba Course Intro to UI Design Fundamentals: scrimba.com/intro-to-ui-design-fundamentals-c0q?via=ZoranCSSweekly
Guide to HSL Color Format: youtu.be/VInSzHOeFkE
Guide to :root selector: youtu.be/lXUS5E4gqV0
Guide to Logical CSS Properties: youtu.be/cV9JhEV4Ll0
Guide to Individual Transform Properties: youtu.be/ZAXSbjrOZwg
Adobe Color: color.adobe.com
Coolors: coolors.co/palettes
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
📖 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
Help support my channel
👨🎓 Get a course: masteringlinting.com
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: patreon.com/cssweekly
Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
👨💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #javascriptmas
