Hi everyone. My name is Patrick Akio and joining me today is Kevin Powell. He teaches people how to make the web and how to make it look good. He's a real CSS Guru. So naturally we touched upon everything CSS related. Whether it's Frameworks and even how he taught himself HTML and CSS in the first place. I'll put all the links to a socials in the description below. Check him out. And with that being said, enjoy the episode. I was checking out your YouTube
videos. Actually, you've been doing this for five years? Yeah, it's a long time now. That's really cool, man. I really admire that. How are ya, why did you start doing YouTube videos in the first place? I started because at the had been hired, as a teacher and where I was teaching. It was a design school, print design primarily, but they had the curriculum at just got updated and had an introduction to web like HTML and CSS, and all the teachers were print
teachers. So when I got hired, everyone is just as the curriculum, it was being changed and me and one
other new teacher. Both are the only people Basically, that had any web experience and so we got thrown into that class because no one else was comfortable teaching it. And it was I really enjoyed it but after two years of doing introduction to HTML and CSS, I was getting a little bit, it was a little bit repetitive and I was like, I need to do something that this lets me sort of teach other things and just talk about other stuff and also just to
like do things that are interesting and keep up like CSS was it? It wasn't quite there yet, but it was starting to like, you know, get a little bit more interesting and I'm like, I don't want to fall behind. I want to be able to keep up with what's happening. Nice. So, see, I saw it as a way, it was really just a hobby project. I had no Ambitions of it becoming anything else than that. And yeah, so it was just for fun on the side to sort of keep me
doing what I enjoyed. Yeah, I love hearing that was was teaching always in your past as well. Like, did you always teach No, I mean, if you go really far back at one point, I really, I used to coach for ski racing team when I was like, 15, 16 17, but other than that, no, it was really the place. I was working with a, the time before when I got hired to be a teacher, was a really good place. It was a really small agency,
said, it meant. Like, I got from day one, basically, tons of responsibility. My boss would bring me to meet the clients. I'd be seeing like how everything is done from A to Z. So experience wise, it was fantastic but the pay was terrible. So I'd been freelancing on the side quite a bit just to try and make ends meet. We had a newborn kid and stuff and then, so, when we was one of my old teachers reached out and said they're looking to hire some new teachers now, would you be interested?
And I was like, oh well yeah, I could use something that has, you know, a little bit more pain. I don't have to worry about freelancing and all of that so much. So, Jumped on it now. I love, I love the hustle, especially early on or not even early on just hustling and getting to where you're meant to be. I don't think in terms of end destinations I think of your career in terms of a journey I guess, because I myself. So I started in information science. That's what I did at University.
And that's a little bit of data science. Little bit of computer science but a lot of business studies as well, right? You learn about organizational. Models or business models and going to the history of successful businesses, as well as businesses that have failed and learn from that. But I did have some aspects with regards to computer science. That's why I don't consider
myself self taught. Even though the courses were built, this website, you can choose from a forum to a different thing to another thing and teach yourself how to do it, right? And get some guidance there. But then I started out in operations and through that, I To touch a lot of things. And a lot of things I still didn't know what I wanted to do, but because I had that really
broad experience. I learned what I didn't like and what was still interesting and what I still wanted to try out and then it got to a point where I was like, man, this this is still operations. Like I know how to fix stuff or I think I do except I'm not responsible or accountable, nor sometimes don't have access to do that. I just have to talk to people and they get it done and then I'm like a man sometimes It takes so long to get that stuff
done that. I saw these things talking about devops and and how you can combine those things that's why I, when I really trended towards software engineering and getting that into kind of my skill set as well. And still, it was a whole different ballgame learning in school versus learning in an experienced development environment, but that was a lot of fun, trying things out that way. That's cool. Yeah, but you've always been passionate about CSS CSS.
Specifically, I started out, I started out in the more on the backhand side of things and then when I actually went to front-end CSS, was one of the things I struggled with mainly, right? Yeah. Why do you think that's pretty normal? I mean, the reason I was drawn to it was that sort of where I started making websites as a hobby in?
Like the late 90s when I was in high school still and it was like, this on-again off-again thing, but it was always like the visual side of stuff that I've been interested in the said I was, you know, I went to a school for design and stuff like that too. I worked in print design for a while so when it sort of making that transition to the web, it was definitely Yeah, the visual side I think was always
interesting and CSS. I really like because it's like the puzzle of making that visual thing actually happened. And so I quickly realized, I actually like that more than doing the design. I like making the design happen. I think that's more interesting. Yeah.
But yeah, I think what you said there about it being a struggle I think is really a common common theme that I see which is sort of why I didn't realize it at first when I started my channel just because I've been teaching in the classroom and seeing the struggles people had, but that was the beginners. They hadn't touched anything. So, of course, they're learning
things from scratch. It's hard, but the more I've been on YouTube and just sort of seeing what's happening at the World At Large. Yeah. I see a lot of those struggles coming from whether it's beginners or people more from like, a computer science background, or a more traditional programming background just because CSS is so different from everything else, and how it works. So I think that's wrapping your
mind. Around like, oh, this is just a completely different mindset to be and I think can be hard. I agree. It's so different. I do think it's getting easier. I mean, I've worked a lot with designers and he used to get, for example, a PDF. And now we have tools that help us, that the design already has some of the CSS components in their callers is the most like, basic form, but even like the width and the shapes and all
that stuff. Sure. You have to tweak it and it's not perfect, but it's already a starting point it. Is it a lot more fun to work with designers and actually implement the design? Because if we're talking about the thing that I'm doing, I love doing the design and actually seeing my my stuff visually on the screen it's so fulfilling its instant gratification when you get something right and man it looks really cool. That's what really draws me basically.
Yeah, definitely. When it when it finally Works in This falls into place it's nice and I remember The days like you're saying you'd get like your static file, that was just, you know, sometimes would be a JPEG or something that you guys had sort of do what you need to get out of it. So yeah I do think it also helps like I think designers are also a lot more aware of how the web works too so that I think
there's been enough discussions. You still here but friction I think on that slide between the designer wanting something and the other side especially I think actually these days the biggest friction point is like between like breakpoint. Other stuff like yeah. Yo as amazing as the design software is getting, you're still stuck with these static artboards or frames and all of that.
So like this idea of like a fluid landscape is something that I think there's still a bit of friction there depending on the designer. I think there's a lot that you learn at least the basics of HTML and CSS and sometimes deeper than that. But I think that always helps when they have some experience there just knowing that, it's
not so straightforward. You know, it's this is what it might look like in this ideal perfect situation where the person screen is exactly that size, but that's never reality. Yeah, I love designers that say, okay, this is what I visualize. And whenever we can get up and running first, we'll tweak it and then I sit next to the designer and they're like all let's make this more crisp like that.
And I don't see what they're seeing, but when I tweaked it I'm like that is better and they have such a good eye for that but it takes a certain amount of Practicality from both sides to make the end product, actually be delivered faster and in a way that's actually accessible to a lot of people as well.
I think from both fronts with on the development side as well as the designing site, we can learn so much from each other as long as we have that communication in place because I've also worked with agencies and stuff gets thrown over the wall and the that we're talking about frustrating, that is one of the frustrating factors there as well. And for sure. But I've seen go ahead that is example, but the open communication is so important
when it's possible. As you said, it's not always not always there but it's good when it is. One of the coolest videos I've seen on YouTube channel, I was actually just browsing was the CSS battle thing. You did man, that looked awesome. I don't think I didn't know that existed. I don't think our audience knows either. Could you lay out what that is? Yeah. So it's a fun, it's CSS challenges basically that have no grounding in reality, so don't go in to me.
Like if you're a beginner, might not be the best practice because you're probably doing things, the way you shouldn't actually do things, a lot of, you know, moving things over one pixel, at a time, to get it in the right place. But basically you have like it looks like something that should probably be done with SVG effectively. So like some sort of flat sort of image Vector E look, Being and you want to try and match it perfectly with CSS.
Yeah, so you have like basically a blank code to start with and then you just do what you need to if you know put in your dibs or whatever it is and you just try and match it and you can you know, you could I'm doing it visually. But for people listening, it's you can sort of there's like different modes, you can go into to compare what yours looks like to like the finished one. To make sure that things are in the right place and everything. Yeah and the other thing is, if
anybody Hasn't done it in there. Like oh I want to try that. It sounds like fun. There is a scoring system that's about using the least amount of characters as possible. So he gets if you, if you're into the world of uber optimization and getting sort of hacky with stuff and that's a challenge to you definitely you could try and lower your score as much as possible. But that's where you really do get into this like Realm of insane optimizations.
That would you never ever see in the real world? Yeah, I personally, when I Do it especially for YouTube and stuff to make it sort of challenging and all of that. I do it more based on like a time limit. Can I match the design 100% match in the least amount of time possible? Yeah, because I can't get the high scores. It just it's a little frustrating on that side of things, get like, yeah, it's definitely a different skill and one that I don't have.
So, I go for as fast as I can and I guarantee you, there's people that can go faster than me, the one even for me, like I still What I'm doing it. Like my mind is so set in like let's use like percentages and like M&M's and Rams and other stuff that like throw that out the window like I'm using you know just position absolute using pixels and just get things exactly where you need to be and you'll go faster.
But it's hard for me to break out of my the way I normally think about things but yeah, yeah, it's a fun way to like like any design you're doing is like a puzzle where you're just trying to match the design. So this is something like, oh, I could do that in like five to fifteen minutes and like this little thing, And so it's fun for that and it's like you said with that like gratification at the end when you get it. Yeah, I saw the video and it looks so fun.
Actually to do that and to compete because I saw you did it versus someone else. It reminds me a lot of like because I used to watch a lot of gaming videos of like, speed runs and people trying to compete because I also saw the timer. Yeah, I've never seen a video like that, but even with regards to coding challenges I'm sure they're out there stuff like that as well. I just never seen them and man, the csis want looks pretty cool. Cool. Yeah, it was fun doing it as a
challenge. That was with Kyle from web simplified and you know, it adds that little extra element trying to beat someone else at the same time. So like he said a little bit like a speedrun, so it was fun. I can imagine, I can imagine, but moving back to how you kind of became because I looked up online and the stuff you're doing with CSS. Like, I'm sure that if I YouTube how to do stuff with CSS, you're going to pop up. How did you get to that point? Because you're completely
self-taught? Or not really yeah. Yeah like 98%. Let's see. My God. I can't that I soft. So it was a lot of what, but like we've been talking about a lot earlier on when I was working at the small agency. So when I was working there is mostly doing design work and a lot of it was for print and then I was freelancing on the side and the freelance work on the side like the vast vast majority
of it was UI design. So whether it was like simple apps or like you know some website stuff and I'd been playing around with websites as a hobby basically for like 15 years at that point on and off and especially the like around that time I'd sort of been around with like css3 became a thing that was that big exciting thing. So like I definitely got back into it at that point.
Yeah. And so is making these designs freelancing it and I'm like, well, if they're going to pay me to make the design, they should also you know, I could make more money if I also made the site happen, once the design is approved and just do the whole thing. Yeah. And that's also when I realized I actually prefer making the sites rather than designing them, I'm an okay designer. It's definitely, you know, looking back at like, I should have realized this a long time
ago. But so yeah, that's sort of how I got and it like some people asked me like, oh, how do you get so good at CSS like your own. You, there's a lot of it that I just know, and it's just like, I'm like, for me. It's A weird thing because as it like, it was a hobby for so long and I sort of would do it a little bit, like, it was table-based layouts with, like, you had the font tag and everything early on it. So like I sort of like involved with it but I'd stop.
I wouldn't make a site for two years. Yeah. And then I sort of oh look there's some new stuff now that I can do and I do like CSS. There's a lot of new properties and so like I just sort of like kept sort of like updating every now. And then I have a new project. I want to make a site for it. So like that, if I look back to those days, the stuff I was
making was terrible. There's like, but I think that was part of being self-taught, early on was also hard because we didn't have, you know, stack Overflow and all the websites we have today and everything else, it was a different environment. And then when I started when I decided like, okay, let's see if I can actually make some sites here and I started you know, just that was just a lot of practice at that point.
You have to make it work. It has to be there for the client, everything needs to be there. So you sort of well a little bit like you were alluding to when you, you know, when it's different learning. When it's in sort of an actual work environment, you learn how to make stuff happen. Yeah. But I really think where I got really good at it was when I got Hired as a teacher to teach introduction to HTML and CSS. Because that's really when you realize, like, okay, I know how
to make. I could take this design and I could make that. But I don't actually know like, you know, especially that it was using floats in clear fixes and stuff for layout which if you don't know what that is, if you're listening, don't feel bad because you don't need to know that anymore. But yeah, so like I could do it but I had no way of explaining it and some things I would do without even really knowing why? But I just it worked. So I did it every single time. Yeah.
And then when I had to teach it that was a completely just like I have no idea what I'm actually doing moment confronting? Yeah, because having to explain how things are working because it you can't just say like do this because then they're like, well, you know what's actually happening there? It's only into it, it was really Teaching it taught me more than
anything else I've ever done. And it's one of the things I always tell people that are learning, is it doesn't have to be, you know, you don't have to get in front of a classroom and teach whether you write a blog post, whether you're just writing notes, to yourself, whatever it is like, it doesn't have to be public-facing though. If you are if you are writing like notes and sort of self documenting things you might as well make them public because it might help someone else.
Yeah. But that like that idea of explaining how Whether you're typing it out, whether you're dictating it, whatever it is like mental connections, you make all of a sudden and the things that just click, it's insane. Like, you're as you're trying to explain something like, oh, I understand that now, just because you're, you're not just doing it, you're whatever your brain works differently in those situations.
And so, like, for me, having taught in the classroom definitely, was was the biggest thing and the one that created the biggest leap for me in my understanding of, how all of it worked. Yeah, I love everything.
That I always sometimes wonder why people write a lot of blog posts because personally, I don't enjoy the act of writing a blog post, but then if you put it in a way that they're trying to explain something and their format is doing it through a blog post and through that, they're getting better at the skill. They've honed and they're trying to explain. Yeah. Then I could see what there's this.
Many Blog blog post. Yeah. Because also I've we do some trainings on the side as well and I've done that I think once or twice and man it is confronting but I Think it's also a skill that you're like, I don't know this or let's let's figure this out together, right? Because you know, going to be able if you're teaching and if you're flying in front of a class, you're not going to be able to get every question. One hundred percent of the time, there will be times where you're like.
I actually also don't know this but it's also skilled to be like on this figure this out because that's the beauty of I think. What we're doing is that you can figure things out and there is room to figure things out and there should be right. You're not expected to know everything, it's a growth Journey for everyone. Yeah, they had that focus on teaching. I really like that.
I think the other thing that it also did for me, was it made me revisit the fundamentals and like the real basic stuff? Yeah, and I think with that with anything that we're learning, you know, it doesn't matter what it is, but definitely with CSS, just because I'm so familiar with it, I see it all the time where when you learn the very like, you learn.
There's a lot of early stuff, there's like the Box model, the Cascade and like, all of these little things that sort of, they don't mean too much early on. Yeah, you're taught what they are but it's are like, You have so much other stuff. That's important of like, all these new properties and values to be learning that, I think these other things sort of like, you know about it. Okay?
I get it and your brain, you can't absorb all of it and I think revisiting fundamentals, once you actually have like if you're the, let's say an intermediate level or even a really high-level just going back and looking over the fundamentals of how stuff works. I think is really, I think that for me, that was another one of those big things of like, oh,
okay, now I get why people. Trying to teach me this early on and you sort of you might find holes in your knowledge that all of a sudden make things just make more sense overall and it you know yeah having the I think with anything having that strong bases, always really important and like you said, then it makes it easier when you have to learn that new thing.
Like oh I had I don't know how this works but I know I can figure it out and if you really have a good understanding of what's going on, it makes it even like a hundred times easier. Yeah, I agree I because I was kind of learning in a work environment, I learned how to get things done. So I completely recognize that my fundamental specifically for talk about CSS are probably not as good as they should be, and now things are getting easier.
Also, with, because I'm using CSS Frameworks, especially in the latest project that I'm in that the fundamentals. Don't necessarily need to be there to get stuff done. But then when I really come into a problem, I had then I need to dive deep into the rabbit hole and Start from scratch. Like, what are these things? Because I've heard the more I've seen them, but what do they actually do? And then it's a bit more of a struggle.
So I might take your advice on that actually, this is fundamental, but I do. I do enjoy the, the CSS Frameworks that have been out there. Have you like played around with, like Tailwind? Then if you still went tachyons, and even Boma, have you played around with them as well? I've used Bulma and tell him. Yeah, tell when die. People always ask me for a Tailwind content and I don't have any, I won't. It's not because I don't think it's a good tool. Yeah, it's just it's one of those.
My my generic answer is I see why people like it but it's not for me. Yeah. But that's just because like if you look at what I do, like I write CSS all day long. Exactly why writing CSS. So, like, you know, it's just that, I don't think, like, I'm the market for, for what it's there for. But at the same time, I see it as a useful tool in like a lot of different ways. I've seen some people use it just as like I do use utility classes and my own CSS. I just don't use it for everything.
I have sort of like the set things and I have my own way of generating them and stuff. But I've seen a few people now using Tailwind, not for everything, but for generating, the utility classes that they do need for their project and then the rest of it just rolling customer rolling however they want to do for the rest of it. So they're not, it doesn't become like the Tool it becomes one of the tools in the workflow. Yeah. And but at the same time I also know why any framework, I think
that's well done. It's theirs. Mike. I'm gonna mispronounce his name, my Capriccio, he's a Design Systems expert and his his big Philosophy for whenever he's working. As if he can put it together a good system. So everyone else doesn't have to write any CSS. Then he's doing his job properly because he's like, there's These people coming in that have expertise, has and other things.
Yeah. And then they start fighting, you know, or they have to make this, you know, they have to write some CSS because they need this to work and then it, you know, everybody's doing it a different way. And then it's, you know, you run into problems and if CSS isn't your expertise, and then you're, you know, you're modeling
around. You're making maybe things that aren't the best way that, you know, it like anything else, you know, if you ask me to write some complex JavaScript, I'm going to make it work, but it's probably not the best way to do it and it could even have some Downstream negative effects. I get that. So say I think, you know, the same thing can happen, so when you have these tools like, you know, a well-made framework it can, it makes it.
So if your job is to write JavaScript but you need to make that visual side work, CSS isn't soup, you know, isn't what you want to be spending all your time on learning because its own thing. Well, this is saving you from having to do that and it has everything in place that you need. So 100% like make sense. And I you know, I do the same thing if I was in that situation too. So yeah, yeah, you get that. I recognize what you say that the way people use Tillman CSS
or at least what I've seen. If they use it in to its fullest extent, it goes everywhere in the HTML and you can't really figure out what the class is. Do based on the the acronyms that Tailwind gives you, but if you make these utility things then all of a sudden it becomes a lot more structured, right? Your HTML still the same and you make a utility based on what
test do and offers you. I've seen that also an Enterprise software and it works from an outside point of view, but yeah, when you then actually go into the classes and what they mean, it's a different skill. It's like a different language, almost. It's a completely different Beast that they've created, and sure it might be, might be effective, but it is another tool that you have to learn where as the fundamentals are
still CSS. So if you understand the fundamentals, then all of a sudden. Yeah, you're like, I could also do this in CSS and maybe it's a Time Saver, but the basics are still CSS. Like that's the core component that you To learn. Do you think people that are learning CSS nowadays, or even like HTML, JavaScript, skip to the more advanced stuff?
Like if we're talking about JavaScript you, people start with react framework, or vue.js or go wherever, and maybe even people will see us as might start with to it. I don't know. What are your thoughts on that? Yeah, I definitely think it happens. I know, I mean, even my own for my own experience when I first started having to make stuff happen and I learned jQuery before I touched any, right? I started trying to learn JavaScript and like a jQuery is easier.
I'm going to use that instead. Give me obviously javascript's come come a long way and but looking back, I'm like, I probably shouldn't have shouldn't have done that. But yeah I think 100% it's one of those things where I finally was especially like with a lot of the boot camps and other things that are going on. Now, to you see it, because they're there to teach they sort of want to focus on the skill. That's going to get you hired which often might be something
like react. Yeah. And so if they're focusing on like this is the skill that we're going to give you because we know you'll get hired based on that. And then like I talked to people that have gone through them and they might do one day of HTML and CSS and then they sort of. Don't you run into this world where you don't know what's And you don't know what's react, right? And that the same thing happened to me when I was using jQuery, I knew that it worked.
But then when I finally started, like, I need to pause here, go backwards, because, if, when I knew jQuery, like, it makes it harder when you want to Pivot to a different direction. And I think it's the same thing. Where is like learning react has its you're learning a lot of other things than just how react
works. There's, you know, just the model of mental model of working with it using Tate, all these other things, those are transferable skills but I think knowing the fundamentals of JavaScript and then getting into one of those Frameworks or libraries makes it a lot easier because then if you do need to Pivot or you run into a new project that isn't using react, you're not stuck. But again it's easy for me to say that.
Obviously, it's a big time investment and everything else when it actually end, it depends on what school you're going to or where you're learning, and all these other things because I see it was see. That's to where people say like, you know, they find bootstrap for the first time, they're just like, oh why, why should I learn CSS if I can just use bootstrap and it works and it's a little bit.
Like you said, right, well, it works eighty percent of the time and then you run into the situation where you need to customize it and you know, you need something. It's not quite doing and you just have no idea how to do it. And actually, I learned I think I think understanding the fundamentals obviously, is really important no matter what the language is. Yeah.
But I know back. When I first started using bootstrap and I don't use it anymore, I haven't even used the newest ones I touched on for just to see what it was about. But I learned a lot, it was bootstrap to at the time and I learned a ton not so much from using it, but seeing how it worked and understanding sort of like, okay, why are they doing it this way? You know, what going through the
documentation properly. But then also like, trying to figure out what's actually going on and then Through like even their class naming on how they were organizing their files, how they were doing everything. Like, for me, that was nice because you're seeing how a large-scale thing that can be work from one project to another to another works. So at least for me that that was I think a good learning
experience. But instead of just using it, it was trying to understand what's actually going on because then again like if you understand that really well then you're all so much better actually using it right now. Like you're not. You're not stuck going out. Well, how does this, you know, how can I achieve this? You go. I know, I need, I need my CSS to do this and I know this is what there doc, you know, are you find it in their documentation, or whatever it is, but it's
about. How do I use this tool to accomplish what I want but you need to know how you would accomplish it in the first place, right? So yeah, yeah. I completely I completely agree with that because the current project I'm working on has Bulma and I know a lot of stuff had to do. This is not because I learned along the way.
And then I just open up their style sheet because they have it on GitHub and I search for what I want and I'm like, all this is this class, its kind of reverse engineering, what? I need based on the fundamentals that I have and then I use whatever the framework offers me, right? It wasn't my choice to implement a.
I am happy that it's there. But yeah, I I do see where the limitations are because you either going to make an exception and then the project is going to move forward with that exception which might grow into more because you're also going to set a standard. Or you're going to use whatever the framework has including its limitations. And then you're going to have to talk to your designer and say, well this is actually not possible or we need to make an exception. I like that designers.
Nowadays also think and have their own Design Systems, right? The the most prominent one I've worked with is atomic design, where okay makes sense, what kind of molecules we have and those four men to get the second one. But at some point you have an organism that is made up out of out of components and all the As I guess not, probably really butchering this but they come together and they form bigger organisms and that makes up your web page in that way.
And you can be like, ah, we have this already and we don't actually need a full design for this, right? Because we don't want to keep Reinventing the wheel. I've also come into projects where we have multiple variants of the same thing and it's just a mess, right? The code Base is almost 15 times larger than it should be.
Just because you have that mess. Some I'm really happy with the trend that is going towards Has more Design Systems and making software more maintainable because it's very much a long-term game that we're playing. Yeah. And yeah, I think any scale making something they can scale, is one of the biggest struggles, no matter what you're looking at, whether it's the front end or the back end or, you know, every part of it and design and that side of things falls into that, as well.
Yeah, it requires a lot of planning and figuring things out from the early stages. But like you said, if that's in place, It really helps out and Design Systems are definitely. I think I think with the combination of the sort of the evolution in where CSS is going right now, along with this sort of the maturity and the respect for having a properly done, designed systems, both from the designer side and then being able to implement that into code that can be used in the project.
I think some companies at least are starting to be like, okay, we could get Nobody who's, you know, you almost get like you have the, the designers, then you can get a person or a small team of people that are sort of the, the neck, the ones that are going to wear the CSS side. And then you have the other people that are more about the implementation of the functionality and everything else.
And I think you know with the special I think the more we can specialize in each thing that it sort of brings out the strengths and everybody which hopefully we start seeing more of this time. Goes on. Yeah, I agree. I like that that role is interchangeable. Because I still want to touch upon for example, if we have utility classes which are completely CSS.
I like that. The knowledge is within that team and I can just pick up a teammate and be like, okay, let's do this together because I think sure we can be specialized, but we also need to be General enough to get the stuff done, right. Someone Falls away. We need to be able to do it and I do see us trending towards that more cooperation, more collaboration. The thing that I'm struggling with now is so I've already been
in this game for a few years. I don't know what it's like to be. Teaching myself how to code now, but one of the biggest struggles I could foresee. Is that collaboration aspect is not necessarily there, right? I could look at the CSS battle thing. And everything is pixels and nothing is Rems or M's or or is going to be relative. And that could be my starting point. And then I'm going to try this or put it into practice. And it's either not going to
work. Or I'm going to get destroyed by people that actually know how to make this scalable. It's a, it's a hard journey, I think nowadays, Yeah.
Yeah. And as you know, I have obviously my YouTube channel, I do courses and other things on the side and my biggest struggle with online teaching, in general, yeah, is definitely from having taught in the classroom where a, if somebody had a question, I'm there to answer it but the nice thing with that is like you're seeing the struggles happen in real time.
But the other part is that collaborative part where you know, if I was doing something in the classroom Could have a project that was a team of people doing it and have different responsibilities and different things going on. You can sort of try and mimic some sort of it's still never going to match the actual workplace but at least you sort of get that idea of working with other people and building up those skills as well doing it online.
Is it's so hard because even if you get people that are motivated on day 12 people just fall off they go to the project, whatever it is. Yeah it's something that From if you're self-taught to be and you know, I had the same thing. Like for me, everything was from the coding side of things. I was just freelancing almost all the time. And so, pretty much everything I was doing was on my own just
making stuff work. And then at one point, I started doing some consultations and other stuff and working on bigger teams and it was a huge adjustment for me to be able to really get into like, okay, this is how the communications are work. Like I wasn't just like learn.
Let's bring my expertise and bring it here because there was this entire other skill set that I had to learn to be able to properly contribute towards projects and stuff and there's definitely mistakes and stuff that you're making early on when you're not used to that. Yeah, see ya. That's definitely if anybody knows a good way to sort of integrate that into online learning. I'd love to know what it is. Yeah.
It could be. I don't, I don't know maybe this Core group so like making smaller, focus groups. But as you say, if not, everyone has the same dedication in a work environment, the dedication. If it's not intrinsic, it's their externally. You getting paid. So at least people show up, right? Exactly. That's already a big factor, but self-study just requires a lot of discipline. I think that's that's fundamental if you don't have that, then it's going to be
rough along the way. What do you think web development is trending towards? Because I think a lot of people are moving more towards mobile first ride, especially in Asian continents. I've done projects there where it's like, all right. 90% is on mobile. So if our desktop works Good. If it looks like shit, we're completely fine. They're completely mobile first. And here, it's still. It depends on the domain, it's
still on and off. I don't know how it's in the US, but I am seeing a trend that is way more mobile first. What do you think that's going to meet with regards to web development? Yeah, ii-i'll. Give I know whenever it frustrates me a little bit because whenever I've always advocated for mobile first but not for the reason of it. We're targeting.
Phones necessarily but whenever any time I've made a YouTube video, looking at my Approach and why I do mobile first within like five minutes of the video going up. I always get comments from people saying, I don't need to worry about it. I do desk like enterprise-level stuff that's only ever going to be used on the desktop so this doesn't matter and I go yes. In that situation, 100%. It doesn't matter. That's not what I'm talking
about. Like, you know, it's if I was doing the same thing, I wouldn't care either. But you know, most people aren't living in the world where we're building Enterprise level stuff that's never going to be consumed on anything other than a computer, or a desktop computer. Yeah. And My Philosophy, I haven't come up with a name for it. Yet that works or that actually sounds good. So I'm still calling it mobile-first, but it's more. Like the path of least resistance.
It's like writing the least amount of code basically that gets the job done and usually for like almost Everything that is going to be targeting mobile anyway because on mobile layouts are the most basic already. You know, when you're doing a layout things stacked by default. Yeah. And so on mobile everything is just generally stacked and there's nothing too complex on the layout going on. So if you the issue a desktop first, as always, if you make a three column layout.
So even if it's just display flex and that's it, then when you get to, okay, let's put in a media query and let's change the layout for mobile. You had to create the media query and you had to change it. Where is if you went mobile-first you can throw all that in the garbage because you don't need it. The layouts are already working and then you can add the complexity at the larger screen size or add another breakpoint. But only after, you don't need
to change things back. And there's always going to be times when you're overriding things, maybe set a font size here and then a new font size here or your setting. And it'll, it might even be a, you use a display flex and you're changing the flex direction. There's different things you can be doing, you know? But a lot of the time the added complexity by adding complexity at larger screen sizes. For me, it just makes it a lot
easier. There's less code to maintain for the most part, but again, talking about people that get mad at my YouTube comments. I did one where I was looking at doing a Ian for a website and it was like the hamburger menu at small screen sizes, and just the typical normal one that larger screen sizes that goes across the top of the page.
Yeah. And in that case, there might have been a hundred lines of CSS, maybe I'm exaggerating, but let's just for a big number, but you had a whole bunch of CSS, because there was a, your positioning going on. You had to have, you know, what, what is it when its open? What's the CSS for when it's closed? There was a lot of happening. Yeah. And at the desktop, there was maybe five You do a display Flex, you sort of gap on it and was done basically.
Yeah. So, in that case, well, no, I'd rather actually do that desktop first, where I have the minimum amount of code making that work and then I just wrap all that complexity inside the media query because if not, I'm doing all that complexity and then I have to go and overwrite all those properties. So, I have to change the flex Direction, have to change the spacing and to change this.
I like there's just this huge list of stuff that you're over writing to try and force that other one to go. So I think, I think the key is always He's just trying to do something that involves the least amount of work possible. Yeah. Because if you're doing less work, it means there's less code. It means there's less to maintain and that just so happens that most of the time that means you're only worrying about mobile early on anyway. So yeah yeah, I agree with that.
I've seen both sides by projects were probably a bit more early in my career but I would see exceptions in the code that would be like a mobile. Has this one with regards to HTML with the rest of styles. Just being a Option and then all of a sudden we would have a quite a lot of exceptions because mobile is still quite different from the Design Systems we chose right. And then I went to a different project and there it was the other way around.
It was like our when it's a bigger screen because they also had that class. I don't know exactly what was that but let's say it was that if it's a bigger screen all those on its this and I noticed okay it was a shift in my mind because when I would deliver new code I would be like. If it's mobile it's going to be that the big no no let's try and
make it more. Well, first right, let's do all the code as if it were to be normal on mobile because if you scale that to a desktop version and then all of a sudden it hit me because I could see all the moving parts and it does stop. Here it would look a little bit less nice than what I'm used to, but everything would be in place right at the other way around. You just don't have that screen reader state.
So then yeah, from a code perspective even though it's a shift and it even though you might not have done that in the past, that was exactly it for me, I never done that in the past. But you do see the benefits from that. And as you say, It's less code, right? But I also like your example because I have not noticed that people will MIT take that approach in be dogmatic about it, right?
If you're making a hamburger menu and mobile or that's going to be the first one and then your desktop exception can be very tiny. Yeah. Then it becomes all of a sudden, you're like, okay, why can't we do this, both ways right? Choose the most practical way, but then we have discussions. Well, what's the standard? That's, that's a harder thing. I think once you're communicating and I still think mobile first is kind of a Not a golden rule, but maybe a silver rule.
I think you should be good with regards to complexity by. Yeah, I took a while I get get hold of that it is definitely like a mind shift though. Especially, I mean a lot of people. Do they tell me. They only have like they're designer whatever they're getting it from is only desktop. They don't even have anything else. Yep. Which definitely happens to. So it's definitely like this and you're usually working on a desktop to so you have the big screen that you're working on. So yeah.
Yeah. A lot of reasons why we want to start working that way for sure. And it and if you've made even one project that way, first it just becomes the way that you're going to work. So but if anyone who's listening, hasn't tried it the other way around. Even just starting with a desktop like just find a really simple layout just to try and recreate that's desktop.
Only are you only look at the desktop version of it and see if you can make it work with a mobile-first approach and you might surprise yourself at it becomes intuitive pretty quickly, I think. Yeah, Yeah I agree. I have also worked on projects where my designer gives it in a mobile first View. And then I'm like What's the desktop going to look like? And then he'll be like, well we'll figure it out, right? And then we look, we sit side by
side. It is the mobile version, I scale it and they're like looks good. Looks pretty good to me because everything's good should scale, kind of automagically. And then you're good, right? Also for your designer. I think it's way harder for them to Envision. What is going to be a mobile? Yeah, if a lot of people actually use that. I mean customers King right? I don't know if that's an English translation but that's definitely a Dutch one.
Yeah, yeah. So they get to the side and if their preferred platform is mobile, then we as the people that built that platform also need to accommodate for it in whatever we're doing. I like it though. I think it simplifies a lot of things. I'm also a fan of the the Frameworks, I think you and me talked in the in the call we had before the show. Also, do you think it will get to a point where I mean, we need
fundamental knowledge of CSS. But will it get to a point where we don't have to write CSS, or will it always be there? What do you think? Because I think it is trending towards a lot, a lot more training wheels, maybe a framework and a training wheels, not the best analogy, but it is tools to kind of not reinvent the wheel. Instantly. I think it's trending towards that and it's not just on CSS. It's also on the backend.
It's also on the front end. We try and do a lot of stuff without writing a lot of code nowadays. Yeah, yeah. I'm actually really unsure of what the future is because of the directions, he SS is going. And a lot of the new stuff that's either just Landing now or is sort of on track to land within the next 12 to 24 months. That I'm like I can't see how a framework would be. Well, I mean some of them you could 100% do for like certain
things. Yeah. But like the power of some of the stuff that's coming. I don't know how a framework would really take advantage of it because a lot of it is very or but again we don't have it yet so it's one of those things. It's exciting. I think I'm speaking abstracts but like we have container queries coming with container units coming.
So those are like, you know, If for, if you haven't heard about them, we have media queries right now, that are looking at the size of the viewport, and it's not really a great way, if, you know, we're building components and a component might be something in this situation, it's in the footer, and it's full width and you take the exact same component and you want to put it in a sidebar, using a media query.
That's looking the viewport to change the font sizes of layout isn't very practical because in the footer, you want it to be a different layout than you do there. So, then you need these exceptions and these other things. Container queries are In to look at the size of the parent, rather than looking at the size of the viewport. Yeah. And so it follow, you can write your component with the CSS for that. And then the layout is changing based on the context that it's inside of.
And so we have that coming, we have the units that are coming with it. So instead of a viewport unit it's a unit that is relative to the width of the parent or the height of the parent. We have the has selectors coming. So it's like a parent selector finally, but it Does at the basic level, it's apparent selector, but then you can select a parent that has a certain situation that then you can restyle the children, depending on that, we have style queries coming.
So like if this property has the color white do this, if it has the background color purple that you can, there's a lot of new things that are on the way that are going to open up a lot of new doors. And I'm just like the customization in the like all these really cool things that are going to happen. I'm curious what Frameworks do with them. Yeah but the one problem with Frameworks is always like they have to be just very generic because they need to work in every single project.
Yeah. So there's also mean you're right so then it that means you can't fully like because there's all I don't know I'm very curious to see how these get integrated into them because I do think like specially container prairies. I think will be a very natural fit for them. Yeah. But for us for some of the other things I'm very curious to see
because there's so many I don't. I'm super excited for all these new things coming and seeing how people what people do with them but then also how they're integrated into larger systems and see I don't know what the future really holds. I'm excited to know what it is. Yeah, I'm right there with you whenever something new gets added I'm like I can see where would be applicable, right? Because it's probably something I struggled with in the past. And I'm like, why why isn't this
here? Oh, but then, maybe I realized, maybe what I'm trying to do is just to either too complex or just shouldn't do it. But it opens up a lot of doors. And because the frame works exactly as you say our framework so they can be used in a lot of projects doesn't mean they should be. I think just because of that I don't think we're ever going to have a framework that can.
I was also everything. I think if your fundamentals are strong and you know, when to use the practices that you're using, I think a framework can be a really helpful to. But again, it's like Enterprise software, it's like the front end. Her back end if you really need those exceptions. If your designer has as created something, that's really awesome. But your framework just it's just a misfit, then you need
those exceptions. And for that, you need the fundamental knowledge, as well as the knowledge of what's out there, right? If we can all of a sudden, say, oh, if this color is here, then your child classes are going to become that instead. Then that's a I could see how that exception can be useful, doesn't mean we're going to apply everywhere, but for that really cool design because I've seen some really awesome designs and some Really awesome implementations in that way as well.
We're going to have to have to use CSS still. Yeah I don't think it's ever going to go away. Just like I don't think the programming language is going to go away which is going to be better at not Reinventing the wheel. Yeah I think that's. I think that's our end result. I think we're really good at Reinventing. The wheel has to be something that people really enjoy doing. Yeah, it helps with those
fundamentals, right? If I've tried to do a lot of stuff with CSS, I've, we do innovation. As Iraq Syria. So we get a day to just mess around and I've tried to have a microphone on my laptop with input and music and then through that, make a CSS wrapper and let it bounce on the music or that was a lot of fun.
Just to see how I could, how far I could go with CSS and even had to throw in some math because I obviously have made a circle with things that dance up and down and I was like, man, my end result was all CSS and I was like, that's pretty dope. You can still do a lot of a lot of cool things with See says, anyone HTML. It's going to bring you far and yeah, the time of math. They've just, I think Safari
just landed. They have you can do sign and tan and all of that in CSS now and there's other stuff that's coming for that. And yeah, it's kind of crazy where things are going compared to where we used to be, that's for sure. Yeah, I already say that and I'm not in the space for as long. I can imagine what it was what it was before things are moving really fast of the thing. I'm Struggling with is. All right. Some point you're going to need to specialize because it's just
too much. You can't be an expert in an CSS. And for example, react and for example, pick a back-end language plus the infrastructure. Post the cloud, see it. That's why I need a breath talking about that because it's so much yet, I don't know why. But companies set that expectations on people and then people take those expectations seriously and they're like, I'm never going to be an expert in all of this. That's why I like the
collaboration aspect, right? Cuz you can collaborate and get things done that way. I just think it, I hope it's not going to be more because if it is a little bit more, it might be a bit too much. Yeah. I think that there's some places where that being realized and I'm hoping it just that Trend continues where they realize that people, you know, let's take advantage of people's skill sets. Instead of expecting people to do everything, you see it come up and see you know you'll see
some. You don't see them job posting so much because job postings always seemed just ask for everything. And lots of experience but, you know, talking with people within the space within certain organizations. Anyway, right now, I'm starting to see where there is the specializations that are being valued, which is really awesome and hopefully, it continues. But yeah, that goes with, I guess, like it's parts of the, I think there's two folders, the trends of the industry and just
the way things are evolving. And I think when the big, the bigger companies set sort of certain standards like There's a trickle down, but at the same time when you have smaller companies or startups and other stuff like that, they don't have the budget to go. Okay? We're going to get the an expert in five different fields.
We're going to get the one guy who can do it all, because that's what you know, especially at the beginning, you don't have the budget or the time to sort of invest in building things necessary. You know, it's what is it? I can't think of the expression doesn't matter if you're breaking things, though type of thing, which I think can be a bit of a Jeurys attitude. Sometimes just, you know, you figure it, let's get it working and then fix it after.
But the cost of doing that can be a lot more than it would have been just to like, okay let's slow down by six months and do things properly from the beginning. Exactly. But at the same time, you know, it's exciting, starting something new. And you also, if you are building a product or trying to get something off the ground, you want to get it off the ground and it's hard to go. Okay.
Now we're going to sit down sit on this and try and have enough funding to last us, nine months before our product exists, isn't maybe a realist. Hang on my side to be asking for that for more people. But yeah, it it's hard though in your, you do those. Let's build something as fast as we can to make the MVP. But then instead of being key, that's the MVP, but do we start over now if they or are we just trying to fix what we have and that you know, it's a tough
situation. Yeah. When it comes to, when it comes to studying and CSS, I've never started a project and being responsible for setting up. For example, our file structure for using SAS or a class component. Opponents and higher-order components and stuff like that with regard to the front end. What can you compromise on with regards to speed? And what can't you compromise on? I think responsiveness. And like, mobile-first are going to be in there. Do you have any good examples
for that? That's a hard one, it's hard when I think one of the advantages with CSS because you know I've seen projects that have years of over, you know, just been built up over years so that these huge style sheets that just when you do decide to implement something new, you know you you come in with a new class naming system that's prefixed with whatever you know. So you just like Dot. Whatever the project meal NP hyphen. And then whatever your classes. Yeah.
So you just prefixing all of it with this thing to say like okay this is where our code base is. Now a new CSS must, you know, if you're doing it properly is starting with those and then you can sort of phase out the old. You know, this page is getting redone or this layout or this component are getting redone. So then, like you sort of it can order, new stuff is being built, but like you can sort of phase things out slowly that way at
least. If you're starting a new project though, I think that there's enough tools that are out there right now. Whether it's a framework, whether you're sort of just planning things out properly or doing things in a certain way. Yeah, you shouldn't have to compromise on too much, probably. I think the biggest thing is you make a decision early on that then you sort of regret later. But yeah, that's those are hard of life, I think. Yeah, exactly.
I really like that, because I think the thought that we can compromise, doesn't mean we should, you need to set a certain standard of quality and if your project is going to be, for the long term which somehow most of them are even even proof of Concepts. We tend to just build on top of that. The make sure your fundamentals are there, right? Just like your knowledge, your coach, it also have a good fundamentals and then they'll just grow towards the future. Yeah.
And when thing, I'm trying to educate myself more on and educate others on. Well, I'm at it. Is accessibility and I think that's one of those things that early on gets ignored because it's like, oh worry about that later. Yeah, and I really, I do think that's one of the things that shouldn't be compromised on early on, just because the technical debt of trying to fix
certain things. Once you've made them inaccessible is a lot harder than just having done it right in the first place and a lot of the time, it's not that like most things when it comes to accessibility. Like, if you start reading about like really deep diving, a Stability. It's a rabbit hole that you can.
It can feel overwhelming because there's so much to it, but even if I don't know if the listeners or if you're familiar with like area labels and stuff like that, which are for assistive Technologies. Yeah. When you start reading about that, there's so much but the expression is, no area is good area, it means you're using the right HTML markup, you know, using semantic code and doing all of that, it's like, as long as your foot.
It's almost like the the same idea as before like, Effort in a way is good. You just have to make sure that it's done in the right way. And yeah, then it makes it a lot easier in the long run. So that would be something.
I would say try not to compromise on if you can, convince the stakeholders about it because it's definitely something that in the long term you're going to need and it's a lot harder to work backwards on that and try and fix things because if it's wrong then it often just needs to be torn down and rebuilt basically. Yeah. And that, that's a huge shame. I love that answer.
Yeah, I hadn't thought of that myself but it's because I've never been in this situation where we were like, okay, we never took it into account and now we have to tear down everything and I can't see if you didn't take it into account. It's like tearing down all the walls around you and start exactly. Yeah, yeah. I love how this conversation flowed learning about how you kind of started out and and the real focus on teaching to where you are now really passionate about CSS.
And we're going Is there anything that's missing? You still want to share? No, I think I think I'm I enjoyed it too. As a fun conversation. Love hearing that. Then we're gonna we're gonna round it off here. Kevin Powell everyone. I'm gonna put all the links to socials in the description below and thank you for listening. We'll see you on the next one. Thank you so much for having me. It was a blast, awesome.