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, 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: https://cssw.io/javascriptmas
📆 Demo: https://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: https://scrimba.com/intro-to-ui-desig...
Guide to HSL Color Format:    • Switch to HSL Color Format  
Guide to :root selector:    • What exactly is :root selector in CSS?  
Guide to Logical CSS Properties:    • In-Depth Guide to CSS Logical Properties  
Guide to Individual Transform Properties:    • Create Complex Transitions With Individual...  
Adobe Color: https://color.adobe.com/
Coolors: https://coolors.co/palettes

Subscribe to CSS Weekly Newsletter:
💌 https://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: https://masteringlinting.com/
🪧 Buy a CSS sticker pack: https://stickers.css-weekly.com
💖 Support me on Patreon:   / cssweekly  

Keep up-to-date with CSS Weekly:
🐦 Twitter:   / @cssweekly  
🎶 TikTok:   / cssweekly  
🎇 Instagram:   / cssweekly  
📘 Facebook:   / cssweekly  

Keep up to date with what I'm up to:
👨‍💼 Blog: https://zoranjambor.com
💼 LinkedIn:   / zoranjambor  

Zoran Jambor
#css #javascriptmas