Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
We Need to Rethink Teaching CSS
702 Plays8 days ago
My upcoming in-person workshop: https://smashingconf.com/workshops/workshops/ny/kevin-j-powell-css/
My courses can all be found here: https://kevinpowell.co/courses
In this episode of General Musings, I dive deep into learning and teaching frontend development. I share my personal experiences, why teaching is the best way to learn, and the importance of addressing roadblocks in learning. I also get into the cognitive overload beginners face and my evolving approach to teaching complex subjects. Plus, I'll touch on why beginners should teach and why it's essential to explain things in a way that makes sense to them.
Recommended
Transcript
Introduction to General Musings
00:00:00
Speaker
Hello, my front-end friends, and welcome to my podcast, General Musings. My name is Kevin, and in this podcast, I talk about whatever is front of mind for me in any given week, usually in some way that's related to front-end development.
Exploration of Teaching in Front-End Development
00:00:10
Speaker
And this week, I want to talk about learning and teaching front-end development, I guess. Specifically, because that's what I do and what you do. And ah this is actually going to be my second time recording this because I just finished not recording it because I finished and then looked and it wasn't recording. And I was very sad.
00:00:28
Speaker
and And this is I actually have updated my stream deck.
Technical Setup Challenges
00:00:32
Speaker
uh which is like my i have for recording i have like these buttons and stuff and i put a gif now for when i'm recording that it's like flashing because it happens i pause the recording i have it flashing too because so many times and i just never noticed that i didn't see the blinking in the corner of my eye um I almost need the the other way around is like it's flashing when I'm not recording, but that would just be really annoying most of the day.
00:00:55
Speaker
um maybe Actually, maybe I could do that because it's hidden away. I don't see that screen or page or whatever it is in a stream deck. ah So maybe I could do that where it flashes when I'm not recording to so I can or a different color. Maybe I don't know.
00:01:09
Speaker
I'll figure something out. This is the first time I've done that in a really long time. And I'm also checking my audio, but my audio is recording because that was another problem I've run into in the past of recording, but my audio was muted.
Refining Podcast Content
00:01:20
Speaker
um But yeah, we're here for for version two. you go You only get this one. Hopefully it's better because I've already said everything I wanted to say. And I had a few random tangents that we're going to take out because they were not very interesting. And I know people, had asked about it. in one of the previous episodes and there was comments talking about how people enjoyed my rambling.
00:01:38
Speaker
So I do appreciate that you enjoy when I just go off on random tangents, but out they they weren't the most interesting tangents, so we're not going to stick with them. This week, what I want to be talking about is a little bit about explaining concepts or teaching concepts or teaching in general.
00:01:56
Speaker
And the reason I'm even thinking about it at all is a comment during the live stream I did yesterday from in the live chat. And it was somebody... My video... It's weird. i have a one JavaScript video that's like... Or maybe more. I think I might have two or three. But...
00:02:13
Speaker
It's the one like focused one on intersection observers. And it seems to come up all the time. And like maybe it's just people being like, you should teach more JavaScript. Maybe that's why they bring it up. I don't know. But the person commenting, which is B1, one of my mods on Discord, said that like it it was, I think it's he said, potentially, I don't want to misquote here, but I think it was either like it's the best one on the topic on YouTube or something like that.
The Role of Teaching in Mastery
00:02:35
Speaker
And the reason I think it was actually a pretty good video, and I am pretty happy with that video, I think it turned out well, ah is because, i and it's one of the reasons I don't teach more JavaScript, to be honest, is it takes a lot of work for me to do a JavaScript video because I have to do so much more research and looking into it. And one of the reasons I made that video was because I needed Intersection Observer for some project I was working on.
00:03:01
Speaker
And so I had to learn it myself. And so it was really fresh in my mind and I thought it was cool. And then I'm like, OK, I'm going to teach it now. But in teaching it, you have to deep dive it a lot more. And I also wanted to make sure I wasn't getting anything wrong because I was talking about something I'm not an expert in, which is JavaScript.
00:03:17
Speaker
And because I didn't know it super well, I was going through and making sure I knew everything about it. So it was I wasn't saying anything wrong. But I was also approaching it from like I had to figure out how it works and run into problems with it and then find the solutions to those problems. And because of that, because I was Learning that thing when I'm teaching it to somebody who hasn't used it before. I know all the roadblocks or maybe not all of them. There's people who are going to run into different roadblocks, but I know the roadblocks I ran into.
00:03:52
Speaker
And so as I'd be explaining things, I could very like in those explanations, I would address the things that. that found got in my way or I'd explain it like if it was something that worked, but I didn't really get it, eventually figure it out. So I could explain things in a way that somebody who doesn't know how that works could understand because I just figured it out myself.
00:04:15
Speaker
And i think this is something that a lot of people feel like I always tell people the best way to learn something is to teach. I still strongly believe that I wouldn't be here. No one as somebody who knows CSS. Well, obviously, I wouldn't be known as somebody who knows CSS really well if I wasn't doing public stuff like I do.
Beginners as Effective Teachers
00:04:34
Speaker
But if I didn't start teaching CSS and I didn't focus on it for the past decade, which is insane that it's been that long that I've been teaching it. i Even if I was writing it every day for the past 10 years and that was just my sole focus, I would not be as good at it or know it as well as I do right now because I've been teaching it and trying to understand it better.
00:04:56
Speaker
But there's a huge, but it it has created a bit of a problem for me and that I know the subject really well and I actually find that makes it harder to teach.
00:05:07
Speaker
And when you're in that, and this is not ah me who's creating, like coming up with this idea, of but it's something, and I don't have any actual sources for it, but there's this thing where they say the best person to teach something is somebody who, like when you're one level above the person you're teaching to, because you can put yourself in their shoes because you just lived through exactly where they are and you managed to figure this thing out and now you're going teach that thing to them because you can understand exactly where they're coming from.
00:05:37
Speaker
Whereas if you know a subject really well, and you I'm sure you've seen this with like the smartest people that are out there, there's some of them that are good at explaining things, but a lot of them are really bad at explaining things because they're coming with all this implied knowledge that the people they're trying to teach to don't have.
00:05:58
Speaker
And for them, it's really hard to dumb it down or to skip out on certain things or not to realize that people don't have that implied knowledge already. And for me, that's a big focus of mine. It was a lot easier when I was teaching in the classroom Because if I was teaching something that people didn't understand, I would have a classroom of blank stares looking at me.
00:06:22
Speaker
And right away, i knew then that it was, okay, I'm talking about something. Maybe I'm even explaining it really well. But nobody listening to me has any idea what I'm talking about because i've I've skipped something that they need to know. So let's pause and rewind a little bit and figure out where this gap is coming from.
00:06:40
Speaker
And when I started making videos on YouTube, I was still teaching in the classroom and I'd get a lot of comments about like, oh, you answered my questions as you were explaining things. And that's because I got used to doing that in the classroom and I knew the roadblocks or the problems or the things that would come up and the questions that would come up as I'd explain concepts. So I was able just to include that in my teaching material.
00:07:02
Speaker
as I was doing it. And I got pretty good at teaching even in the in the classroom because it was the same thing there. I could explain things as questions would be popping up because after teaching it to six classes and always hearing the same question at the same point, you're like, okay, well, I don't need somebody to ask it. I can just I can cover that before the question actually comes up.
00:07:20
Speaker
And now that I don't teach in the classroom, and I don't get the direct feedback that I used to. That's a lot harder to do because you I might get questions on YouTube. You know you see them come up on in the comments section or in my Discord. People will be asking questions about things.
00:07:36
Speaker
But it's very different to have a question when you finished teaching something to that question that pops up in the middle. And I think that's why beginners really should
Encouragement and Real-Time Feedback
00:07:44
Speaker
be teaching more. And there is there is a benefit to being an expert in teaching versus being a beginner. Because circling back to when I started teaching, I've only ever taken one video down from YouTube.
00:07:55
Speaker
And it's the video I took down was where I was looking at how you... It was just the hamburger menu animation. So I click this and we'll animate it in and out. It was focused on the animation. But to make the hamburger menu, I used a div and added... I think it was jQuery at the time, just listening for a click on the div.
00:08:12
Speaker
And i didn't even realize that, you know, it was one of my very first videos. And then years later, i think I looked for it because it was a clip path animation, I think, on it. And I was looking for the video for something just to like link to it. And then I watched a bit of it and I was like, oh, no.
00:08:28
Speaker
and So I took it down and actually made a new video looking at why I took it down. And this is how you should do things because I know people still do stuff like that. And that is the problem of beginners teaching things is they might teach this new thing they learned. Oh, i learned how to animate a clip path. This is awesome.
00:08:44
Speaker
At the time, I didn't even realize accessibility was a thing. So I didn't see the problem in the approach I was doing and I probably had come across other people doing it the same way. So for me, like I was just ignorant to a lot of the problems. I just didn't realize there was even a problem with what I was doing.
00:09:06
Speaker
And that's always the issue that can potentially come up as a beginner is you might be teaching something that you've just learned, which is awesome. And you explain it and people understand it, but you might not be teaching a best practice just because you don't know any better.
00:09:19
Speaker
And that's the one issue that can come up. But I don't think it's a big enough one to say that you shouldn't teach or explain or help people out. Because I know not everyone wants to start a YouTube channel or a blog or whatever it is, but just like helping people out in a Discord, um maybe answering questions on Stack Overflow, whatever it is, like anything like that can really help you.
00:09:40
Speaker
get better at what you're doing. And um' I've talked enough about teaching and why I think it's so important just to help people and answer questions and anything to get
Reflecting on Teaching Methods and Content Creation
00:09:49
Speaker
better yourself. So I'm not going to go into that today.
00:09:51
Speaker
ah But yeah, I do think that's why that video on my JavaScript one was really good is just because I was coming at it from that beginner perspective and I could put myself in the shoes of the person who was learning it because I literally had just done that.
00:10:03
Speaker
uh these days for me trying to take complex subjects and break them down has become harder and leads to lots of scope creep that i have to be really careful with but it's also started making me re-examine how i think we should teach css because of Okay, really quickly, I've talked about this before, but i just want to go back over it a bit where i I've talked a lot about how CSS tricks us.
00:10:36
Speaker
And think, yeah, I'll go over what I what i usually say first. CSS tricks us when we're beginners because it teaches us that, well, it's a declarative language, right? We learn it's a declarative language. Even if you don't hear the word declarative language, you declare something and that thing happens. Background, blue, color, red, font size, whatever.
00:10:57
Speaker
You say something, you give it a value, and it does that thing. That's not really how CSS works, though. It is. I mean, it is how it works, but it's not so straightforward because there's lots of things that don't work that way.
00:11:10
Speaker
right. So say a width. A width isn't a width isn't a width. If you declare width 100 pixels, it might be 100 pixels, but maybe it's on an inline element, then width doesn't work. Or maybe it's on a flex item and then it might be 100 pixels, but it might get bigger or smaller depending on what you do there. And like there's There's so much adaptability and change and different stuff that happens within CSS.
00:11:35
Speaker
And so as I used to say, or until today, I've been saying CSS tricks us at the beginning into thinking it's simpler than it really is and that it's more declarative than it actually is, I guess in a way.
00:11:51
Speaker
That phrasing could probably be improved. ah Now, I think that it's more that how we teach CSS tricks people into thinking it's simpler than it is. And I even think like, you know, any beginner content and I do, I've done this in my own several times. And now I have course, like a redone course this year, HTML and CSS for absolute beginners. I talk about the box model early on in that.
00:12:17
Speaker
And I'm like thinking about it now, should we, teach the box model early on in terms of at least like the content with, and I talked about this in a previous episode too, on should we be teaching width or inline size at the beginning?
00:12:32
Speaker
And I've sort of said, no, we shouldn't be, because you shouldn't really be declaring set widths on things. That should come up later on when you actually need to declare a width, um like you're doing an icon. and So you're like oh, I need this icon to be small and it's going to be 100 by 100 or 20 by 20 whatever.
00:12:47
Speaker
But at the beginning, no one's really putting icons and things. You're doing layouty stuff. And so I don't even think that should be covered.
Revising Courses for Better Learning Outcomes
00:12:53
Speaker
But a box model has to be covered to a certain extent because you do want to mention the content size, the padding, the border, the margin.
00:13:02
Speaker
And so like those are important properties. And just understanding the way they they layer on each other is important because, you know, yeah, I think that has to be covered. But i think a different approach should be done for CSS at the beginning. And it's something I'm working on with. I did a course. I did a course. I didt i started working on conquering a new version of Conquering Responsive Layouts, which is a beginner course I have on.
00:13:28
Speaker
I didn't realize it at the time when I originally created it. And it needs an overhaul. um But I realized afterwards, because i it's a 21-day course, and it's responsive layouts, and i wait until the 14th or 15th day to bring up Flexbox, or no, I wait the first week until Flexbox, and then the second week until Media Queries.
00:13:54
Speaker
Because i when I was doing it, I'm like, people need... This was my beginning of realizing that there's a problem with how people approach layouts in general. And that from that beginner stage where we're sort of hammered home on the declarative nature and this happens and then we get that result, right? So I say this and that's what's going to show up on my screen, which is not what happens with CSS.
00:14:16
Speaker
And I think this was the beginning of my journey down into understanding how to teach that. And it was a long time ago and it's still good. I think it's worth going through. But a lot of that course is about mindset rather than like, here's the lines of code you need to write to make this thing happen and getting into that CSS mindset.
00:14:33
Speaker
And so now that I'm reworking material, the first mistake I did actually with that, because I was rereading through the lessons I wrote for it. was I went way too in depth. Like they're they're good. The lessons are, the content I wrote for them was really good and it's way too high level.
00:14:50
Speaker
And like I'm looking at it like, yeah, this is this makes a lot of sense to me, who knows what I'm talking about. I made the mistake of being the professor standing in front of the class. I never published it, so I didn't make the mistake, but I was going to make the mistake of being the professor who's standing in front of the class going really in depth into something and having all the blank stares and not being aware that nobody understands what I'm saying.
00:15:11
Speaker
ah So I'm going to simplify that once I eventually get back around to working on it ah it to a very large degree. But I'm also reworking on CSS
Simplifying Complex Subjects for Beginners
00:15:20
Speaker
Demystified. And part of that redoing of it is going to be a big part on like, let's the the very beginning of it is all about CSS mindset and like, okay, that's on learn all the bad habits beginners learn at the very beginning in terms of how CSS works, because while it's a declarative language, it really isn't. And so like, for me, it's that idea of like, okay, now that I know this really well, and that's more of what I want to talk about, I want to talk about the specifics of CSS, but it's more about the specifics of like,
00:15:51
Speaker
When you know a topic really well, distilling down the important points from that. Like what? Okay, this is like the big picture, that really complex in-depth lesson that I wrote for Conquering Responsive Layouts or the entire module that I wrote for it.
00:16:06
Speaker
that okay this is really in depth how can i distill that down to get to the important parts that a beginner needs to understand who doesn't know any of the implied things that are coming up in here and like or it's not even necessarily all the implied things it's just like i'm expecting there's there's too much information here the same way when you're learning anything new right if you're learning css at the beginning you have the box model the specificity the the syntax of it the thousand different properties that you're learning and there's just always another property and then there's all these different values that go with those properties and then wait there's different units and the different units work in different ways and
00:16:43
Speaker
There's so much cognitive overload going on that we just we can't learn everything all at the same time a useful way. So you end up focusing on the properties of the values for the most part and then understanding a little bit of how they work together. And from there you go out and things start to piece together and the puzzle gets more clear.
00:17:03
Speaker
But then if you're getting to that next stage and all of a sudden it's another load, like cognitive overload coming, that's not very helpful. So like, how do we distill this down to the most important things that a beginner can understand based on what they already know?
00:17:16
Speaker
And then at, you know, slowly build up from there. And putting myself in those shoes is in that beginner mindset and that beginner stage of like, okay, this is what I, what somebody at this point would actually know.
Practical Examples in Teaching
00:17:32
Speaker
What's the most useful single thing we could add on top of that now, or what's like the bad habit we need to break and how can we practice and and like hammer home that that's actually a thing. Cause I think that's the other thing is like, it's one thing to say something,
00:17:47
Speaker
unless you can show why that's actually useful or or important. like That's the thing. like Why you know kids in in high school, and I was definitely one of them. I was really good in high school. Math was one of my best subjects, and I was still like, this is all useless.
00:18:00
Speaker
you know like when am i ever going to use trigonometry i still don't have an answer to that now i guess now that trig is in css i wish i knew it better but um yeah i definitely was not uh the even remember in in college i was doing a physics class and we were doing uh like velocity and momentum and stuff we had like these pucks that you'd shoot across like they were like basically like um what was it called air hockey things, but they had, like, it was on the paper that had, like, they had little little sparks that would come, and you could measure the distance on the arcs, and they were bouncing it I don't remember exactly what were doing.
00:18:35
Speaker
And then we were doing the calculus stuff based on the, I don't remember at all. and The only thing I remember from that is being like, I have no idea why I care about this, but at least it's kind of fun because we've had to like throw these pucks around. and then it it was interesting in that it was like, if you're nerdy, it was interesting. But I remember at the time being like, why would I care? And like, I think that's something that like as a professor, you could easily make students care about that. Like you look at all like the YouTube videos now that go into like physics and stuff.
00:19:10
Speaker
In fun ways and like that's not a hard bridge To gap is that the right word gap to bridge? I think we'd be the right way to say that ah with those types of things but like Rooting the things we're learning and like have like a reason that you might want to learn them. I think is so important And and hammering it home with real examples Is is really really important um I just realized now I'm spending a lot of time talking about this, like from my own perspective and how I'm teaching things. I hope you're enjoying this because it's sort of just me talking about something that's important to me, but probably isn't as useful for people who aren't teaching.
Sharing Educational Content and Fighting AI-Generated Material
00:19:48
Speaker
So I do apologize, but I do know some teachers listen to this. So maybe it's useful for anybody here who is teaching or thinking of teaching or just write a blog post. Go ahead and do it and let me know about it. And I'll i'll make sure others are included in my newsletter if you you let me know about it.
00:20:02
Speaker
i I always want more people to teach and to to explain things and to do more stuff. um and Especially with ah with all the AI slop that's out there. Like Dev2, I keep coming across.
00:20:13
Speaker
I don't go to Dev2 on purpose to read stuff, but I'll click through to a lot of articles. I just like seeing, like I'll get beginner things popping up all the time. And I love seeing and reading stuff that people are posting. And like every now and then it's just something that's pure AI slop. And I'm just like, oh my goodness.
00:20:30
Speaker
And you know right away when it is, right? And even if they're getting better at explaining things, it's like they make stupid mistakes. You know they do. And then it just keeps on going. um And it's like there's nothing wrong with using AI to draft an article and then writing. I need an idea. I need an outline. Because if you're not used to writing, yeah, that's fine. Like use prompts. Get it get it helping you. Don't have it write a thing and then just post it. Like what's the point even? I don't understand it all.
00:20:58
Speaker
Like there's no benefit from anybody except maybe you get some views for some reason. Like I don't understand the idea there at all. I get it if it's like a publication like those, know, there's just these there's websites out there that just need constant like ridiculous amounts of content.
00:21:13
Speaker
So I don't agree with it, but I see why they're doing it. But like when it's people just generating posts from Medium or Dev2 or like other things like that, where like no one's asking you to do it. You're just deciding to do this. I really maybe there's some benefit. I can't figure out what it would what it is for the life of me. And as I said, it's really obvious when they do it.
00:21:34
Speaker
but Anyway, a little bit of a different episode this week, I guess. i'm Catching myself going a bit more off topic and realizing I don't really know where I'm going with it now. For a second run through on this that I've been doing now, it wasn't much more coherent, I think, than than the first time around, other than realizing that maybe it wasn't the best topic for my audience at large. but Here we are. I've recorded it twice now, or recorded it once, said it all twice.
00:21:58
Speaker
ah This one was better than the first one. um And I did make some connections that I didn't the first time around. That's why I like talking out loud. Honestly, don't if you're if you're record like voice record on your phone teaching something to yourself,
00:22:15
Speaker
and you're gonna like me going through this practice of saying this all twice some of the things i said i didn't say the first time around i didn't even make any of the connections coming through it again now i'm like oh yeah this like the thing i was talking about with um Now I can't remember what it was, but teach something with the teaching, obviously.
00:22:33
Speaker
oh the CSS tricking us and it's not the language that tricks us. It's the way it's been taught that's tricking us. And i think, I don't know if I said this the first time or this time around, so I'm going to say it quickly now, just in case I didn't say it this time around. That's the problem with doing things twice.
Teaching as Personal Growth
00:22:46
Speaker
Is one of the problems that comes up is people often teach things the way they learned it when it's like a larger topic, right? You're trying to come up with like a plan for teaching something. right Well, this is how I learned it. I'm going to teach it the same way.
00:22:58
Speaker
And I think that is another advantage of beginners teaching things is that they teach it in ways that make sense to them. And sometimes it breaks away from like that traditional learning path that has just been like repeated through several generations of teachers ah going through it. Because once you learn something one way, that just feels like the right way to learn it. But there's always different approaches you can take.
00:23:23
Speaker
ah The other thing I want to say is just talking aloud and the connections you're making like that. you you think of new things as you're speaking and i do think speaking is very different from writing which is very different from just thinking about a topic and the worst way to learn is just to think about a topic writing and speaking i find speaking for me makes a huge difference because i find it makes more you sort of have to stop you're trying to do two things at once you're thinking and you're talking at the same time whereas like if i'm typing i can just like pause and like think about it a little bit and then continue writing
00:23:58
Speaker
Whereas when I'm speaking out loud, i just i make more connections, but i do I do feel like I get there when I'm writing too. With writing, what happens is I'll notice when I have holes in my knowledge easier.
00:24:11
Speaker
It happens when I'm talking too, where I'm just like, I'm trying to talk about something. like I don't know how to explain this. I need to figure that out. ah Whereas the same thing happens with writing. It's a little bit easier when you're writing just to like, okay, now I'm going to go look that up, figure it out and then continue.
00:24:25
Speaker
ah But yeah, it's it's a good way to find holes in your knowledge when you can't explain something properly. And it's also just that you make new connections when you're vocalizing things I find versus other ways of teaching things. So just like voice notes to yourself on how things work, you might surprise yourself.
00:24:41
Speaker
um But yeah, this is a a drum I'm never going to stop beating of like teach in any way, even if it's only to yourself. Start a personal blog, share it because it's always good because other people will benefit from it. But if you don't share it, that's fine. You'll still learn a lot from it, like just notes or whatever it is.
Upcoming Workshops and Closing Remarks
00:24:57
Speaker
But yeah, that's that's it for this week. I do want to do a little bit of housekeeping really quickly. Just as a reminder, I have a in-person workshop coming. Speaking of teaching. That I'm really excited about with smashing conferences. So I'll put the link to that in the description. It's in New York City end of June I forget the date now and I don't have it open have I think it's the 24th 23rd somewhere around there You can check the link down below if you'll be in New York City around that time or if you're in the area Especially if you can get your company to pay for like training or anything like that. It would be awesome I'm really looking forward to it just modern CSS having fun working on a lot of stuff and
00:25:33
Speaker
ah that I think will be awesome. So yeah, that's the the main thing I want to talk about. I'll put links to the courses and other stuff down in the description as well that I mentioned along the way. And I think that's it. So thank you so much for listening. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.