|
Hello Reader,
Yup, you read that right, I'm hosting a totally free CSS Grid workshop this week! You can scroll down a bit if you're interested in that, but first I want to talk a bit about one of my goals with my second channel.
One of my favourite things to do there is to have conversations with other people, and while I have had a few in the past, most episodes are just me rambling about things.
I've finally reached out to some people and have several guests lined up now, the first of which dropped in this week, when I had the pleasure of having a fantastic conversation with Sara Soueidan.
I always enjoy talking with people who have a very deep knowledge of the topic. Just like I can nerd out about CSS all day long, Sara knows a ton about accessibility, and her passion for it was obvious during our conversation.
A few of the highlights for me:
- How we can use empathy to show why accessibility is important.
- When starting a new project or feature, start by thinking about how users are going to use what you are building, and design around that, rather than designing things the way you think they should be used.
- We talked a lot about ARIA, and how it helps enhance HTML when we need it, like when creating something (usually more advanced interactions) that there are no HTML features for.
And we talked about much more than that, getting into how CSS impacts accessibility, course creation, and even a bit about homemade mayonnaise.
You can find the audio-only version here (which has links to Apple Music, Spotify, and the RSS), or you can watch it on YouTube.
 โ
๐โโ๏ธ What Iโve been up to this week
How to set custom error messages for your HTML forms
 โThe browser comes with native, client-side form validation that works quite well, but the errors have a few issues, from problems with internationalization, and no way to custom style them. Luckily, we can use the same API the browser uses under the hood to customize our errors quite easily!
You can find the starting and finished code in this repo if youโd like to follow along or poke around at what I did.๐โโ๏ธ What I've been up to this week.
|
๐
Coming next week: FREE CSS Grid Workshop
This upcoming Friday, I am hosting a CSS Grid Workshop in my Discord community.
Many people find the number of Grid properties overwhelming, or that Flexbox is easier to use, so this workshop focuses on getting started with Grid and learning how we can keep it simple, even as layouts become more complex.
This is the first proper workshop that I host in my community, and I plan to run new ones every month going forward.
You can join the community here so you donโt miss it, and itโll tell the time in your local time zone as well.
And yes, it is completely free to join!
|
โก Quick tips of the week
Stop it with the useless declarations and work with the browser instead
 โA quick look at how declarations like width: 100% that look innocent enough can actually cause more problems than not declaring anything at all.
At the end, I also give a bonus tip, looking at height: stretch.
Single-color gradients
The HTML & CSS Tip of the Week is back!
To be a bit more time efficient, these are going to be based on Shorts of mine, so they might seem a little familiar, but the content won't be exactly the same.
In this one, I look at two use cases for single-colour gradients.
I've also done a small update of the design over there. It's added a little bit of jank on scroll that I need to investigate, but overall I think it's looking a bit better ๐.
|
๐ Quiz time!
Sticking with our Layout theme for September: In CSS Grid, what happens when you use grid-auto-flow: column with grid-template-rows: repeat(3, 1fr) but donโt define columns?
- Creates columns for all the direct children, the rows do nothing
- Creates 3 rows, and if there is more than 3 direct children, adds more columns
- Creates 3 rows, and if there are more than 3 children, it repeats 3 more
- grid-auto-flow isnโt a real property, so it doesnโt do anything
As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.
|
|
โ
๐ Other awesome stuff around from the web
|
๐
Have a fantastic week!
Kevin
|
Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too ๐
Beginner friendly (and free)
Conquering Responsive Layout
A free course to help you approach responsive layouts with the right mindset.
โEnroll โโ
|
|
Intermediate
CSS Demystified
For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!
โEnroll โโ
|
|
Advanced
Beyond CSS
An advanced course that dives into project architecture, theming, design systems, and more.
โEnroll โโ
|
|
โ
|
|
|
If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205 |
|
|