--- title: CSS is Awesome with Kevin Powell date: 2022-03-22T05:00:00-04:00 author: Sean Smith canonical_url: "https://website101podcast.com/episodes/season-05/episode-6/css-is-awesome-with-kevin-powell/" section: Podcast --- <!\[CDATA\[YII-BLOCK-BODY-BEGIN\]\]>[Skip to main content](#main-content)![Kevin Powell](https://website101podcast.com/uploads/hosts/_200x200_crop_center-center_none/kevin-powell.jpg)Guest Kevin Powell Helping people fall in love with CSS [ ](KevinJPowell) Season 05 Episode 6 – Mar 22, 2022 47:54 [Show Notes](#show-notes) ## CSS is Awesome with Kevin Powell  0:00 0:00 1.0x 0.75x1.0x1.25x1.5x2x [](//dts.podtrac.com/redirect.mp3/website101podcast.com/uploads/mp3/season-05/S05-E06-kevin-powell.mp3) Kevin Powell CSS evangelist discusses everything to do with CSS and why it is awesome. ### Show Notes - Kevin's history with web development and teaching - Teaching in classroom vs online teaching - How do you decide what you are going to teach? - Where do you go to learn about new things in CSS that you want to teach? - Upcoming CSS including *Cascade Layers*, *CSS nesting*, *Container queries,* and *Query units* - Kevin's thoughts on frameworks (Foundation, Bootstrap, Tailwind) and Sass vs regular Css*.* - min-content max-content fit-content - Browser support and progressive enhancement - Accessibility - CSS naming conventions - BEM ### Show Links - [CSS Layout News](https://csslayout.news/) - [CSS Weekly](https://css-weekly.com/) - [Modern CSS newsletter](https://thinkdobecreate.com/newsletter/) - [Tailwind CSS](https://tailwindcss.com/) - [Bootstrap](https://getbootstrap.com/) - [Foundation](https://get.foundation/sites/docs/) - [SASS](https://sass-lang.com/) - [3 useful CSS values that most people don’t know about](https://www.youtube.com/watch?v=DM244V9KvNs) - [The 6 most important CSS concepts for beginners](https://www.youtube.com/watch?v=JnTPd9G6hoY) - [5 important HTML concepts for beginners](https://www.youtube.com/watch?v=HJ0-fUJ-2F0) - [BEM](http://getbem.com/) - [Scrimba](https://scrimba.com/teachers/kevin-powell) Powered Transcript Accuracy of transcript is dependant on AI technology. **\[00:00\]** **Amanda:** Welcome to another episode of the Website 101 podcast. It's the podcast for novice web developers and small business owners who want to learn more about running and optimizing their websites. This is season 5, episode 6. Hey, I am Amanda, and hello to my co-host, Sean. **\[00:21\]** **Sean:** Hey, how's it going? And Mike. Hi, and I was just wondering exactly how small does a business owner have to be to live listen to this podcast like 5152. **\[00:35\]** **Mike:** This is not the dad joke podcast, but okay. **\[00:38\]** **Amanda:** Small, small, big, tough drive. Same problem. This week I am super excited to introduce our guest. His name is Kevin Powell and he is a CSS educator. Hey, Kevin, how you doing? **\[00:54\]** **Mike:** Yeah, I'm doing great. Thank you so much for having me. **\[00:56\]** **Sean:** Yeah, thanks for being on the show. you're a huge YouTube star. Sort of. You got a big YouTube following, eh? **\[01:04\]** **Mike:** I checked just before we started recording and you have just under 450,000 subscribers. I'm one of them, but. Still, that's a pretty impressive number. Yeah, and I still don't know how it's happened, but it's kind of exciting that it's gotten this big, yeah. **\[01:22\]** **Sean:** So is this, is that all you do now is your YouTube stuff? or do you do any client work or work for anyone else? Is it just YouTube? **\[01:30\]** **Mike:** It's basically YouTube now and just CSS content courses as well. But yeah, it's all about content creation these days. Cool, that's awesome. So Kevin, on your website, kevinpal.co, you said, I teach people how to make the web and how to make it look good while they're at it. And then you said you're like a CSS specialist. So to you is CSS the most important aspect of the web to you or just the part that you enjoy the most? It's definitely the part I enjoy the most. I don't think there's a, you know, it's hard to sort of separate from the big three of HTML, CSS and JavaScript when it comes to the most important. I don't think one is necessarily more important than the other, but CSS is definitely the one that I enjoy the most by far. It's been a long time. I started in the late 90s when I was in high school still, just making websites for fun. **\[02:21\]** **Sean:** How long have you been working with web stuff, with web technologies? **\[02:26\]** **Mike:** It's been a long time. I started in the late 90s when I was in high school still, just making websites for fun. I had a few little hobby things. I had some Star Wars RPG I was part of, so we had a very simple forum, and I'm like I should make a landing page for it and stuff back with table-based layouts, and that was mostly doing stuff. Yeah. This Photoshop make the design and Photoshop slice it up and then try and make it actually work. So, it's been a while that I've been doing it, it was really a hobby thing for me for a long time before finally becoming something a bit more professional later on. **\[03:04\]** **Sean:** Yeah, Sean and I recently recorded episodes earlier this season where we interview each other about how we got into this industry and Amanda will have an episode coming up. **\[03:17\]** **Amanda:** I am so excited to out nerd the two of you. We'll see, we'll see. **\[03:22\]** **Sean:** But yeah, but it's the same deal with us. We all started sort of like in the late 90s, doing the same stuff, image-ready slicing and all that crazy stuff. Yeah, I don't miss it at all. Yeah, the rounded, you don't miss the rounded corner, little chunks of images, the rounded corners. **\[03:39\]** **Mike:** What is it, sliding doors? **\[03:42\]** **Sean:** Yeah. And the spacer pixel, the one pixel space gift thing. **\[03:46\]** **Amanda:** I saw on Reddit recently, somebody posted that their co-worker had a one pixel background that was white. **\[03:56\]** **Sean:** Oh, like a repeating pixel that was like, nice, that's crazy. **\[04:03\]** **Amanda:** So Kevin, I wanted to ask because you are the CSS educator and you have such a huge following on YouTube, have you ever done in-person teaching? Do you have any type of a teaching background? **\[04:16\]** **Mike:** Yeah, so that's actually sort of how I started the channel was after when I was working at one point, I actually, the school I'd originally gone to, well, one of, I went to a lot of schools, but when it was actually a bit more related, they got in touch with me and asked if I wanted to teach with them. And the school was primarily at print design school, but they were expanding and had a lot of new students and needed some new teachers. And then when I got there and they realized that since graduating, I'd been doing a lot of web work, I quickly got put into teaching the web classes because a lot of the teachers there were print people that some of them had played with web stuff years ago, but they're like, oh, he knows what he's doing. He gets to teach that. And so I sort of became the de facto or one of two de facto web teachers. And so I taught in the classroom for five years, it was at a vocational school. so it was adult education stuff, yeah. **\[05:15\]** **Sean:** Cool, yeah Amanda's a teacher right now on the other business, right? **\[05:19\]** **Amanda:** One of my, I have fingers in many different pies, and so yes, one of them is that I'm teaching web development part time at Seneca College here in Toronto. **\[05:28\]** **Mike:** Thanks. I used to be a teacher, but not web development. I was teaching ESL, so that was a long time ago. So, Kevin, how does teaching in the classroom compare to coming up with your own ideas and videos and things like that, which obviously you enjoy doing the videos now, but how do you feel, what are the pros and cons of either for you as a teacher? Yeah, so I think teaching in the classroom definitely was a big plus to have done that before trying to teach online, just because you sort of see a little bit more of how people that are unfamiliar with something think and the questions that can come up and that type of thing, because if not, you're just sort of, you know, saying what you know, rather than trying to break it down, I think more, because when you're teaching in the classroom, you know, they'll interrupt you and say, I don't get it. So knowing that and realizing how much you have to break things down, I think is really important. The thing that's, I think that's a big drawback of teaching online is that you don't really know what people are asking until afterward, instead of juring. And that's even, I like doing Twitch streams and stuff too, just because at least when there's interaction with the chat and other things going on, you can do side tangents and talk about other things that give a bit more deeper understanding on something, especially when it's YouTube. Like when you're looking at YouTube and making tutorials and educating through YouTube, you You also need to fit things into a certain sort of, you know, what's their attention span for just watching a tutorial and other things that are a bit different from when you have a captive audience who's literally sitting in front of you. The nice thing with online is I can pick and choose and do what I want and not have to follow like a specific curriculum. So it's like, oh look, this is something new that I want to learn or get into. I'm going to just make a video on it because, you know, that's cool and I've been playing with it and I want to let everyone know about it. So it's a bit more free form, and I can, yeah, more freedom with it is really nice. **\[07:31\]** **Sean:** How much thought do you put into, I mean, I don't do YouTube videos, but I can only imagine just because of the popularity of the platform like that I'm competing with so many other videos and other producers, especially in this field. Do you put a lot of thought into, well, how am I going to get people to watch my video instead of some other dude's video that's about a similar topic, you know? **\[07:55\]** **Mike:** Yeah, I don't, and I think it's because when I started the channel, it was a hobby project, it was really just, because I said I'd started teaching the web stuff, but it was really introduction to web things. And it was just over and over and over, like, introduction to HTML and CSS. And after a while, I was like, I need to do more than just this. So I started just doing videos on sort of more advanced topics and other things that were interesting to me. And it's always sort of been that and just, let me, you know, this is what I want to talk about. This is what I think could I could do a video on it would sort of serve my audience and I try my best on that and Obviously, I keep in and I out on what other people are up to but I don't worry too much about competing with them I figure if people like my approach or my style will watch my stuff And if they like someone else's then they'll watch theirs and that's fine for me. Good for them. Yeah. Yeah So related to that how do you decide what you're going to teach like you're you know you're obviously very well versed in an advanced user of CSS or whatever. How do you decide if you're going to do something for an advanced person or intermediate or somebody who's new to the industry? How do you decide the priorities and then the approach to recording it or planning the lesson? Yeah, so I am trying to diversify a little bit on that front, especially now that I'm doing it full-time and I'm thinking about it more as an actual thing instead of just this hobby project where I would just do whatever I wanted. So I am trying to sort of cover the different bases because if it was just exactly what I'm most interested in right now would probably be a lot of the future stuff that's coming that we can't even use yet anyway. So people that doesn't tend to do as good just because people are like, if I can't actually use it now, then I don't care. So I try and sort of balance things out. I see questions that people have and other things and I also look at like if I'm doing a long like I want to build out a project or build out something that's a bit more fun to do and people tend to like that type of thing. I don't want to have to stop continually during it. So I try and look at different topics that I would have to bring up and be like if you're unfamiliar with this, you know, check out this other video where I actually deep dive how that works. just so on the larger scale stuff you don't have to. So I think it's just about balancing that and sort of breaking things down. And trying to make sure it's fun for me too is really important. So I think by diversifying the content a little bit just in terms of let's cover the fundamentals, let's build something intermediate, let's do something a bit more advanced, let's look at the future of CSS and trying to do a little bit of everything for me. I think having that diversity in the content makes it more interesting for me. I think the audience tends to like it. **\[10:41\]** **Sean:** You mentioned you're excited about things to come in CSS very often and you're reluctant to get too deep into that. Where do you go to learn new things about CSS, new things that you might want to teach or things that you don't know yet? **\[10:56\]** **Mike:** Yeah. So, I follow a lot of people who are either involved directly with the CSS Working Group or who You know, you know, they just keep their year to the ground on what's happening. So that definitely helps. So it's like on Twitter, there's enough people and following there. I also on several CSS newsletters that I could give you guys the links to. So maybe I could go in the show notes in the show notes. That would be excellent. I'll probably subscribe as well. Yeah, because there's a few really good ones that often will, you know, just say like, this is what's going on now or this is what's coming up or are things like that. So it's a bit of a mix of those things and then I mean I've learned so much stuff just by researching one topic and then ending up in a rabbit hole into something else like the amount of time I spend in the MDM docs is kind of crazy and then that will lead me down into something I've never heard of while I'm researching something else and then that you know I just keep going for a while and then sometimes there's no docs yet on some things you end up in the actual spec and then you see sort of what's coming, but I am sort of in a privileged position for that, because that's sort of my job now, so I can actually spend time doing that. I realize most people **\[12:11\]** **Sean:** can't. Yeah, we interviewed West Boss recently and he hit a similar thing where he talks about diving deep into what the browsers support and will support and might not, and yeah, he had the same **\[12:24\]** **Amanda:** same kind of thing. I am way way too impatient for the show notes. Can you give me a couple teaser's right now about stuff that's coming up that you're CSS-wise that you're excited about. **\[12:35\]** **Mike:** I think for me, I don't know, there's quite a few. I mean, the one that's probably going to come first is Cascade Layers, which, because that's now- I don't know what that is. So it's a new, we're going to complicate specificity more than it already is. Oh, no. But basically, we're going to be able to create layers within our CSS. So it's specificity layers within your CSS, where you can be like, here's your base layer, here's like a utility class layer, and here's my component layer. And you can have something that's like an ID selector in your base layer can be overwritten by an element selector in your component layer because the component layer is a higher level than the other one. All right, yeah, I could see that and I could see it getting really difficult to troubleshoot. Yeah, so I'm curious how the DevTools are going to be worked out for that. But I think for certain things like dealing with frameworks, that could be super useful. Like if you are using a framework or something else, that gets brought in on your, you know, your framework layer, you have to like say a reset layer and then your framework layer, and then your own code comes after that, just all in one. And then you don't have to worry about trying to go like, you know, if you're ever dealt with bootstrap and you're trying to override something, And it's just this nightmare of specificity and then you just, you can just do it super easily. So it will raise, it'll make things a bit more complicated. And I think we'll have to see how it plays out in the long run. But I'm interested to see how that happens. **\[14:05\]** **Amanda:** Especially for new developers. I think that there's going to be, because I find very often students, they just want to know it and they want to know it now and they don't necessarily want, I keep telling them, learn the foundation and figure out the basics. And we're going to build off of that. and sometimes the ones that are really keen will just like want to jump in the middle of it and make a complete mess, which I encourage, you know, get in, play with it, break it, fix it, it's the best way to learn, but too often I think that sometimes this is going to make a couple **\[14:34\]** **Mike:** heads explode for sure. Yeah, so we have that coming and then I think on top of that, something that else students will potentially or new developers could make a mess of things and nesting is coming to CSS. So if you used to, oh, thank god, I'm looking forward to that. I don't, I don't use SAS that much anymore, but that's the biggest thing I miss from it. Yeah, and there's a few little interesting gothues on how that's going to work because it still uses the ampersand parent selector, but it works a little bit different than the pre-processors, and it's a little bit like with a custom property versus like a SAS variable where the variables pre-rendered, so it just gets put in whereas a CSS variable is like a live or custom property, is like a live custom property that can be manipulated. You can play with it with JavaScript and stuff. The ampersand is actually going to be like a live selector. I'm not sure how that's going to play out exactly or what implications it's going to have, but I'm always amazed to when people take some things and just push them to the extreme and you can see the cool things that happen with them. And I think the one that I have to mention is container queries. Oh yeah, I'm looking forward to that as well. That'll be so nice to see that come out. And I think one thing people don't realize with container queries is along with those. We're also getting query units. So instead of like container queries are going to be really cool, but I think query units are going to be more popular potentially, just because that would be like instead of a viewport unit, it'll look at like the width of the parent instead of the width of the viewport or the height. Could we back up for a second for listeners who don't know what a container query is? Of course. **\[16:05\]** **Amanda:** Right. The small business owners who we've already lost in this episode or or or novice **\[16:11\]** **Mike:** So I'm aware of it because it's been a little bit of a buzz for a while, but Kevin, can you probably have a better understanding of it than I do? So basically we have right now we have media queries where you can media queries always look at the size of the viewport or the browser window effectively. And so you could say like I want the easiest is like my background colors black at small screens and then as you make the background the viewport bigger. So you change devices or you make your browser window bigger, you could then say at a minimum width of 600 pixels, we're going to change the background color to purple just as a simple example. **\[16:47\]** **Amanda:** And by the way, to interject us for a second. Thank you so much for making that mobile first responsive design with your example media query right there. Any students listening? **\[16:57\]** **Sean:** It gets larger, not smaller. **\[16:59\]** **Mike:** Yes. Yes. So yeah, as you get bigger, then you hit this new sort of rules of CSS, you can redefine things at this larger screen size. And the one limitation for that is everything becomes based on the size of the browser window. So whether it's on a phone or a laptop or whatever, but you're really stuck on what's the browser window. And today we live in a very component-based world where we're designing individual components often that you want to be able to plug and play into different situations. And if you have, say, a card that you want, and on large screens, it's an image with the text next to it, and it's small spaces, you want an image on top in the text underneath. And so you're using a media query to define that. The problem is you can't, if you're looking at a media query that's based on the viewport size, and you take that card and you place it somewhere that just doesn't, it's a sidebar, and it doesn't have a lot of room there, it won't adjust based on the room it has to live. still looking at the size of the screen. Whereas a container query is going to look at the size of the space it's living inside of. It's parent container. Yeah and you can actually, it's kind of interesting how it works because it doesn't have to be the parent, you can define what it's actually looking at. Oh, interesting. It will change how we do the markup on things a little bit just because a lot of the time it will be the direct parent and you actually have to re, you have to sort of create the container for it, so there'll be some little gotchas with that as well. But it'll really look at the size of the parent container most of the time, like you said. And then so because it's looking at that, you don't have to worry about the size of the viewport, you just plug in the pieces where you want, and if it has a lot of room to live, then it can go next to each other. If it doesn't have a lot of room to live, then the items can stack on top of each other. That's so cool. I've wanted container careers for a long time, but I'll just have to be patient a little longer. So Kevin earlier you mentioned bootstrap and things like that. So we're wondering what as a CSS teacher evangelist, what do you feel or what do you think about bootstrap, foundation, tailwind and sass versus just writing plain CSS? So yeah, I think that I understand why people people really like tools like Bootstrap in Tailwind, but I'm not the biggest fan of them in general. Okay. **\[19:27\]** **Sean:** Just before you continue, we'll say that Sean and I are big Tailwind fans. Amanda does not use Tailwind. So you can't go either side and be on everyone's side here. **\[19:37\]** **Mike:** And going back to Tailwind, when we interviewed Adam Watham a while ago, I did mention that I feel that Tailwind is more for advanced learners. people who already have a strong grasp of CSS fundamentals, despite what you hear the buzz that it's made for beginners, I completely disagree. And Adam actually agreed with me. Yeah, and I agree with that actually, just with what I have done with it. And I think the problem with that in general is it's a lot of people that are using it because they're not comfortable with CSS. And, you know, for me, it's anytime a tool is a crutch then like the reason I like CSS is because it's the language that it's built on. So I think, I just think it's important that if you're gonna be using it to try and at least understand the fundamentals of it. I realize, you know, if your job is a JavaScript developer and you're writing JavaScript 95% of your day, you don't have the time to devote to getting into the weeds of CSS and vice versa. And so I completely understand that. So that's where tools like Tailwind and Bootstrap and other things definitely make people's lives easier. So I understand 100% why people enjoy them and you know, it helps them out for that. Um, for me, I guess the issue is always like even with tailwind coming out, like bootstrap was the one that was the hot stuff people were only using that for so much. And then it's, it's not dead by any means. It's still used more than anything else I think. Um, but tailwinds obviously now like the new hot thing. And eventually there'll be another new hot thing later down the road. Um, it's a little bit like with say, uh, you know, jQuery. I don't think anyone expected jQuery to die off and it's sort of vanished. Unless you're, you know, if you're maintaining sites, it's probably still around very much so, but it's not what it used to be, and then it's like, you know, you get people now that learn React, but they don't really know JavaScript that well. The same thing could easily happen where React, no one thinks it's ever going to die, but, you know, it's five years, 10 years from now, who knows, but chances are JavaScript will still be. Chugging along. So I just think it's really important to know like the fundamentals and really understand I guess have a strong base and then if you're using these tools on top of that because it just lets you work faster I think that's fine But it also lets you shift and like oh today I'm working on a team that's using tailwind and we're doing this and then the next you know Maybe your team decides to switch or do something else and you're able to adapt. So I think for that. It's good **\[22:14\]** **Sean:** for me. And I'm also not good at JavaScript and it drives me crazy when I look up how to do something in JavaScript online and you get all these people saying, oh yeah, you just do this And you've researched it, oh, they're using JQuery. So it shows how much impact that that tool has had over the years, right? And, you know, that's, I guess, your point is that if we attach ourselves too much to that, then it's, we're going to forget the fundamentals, right? **\[22:41\]** **Mike:** I do, I do see, you mentioned SAS also. I do see SAS a little bit differently just because I see it as a different way to author CSS rather than, well, I mean, I see that in your videos, you almost are always using SAS, or at least it seems like most of the videos that you put out, you use SAS. So any projects I do, I'll use SAS, or larger scale things. And then if I'm looking at an individual topic, then I'll just use regular CSS. Because I do want to make the videos as accessible as possible, especially if it's like, here's how this property works or something like that. But when it gets to larger scale stuff, I use SAS personally. So I'm going to show that workflow. And I know a lot of people today are wondering if SaaS is as important as it used to be, especially if other tools as well, like Post-CSS is becoming really popular and it can do some of the things that you can do with SaaS. I think SaaS and Post-CSS work really well together, but I also know that for small projects, and like, especially if you're a beginner, like I wouldn't even worry about SaaS, I'd worry again just learning the fundamentals of CSS. Absolutely. Just because you can make a mess of things, if not. And then, but once you know those fundamentals, If you start working on a larger project and bigger scale projects, I think that's where SAS comes in and just lets you work faster. And a little bit like Tailwind. Tailwind's like that weird, it's a framework in a way but you can sort of author things as well through it. So I think that works. **\[24:10\]** **Amanda:** Hi, Amanda here. If you're enjoying the Website 101 podcast, we would love it if you could give us a positive review on Apple podcasts or wherever you get your podcast. Reviews help new listeners find out about us and allow us to keep doing the show. **\[24:24\]** **Sean:** Thanks. So Sean, do you want to go into some of these videos that you have picked out of Kevin's channel and sort of ask him some specific things about those? **\[24:33\]** **Mike:** Yeah, sure. So I've been subscribed to Kevin's channel for a long time. I don't watch all of your videos because the beginner ones are not necessarily for me, but I like to keep up with it. And if a headline grabs me, or I got a little bit extra time. I'll watch it over some viral video. So I like to learn a little bit more. All right, so about a week ago, you put out a video, three useful CSS values that most people don't know about. And I actually found this really helpful because I had heard about them, but I have never actually used them. And these three values are min content, max content, and fit content. Could you go into that a little bit, and I feel this is more for advanced users than beginners, but correct me if I'm wrong. Yeah. I think I guess the understanding for that, just as a quick rundown on it first, well I think about what level maybe, but when we have, it's dealing with block level content mostly, where something normally has a width, it's auto, but it basically is 100%. So if you put like a paragraph or a heading or a div, they're going to be the size of their parent, whether that's the viewport or whatever. They fill up as much space as they can. And then min content, max content, and fit content, they're all values you can give, so you can say width min content or width fit content. And it changes the width, but instead of being a set value, they're considered intrinsic properties because it's a lot like auto where the browser is figuring out how big it should be, but it's doing it based on the content that's inside of that element. So the example I gave in that video was with a title and so I remember what the title was but let's just say, you know, even a hello world whatever. And you give it a background color on an each one. And so that background color, even though hello world is very short, the background color fills up the width that's available like a full line. It's not just doing the words hello world. So if you did a min content max content or fit content, it's going to look at that text rather than looking at how much space it has and it's going to adjust the width based on the text that's inside of that H1. Min content will make it as small as it can possibly get. So it's going to, you know, our hello world, they're probably both the same length but, you know, if you had a short word and a long word, the smallest it could possibly get is the length of the largest word that's in there. Max content the opposite, it's going to keep all of the text on one line. And this you do have to be very careful with max content because it's very easy to get overflows because the text will never wrap. It's always it's a set at that fixed size of however long your text is. What is a use case for max content? I don't remember everything in the video. I just remember I enjoyed it and it reminded me about these properties. Yeah, I've used max content in with grids. so that's definitely when you get into more advanced stuff, where I had a grid and one of the columns was set to max content because the only thing it was living in there I think was an image and I just wanted to make sure that that column stayed the size of the image or something like that. It's definitely not one that I use very often. I do think that even like fit contents probably the best of both worlds because fit content will act like a max content but if there's not enough room then it will allow the text to actually wrap. So if there's a lot of room, then it keeps everything on one line. But then if it runs out of room, it allows for wrapping. So it sort of, it works out the best in most scenarios, I think, the fit content one. I think, as you said, all three of them, they're not something you'd use on a regular basis all the time. But there's so many of these things with CSS. And I think the important thing is that anyone tries to memorize min content, max content, fit content. It's just to know that there's these properties or values out there that can do something like that. So when you do run into a situation where you go, I really wish this was working. And then all this, you know, hopefully get that flash of, oh, I heard about something like that before. And then you can, after enough googling, you can figure out what it actually is. Yeah. And this is why I really like this video because it reminded me about those properties, which I had forgotten about because I've never had a need to use them before. **\[28:58\]** **Amanda:** I have a quick question about this before we go on. Because I haven't used these before. So in the example that you gave before were if you have an H1 like a heading that just has a bit of content in it and then you wanted to put a background color image or whatever instead of having it go all the way across because it's a block element change the width to one of these values is the H1 still a block element like does it still break the content above and below yes yeah that's cool yeah okay so it's **\[29:24\]** **Mike:** a little bit like even like switching to inline block in a sense but it would it would almost be like **\[29:30\]** **Amanda:** creating, like, putting another div around it to keep the block element and then making the H1 inline so that the styling leaves that far and that's adding additional almost unnecessary in that case HTML, which is just going to get messier when the CSS is much cleaner. **\[29:47\]** **Sean:** Yeah, exactly. Yeah. **\[29:48\]** **Amanda:** Fantastic tip. Thank you. **\[29:50\]** **Sean:** I have a quick question, too. Since you've been around as long as we have, you may remember, I don't know if you go back, as far as IE6 or something like that, but browser support is often even today an issue. I think Safari is usually the bad guy these days. How often do you encounter issues where some browser doesn't support some feature and how do you deal with that in terms of whether or not you teach it on your channel, that kind of thing? **\[30:19\]** **Mike:** Yeah, there's a lot of content I've done where I get, you know, what about browser support in the comments. I think the one that drives me, just, what, the thing that comes up the most still today which drives me nuts is anytime I do a video on grid and people are like, what about browser support? And I'm just like, chances are you're fine. I understand some people are still worried about internet explorer, especially if you're doing e-commerce or something where, you know, it's literal dollars that you have to be conscious of. But on that front, pretty much any large company has now dropped support for Internet Explorer, including Microsoft. So that's even if you go to use their online docs for the Microsoft ones, it still works now, but they've said we're not actively supporting it anymore. So they're just developing, adding new features, developing it, assuming people aren't using it. If you test, if I go on my computer now with Internet Explorer and try to go to YouTube, it will actually open Edge on my computer automatically. That's nice. Yeah, and the Internet Explorer window jumps to something that says this page is better in Edge, and Edge is already open with that page there. So it is something like, no Netflix isn't supporting it, Twitter, LinkedIn, all of the Facebook, so I don't think it's as big of a deal, and it's very quickly going to be less and less of a deal. But definitely with new features, we do have to worry about it a little bit. I do like talking about up and coming things. It also depends on what it is. Like one of them, it's a video I did where it's a small feature. It's called marker. So it's a pseudo class. So it's like two colons and then the word marker. And basically, it lets you change the color of bullet lists and things like that and style those or do different things with them. Without it used to be, you'd have to make a new pseudo element and change the content. It was a lot more work. Right. And it was one of those things where at the time, not all the browsers are supporting it, but like if a browser's not supporting that, it just means that your bullet list is still black bullets or whatever it is, but if it is supporting it, then they get this better experience. So like, I think the progressive enhancements, if it's a feature that it's not gonna break your site or it's not relying on it, I think then you're very safe using it and as people get onto newer browsers and it gains support, then it's perfect. Okay, I just learned something new today. Marker. **\[32:40\]** **Sean:** I have used Marker before, I can say that. I have, yeah. **\[32:43\]** **Mike:** What is the browser support for that right now? **\[32:46\]** **Sean:** Like, honestly, what about browser support, can't I? **\[32:49\]** **Mike:** No, I mean, I'm just curious, is it all modern browsers or is it like still coming? I think it's all modern browsers now. Okay, cool. And like you said, I don't really care that much if it's not supported, but I like the idea that it's there and I am gonna use it now that I'm aware of it. **\[33:07\]** **Sean:** Degrades gracefully. I have another use case for, you know, you mentioned some companies are still supporting IE, whatever. I often work with nonprofits in one case that I often encounter is that the organizations I work with have staff or visitors in like the global south, where their technology that they're using is not necessarily the best of the best, in which case they might be using an old computer that's still running, I don't know, Windows XP, or whatever it is, that does have Internet Explorer. So sometimes for the longest time I had to develop with that in mind. It's not so bad anymore, but it hasn't been that long before that's been an issue. So yeah, there are some times, but for most people, it's not anything, I guess. **\[33:55\]** **Mike:** The other thing on that that I also see is like, I do think that if somebody's on Internet Explorer today, they probably don't want to be. So if they got to a site and it just doesn't work, that sucks. So I'd, you know, I would want to give them an experience that actually works, but it's always been something for a long time because these days, I think the whole like pixel perfect thing, I think, has mostly been killed off. But I remember when browser subscribe telling that to clients. But like back when browser support was a bigger issue than it was today, it used to be that it had to be this identical experience in all of them, which was next to impossible at the time. And then like we've evolved and I think that's slightly shifted away from that, but you still get everyone wanting the same experience across all browsers. But it always confuses me a little bit because if somebody's, say, on their, you know, when you have a user who's on, say Chrome, and they're visiting your website, and then they're going to visit your website on their phone and their desktop computer, they're getting two different experiences, just because of the constraints of the screen size. And so if one user's allowed to have two different experiences, I don't understand why different users can't also have different experiences. So if the internet, someone is using internet explorer and they're not getting all the bells and whistles, but they're landing on something that's functional, it doesn't look fantastic, but at least it works. I don't see that the harm in that and that it's not this identical site for every single person who's landing there. I'm with you on that. **\[35:18\]** **Sean:** Yeah, you can also argue that the content of the site is really what the most important thing that you should be focusing on anyway. So the presentation of it, and if it's slightly different for this person than it is for that person, maybe that's not the thing to be focusing on, hundred percent. **\[35:33\]** **Mike:** Yeah. There's actually a couple of videos that I'm going to link to that I found useful, but I want to switch topics a little bit. We're going to mention those videos. So the six most important CSS concepts for beginners that came out at the very beginning of the year. I think this is a good one for our beginner listeners. and another one from December, five important HTML concepts for beginners. So that's HTML and CSS. And one thing that I feel is really, really important with websites is accessibility. And I was wondering what your thoughts are on that. And if you have any videos on accessibility or have a plan to go into it, I know you're a CSS evangelist and accessibility is not your focus, but it's adjacent at a minimum. Yeah, so one thing when I did decide to go full time with it, I sort of put together sort of my ethos for my brand and all of that, and one of them was to get a larger focus on accessibility, because I do think it's something that's really important, like you said, and it's something that seems to be, I think the problem with accessibility in general is it's treated as a separate topic. It's not treated as part of, you know, it's when you're learning HTML, then you learn CSS, then you learn JavaScript, and then there's, oh, look, there's also accessibility. When really accessibility is something it's baked into all those things. And it should be taught as part of each of the fundamentals. Exactly, yeah. So that's one of the approaches that I'm trying to do it. Cause it's one thing that bothers me a lot, if I look back on my older content that's still out there is some of it, like I'm looking at it and I'm just like, oh my goodness, I did that. Like, it's terrible. **\[37:25\]** **Amanda:** But I think that everybody who has ever written any code could say that about code that they've written or a blog post that they made or anything that's ever been out there online. You go back and you look at it and it's like, God, what was I thinking that day? **\[37:39\]** **Mike:** Yeah, it just shows that you've grown as a developer. **\[37:44\]** **Amanda:** That you're evolving. **\[37:45\]** **Mike:** you should, when you do an accessibility specific video, call yourself out and say, hey, if you watch my older video, I made this mistake, but this is how I would do it today. Yeah, I think that's a really good point. And I think that's one thing I'm trying to also do. And because for me, it's not something I'm super, super knowledgeable on. It's something that I'm trying to learn as much as I can so I can help integrate it into my content. But I have done a few videos recently that look at very specific topics. So I mean, some of them were a bit more simple and I didn't specifically say it's accessibility, but it would even, I think it was in that six or five HTML concepts where I just talk about the heading levels and sort of the impact those actually have on the document structure, and then that leads into like a talk on accessibility. I did one or two videos recently. One of them, I think just came out. So I have too many videos. I did one for like a skip content or skip to main content link. And that video actually is exploded. It's one of my most popular ones that I put out recently. But it's because I found a good clickbait title for it. I just said, most sites have a hidden link and you're should too. So people, you know, like could it be? We will add that to the show notes listeners. And for anybody who's listening who doesn't know what it is, it's just for people who navigate websites with the keyboard rather than a mouse, sometimes you just, you know, the first or one of the first things when you use a tab to navigate through. So there's this hidden link where you tab really early on to say skip to main content. So you can just hit tab, hit that, and you skip the navigation, you skip any other thing, and you just get to the core of that page. So you can imagine if you're on a blog page, and you've already clicked the article that you want, and then you push tab, you have to go back through the navigation. You just want to get to the actual content that you wanted to get there for. They're super easy to put in, but that was one of those ones where I'm like, So I can actually make a video on this that people will probably watch, whereas I think for a lot of accessibility topics, that's a little bit harder. So the idea of actually just implementing it, like let's build something and then as I'm going through it trying to integrate accessibility and bring it up, I think is a better approach. **\[39:57\]** **Sean:** Regarding that skip to content thing, I often use that, I'm a big keyboard guy, and I use that in Google when I'm searching for something I'd hit Tab Enter Enter because it's, that tab will reveal that the link that says skip to content and then enter hits that and then enter again hits the top result. So if you're looking to click the top result, you can just do that super **\[40:18\]** **Amanda:** quick. I do it all the time. Yeah, but isn't the top result often an ad? Yeah, it is. But sometimes **\[40:23\]** **Sean:** to be honest, maybe this is a dirty secret I have, but sometimes if I'm looking for whatever say tailwind maybe, I don't care that it's an ad. I just want to get to that site. Yeah, I click the ad, But if it's this if I know it's the site I'm looking for like I wouldn't do it if I'm looking for You know a collection of results and trying to evaluate which one I'm gonna use, you know But if I'm just trying to get to a site quickly and I see it there at the top **\[40:47\]** **Mike:** That's a good way to do it add or otherwise. What is that trick again? Because I don't remember what you said exactly **\[40:54\]** **Sean:** I'm trying to remember I think it's you once you search you hit tab enter enter tab return return whatever it is So TAB will get the skip length thing visible and then let you activate it with your with your because it's in focus at that point, right? You can hit enter. I don't know. I have to double check. Don't call it. Don't quote me on that. **\[41:12\]** **Mike:** I just checked the podcast site and I don't have a skip to main link. So I do on my company site. So I will be adding a skip to main on the podcast site this weekend. So listeners, you can test it out yourself after this podcast, after this episode. Who's a really good question for you? What in CSS, Kevin? What do you find to be the most challenging? Naming things? That's why I like Tailwind. Yeah, right. Yeah, yeah, the whole, yeah, if you go utility class, you don't have to worry about naming anything. That's a big plus. I think other than, I mean, that's a bit tongue in cheek, but at the same time, it is annoying naming stuff. **\[41:54\]** **Amanda:** Do you follow any of the typical CSS naming conventions? Like BAM or whatever. **\[42:00\]** **Mike:** So yeah, I used to be really, really heavy on BAM. For listeners, what is BAM? So yeah, okay. I mean, because naming stuff in specificity and everything else with CSS is hard. BAM from everything I've seen is the most popular naming convention right now. And so it's block element modifier. And the idea is you create a block to say you have a call to action. your, you know, div class called the action, and then the element and modifiers are things that are either, or the elements are things that are nested inside the called action. So you could have like your called action title. So it'd be called action double underscore title. And it makes for more verbose CSS, which isn't necessarily a bad thing because it's very clear what it is. The idea is this title is meant to only be used inside of the called action. So the name is very clear on it. And it's using the double underscore, just for clarity sake, and instead of using a descendant selector to not get into any specificity issues. The modifier class is similar, but the common example there would be for a button. So if you had like your button and then a button primary, button secondary, button accent, color, whatever it is, So you have your standard button styles on say.button or dot btn and then the modifiers would have a double hyphen to just indicate that it's modifying that original element. So you're already styled it but you're making a change to it. So you're changing the background color or you're changing a font size or whatever it is. And I was very, very heavy on that. You do want to be careful if you're new to it because I think people get too into the whole nesting thing and then you you end up with things that just, like, it's hard. **\[43:46\]** **Amanda:** A lot of times I've seen students, this one of the topics, CSS naming conventions, one of the topics in the third semester at Seneca, and I see that a lot of students will try to just basically like recreate the DOM, and I keep having to tell them, no, it's just the block, it's the element, it's just two levels, that's it. **\[44:02\]** **Mike:** Yeah, yeah, as soon as you have like two sets of underscores, you've gone too far. Like, see, it just becomes really messy at one point. So you want to be careful with it, And it's a little bit why I've gravitated away. And it's also, well, not necessarily because of that, but more, and I still use that naming convention a lot, especially the, well, both the block and the element, the double underscore and the modifier. But I've also started using a lot of utility classes as well. So because if it's a project, a big project and doing, I do use SAS, and I do, you know, I have fancy, I have loops that just output tons of utility classes for me. So I use that to set things like background colors, text sizes, the text color. So it just gives me a lot of reusable classes that I can use quickly to set things up. And then I go into BEM when I need to get more customer from there. **\[44:54\]** **Sean:** So do you use with utility classes, would you use a non-semantic thing, like button red or something like that, or do you avoid those kind of things? **\[45:05\]** **Mike:** Yeah, I mean, yeah, it's, I'll do, I'll just have like BG primary, BG secondary, BG accent, things like that generally. **\[45:14\]** **Sean:** So that if you change it in the CSS, it still makes sense in the markup. Exactly, yeah. **\[45:18\]** **Mike:** Yeah, I really like utility classes as well. Obviously, because I'm a tailwind fan. But when I work on legacy projects, I do, I do what you do. And I add some utility classes to the thing. So it's easier for me to go forward with making and changes are updating new parts of that site? **\[45:38\]** **Sean:** Yeah, I've made a class called Has Shadow, or something like that Has Dash Shadow, and I just apply some shadow to a box shadow to an element or something I've done that before. Yeah. All right, Kevin, this has been awesome to have you on the show, really informative. You're obviously a big YouTube guy, so where should we send people to learn more about you? **\[46:01\]** **Mike:** Yeah, so that's where 95% of my content is, So it's just youtube.com and look up Kevin Powell or it's youtube.com slash Kevin Powell. So that would get you to where pretty much all my stuff is. And if anyone is newer to everything and you're just sort of getting up or you're struggling with certain things, I do have some free courses. One of them is like in beginner, like from zero, it's over on a platform called scrimba. And I have another one that's just about responsive layouts. And it's a little bit more about thinking responsibly. So it does get into, like, let's do mobile first, let's do these different things, but it's broken, that one's a drip course, so it's broken down in a few different days or like three weeks, but with small amounts of stuff each day, a lot of it's about mindset on that one. So if anything like that's interesting, you can get to that from my YouTube page or just my homepage, which is KevinPowell.co, and you can find that stuff there. **\[46:56\]** **Sean:** Nice, we'll put all this in the show notes too. Yeah, this is really good. Yeah, thanks very much for being on the show Kevin, this is great. **\[47:02\]** **Amanda:** Thanks, Kevin. It was a great meeting you. **\[47:04\]** **Sean:** Nice meeting you guys too. It was fun. **\[47:09\]** **Amanda:** One-third of the website 101 Podcast Talent is provided by me, Amanda Loots. You can find me online at my website, AmandaLoots.com. I also hang out on Twitter sometimes. You can find me at Amanda Loots.TO. **\[47:23\]** **Mike:** The website 101 Podcast is hosted by me, Sean Smith. You can find me online at my website, caffeine-creations.ca and on LinkedIn where my username is caffeine-creations. **\[47:37\]** **Sean:** And by me, Mike Mella, find me online at b-likewater.ca or on socials at Mike Mella. Close Transcript Have a question for Sean, Mike, and Amanda? [Send us an email](/contact). [![Listen on Google Play Music](/assets/images/google_podcasts_badge@2x.png)](https://www.google.com/podcasts?feed=aHR0cHM6Ly93ZWJzaXRlMTAxcG9kY2FzdC5jb20vZmVlZC5yc3M%3D)[![itunes badge](/assets/images/itunes-badge.png)](https://itunes.apple.com/ca/podcast/website-101-podcast/id1449510012)[![itunes badge](/assets/images/spotify-logo.png)](https://open.spotify.com/show/3rmSM1R9t6q1U8DmYWJRSO?si=NrYPMgDaRV6Dd56PjEaPow)### Season 05 - 1 [ Meet your Host - Sean](https://website101podcast.com/episodes/season-05/episode-1/meet-your-host-sean/) - 2 [ Meet Your Host - Mike Mella](https://website101podcast.com/episodes/season-05/episode-2/meet-your-host-mike-mella/) - 3 [ Wes Bos - Your Web Boss](https://website101podcast.com/episodes/season-05/episode-3/wes-bos-your-web-boss/) - 4 [ Tailwind CSS with Adam Wathan](https://website101podcast.com/episodes/season-05/episode-4/tailwind-css-with-adam-wathan/) - 5 [ Starting my own Website with Bill Campbell](https://website101podcast.com/episodes/season-05/episode-5/starting-my-own-website-with-bill-campbell/) - 6 [ CSS is Awesome with Kevin Powell](https://website101podcast.com/episodes/season-05/episode-6/css-is-awesome-with-kevin-powell/) - 7 [ Meet Your Host - Amanda](https://website101podcast.com/episodes/season-05/episode-7/meet-your-host-amanda/) - 8 [ 11 Things to avoid doing on your website](https://website101podcast.com/episodes/season-05/episode-8/11-things-to-avoid-doing-on-your-website/) - 9 [ Vanilla Javascript - Fundamentals before Frameworks](https://website101podcast.com/episodes/season-05/episode-9/vanilla-javascript-fundamentals-before-frameworks/) - 10 [ Hiring Junior Devs and How to Stand Out from the Crowd](https://website101podcast.com/episodes/season-05/episode-10/hiring-junior-devs-and-how-to-stand-out-from-the-crowd/) - 11 [ AlpineJS with Caleb Porzio: Lightweight javascript in your markup.](https://website101podcast.com/episodes/season-05/episode-11/alpinejs-with-caleb-porzio-lightweight-javascript-in-your-markup/) - 12 [ Contract Opinions From Not a Lawyer](https://website101podcast.com/episodes/season-05/episode-12/contract-opinions-from-not-a-lawyer/) - 13 [ Talking to a New Dev](https://website101podcast.com/episodes/season-05/episode-13/talking-to-a-new-dev/) ### All Seasons - [Season 01](https://website101podcast.com/season/01/) - [Season 02](https://website101podcast.com/season/02/) - [Season 03](https://website101podcast.com/season/03/) - [Season 04](https://website101podcast.com/season/04/) - [Season 05](https://website101podcast.com/season/05/) - [Season 06](https://website101podcast.com/season/06/) - [Season 07](https://website101podcast.com/season/07/) - [Season 08](https://website101podcast.com/season/08/) - [Season 09](https://website101podcast.com/season/09/) <!\[CDATA\[YII-BLOCK-BODY-END\]\]>