Web Design Link Picks
resources from newsletter #0132 #0133 #0134 & #135
Article written on Tuesday, 01 Sep 2020
The web remains a great source of information and resources to learn from. In this edition I've selected some of its finest. I'll start with something useful if you find yourself wrestling with CSS layout. There are also a lot of videos of all the talks of CSS Day 2019 + UI Special to watch. We are take a look at 5 Keys to Accessible Web Typography. Staying on the subject of typography Ethan Marcotte talks about Drop Caps & Design Systems. Also interesting is this article that is breaking down the creation of a conference schedule using CSS Grid Layout. Animation is hot these days so these 5 steps to follow in pre-production are very much welcome. Another hot item is dark mode and how to apply it in your web content. This is only a fraction of what is in there. I hope you find them as useful as I did. Enjoy!
5 Keys to Accessible Web Typography
Just 5 things to make sure everyone can read the content on your website, no matter the disabilities, impaired vision or reading disorders highlighted by Matej Latin.
Drop Caps & Design Systems
Drop caps and the techniques involved in using them on the web explained by Ethan Marcotte.
Relearn CSS Layout
A (new) site by Heydon Pickering andy Andy Bell about (re)learning CSS layout. Very useful if you find yourself wrestling with CSS layout.
CSS Day 2019 + UI Special
Missed out going to CSS Day 2019 + UI Special? Here are all the videos from CSS Day and UI Special Day in Amsterdam last week, available for free to everyone.
Building a Conference Schedule with CSS Grid
Mark Root-Wiley writes an article breaking down the creation of a conference schedule using CSS Grid Layout.
Four Steps Every Motion Graphics Project Should Follow (before starting animation)
Motion designer Evan Abrams has these 4 videos up describing the critical steps to follow in pre-production. From moodboard to final animation, all explained in detail.
Supporting Dark Mode in Your Web Content
Learn techniques to ensure your content looks its best in dark mode on iOS 13 and macOS Mojave in Safari, embedded in other apps such as Mail, or when used in your apps.
Restricting a (pseudo) Element to its Parent’s Border-box
Ana Tudor recreates an extremely challenging bit of UI. The explanation of this next level CSS is so good!
CSS Custom Properties In The Cascade
This article Miriam Suzanne takes a deep look into CSS Custom Properties and how they work alongside the cascade, unleashing some useful CSS tips along the way. Even if you think you know all about custom properties, I think you'll learn something here.
Swiss-Style Typographical Posters With CSS Grid
Classic Josef Müller-Brockmann posters reinvented with HTML and modern CSS! Explore the CodePen pages to learn a thing or two.
Fun places to learn CSS Layout – Part 2: Grid Layout
Stéphanie Walter created a great resources list with fun ways to learn how CSS Grid works.
How to Add Smooth Scrolling with Inner Image Animations to a Web Page
Mary Lou shares a tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport.
