Title | : | How to write Semantic CSS |
Duration | : | 08:49 |
Viewed | : | 89,613 |
Published | : | 07-02-2023 |
Source | : | Youtube |
Most people know about semantic HTML, but when it comes to CSS, things are a little more wishy-washy most of the time. Rather than relying on arbitrary class names, we can use different semantic selectors though! π Links β Ben Myers article on Semantic CSS: https://benmyers.dev/blog/semantic-selectors/ β Using CSS to Enforce Accessibiliity by Adrian Roselli: https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html β User Facing State by Scott OβHara: https://css-tricks.com/user-facing-state/ β Semantic CSS with Intelligent Selectors by Heydon Pickering: https://www.smashingmagazine.com/2013/08/semantic-css-with-intelligent-selectors/ β Teaching my 11-year-old HTML & CSS: https://youtu.be/o2FVxF2471k β Timestamps 00:00 - Introduction 00:16 - The problem with class names 01:36 - How we can write semantic CSS with a navigation 05:42 - Hamburger menu & tab examples 07:00 - How to find the appropriate aria and role attributes #css -- Come hang out with other dev's in my Discord Community π¬ https://discord.gg/nTYCvrK Keep up to date with everything I'm up to β https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! πΊ https://www.twitch.tv/kevinpowellcss --- Help support my channel π¨βπ Get a course: https://www.kevinpowell.co/courses π Buy a shirt: https://teespring.com/stores/making-the-internet-awesome π Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualstudio.com/ --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Create Accessible Tabs with HTML, CSS & JS 52:39 - 51,337 |
How to take control of Flexbox 16:01 - 25,284 |
Every CSS Animation property 09:26 - 4,649 |
The problem with percentages in CSS 09:26 - 103,760 |
The new CSS pseudo-classes explained - :is() :w... 13:50 - 124,115 |
:has() opens up new possibilities with CSS 14:30 - 279,361 |
Avoid These 5 Awful CSS Mistakes 20:42 - 183,308 |
5 super useful CSS properties that don't get en... 16:23 - 136,366 |