|
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!
Which of the following CSS properties allows us to resize image elements within their boxes, the same way we can do `background-size: cover` or `background-size: contain` for background images?
- image-position
- image-size
- object-fit
- object-size
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)
HTML & CSS for Absolute Beginners
A free course that starts with the absolute basics, and gets to creating some layouts with Flexbox and Grid.
β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 ββ
|
|
Intermediate (Frontend Masters)
Build a Modern Site from Scratch
Build a fully responsive site using modern CSS features, along with some polished animations.
βEnroll β (25% off first month of Frontend Masters if you use this affiliate link)
|
|
β
|
|
|
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 |
|
|