6 things I wish I knew about CSS when I started

when i started learning web development i was self-taught and i made a lot of mistakes along the way including a lot of mistakes that i was making that i didn't even realize were mistakes until much later on so in this video i'm looking at five css tips that i wish people had told me earlier on in my web dev journey and we'll finish things off with one js tip as well and jumping right into it tip number one is to actually look at the design that you're going to be trying to create instead of just diving in and starting to write code you want to go through a layout and try and analyze that layout and find things within it that repeat themselves or there's common elements here and there are maybe this area's three columns and that area is three columns but it they're still just three column layouts types of things and then by going through and analyzing it and looking at things like spacing and typography and layout and all of these different pieces and trying to analyze it as much as possible before you start writing any code whatsoever it lets you plan things out in a much better way that while you're spending the time up front to be able to do that in the long run you're going to save yourself a ridiculous amount of time you might hear about writing dry code where it's don't repeat yourself and by analyzing it and all that it lets you do that where you might have two sections and you know early on i always see people that are doing like class section one class section two class section three class section four but it turns out that section one and three are exactly the same and two and four are exactly the same so you don't actually need to like rewrite code over and over and over again but if you're just going from the top of the page and working your way down you're gonna do that whereas if you look at it from the beginning and you're looking for these types of things you're gonna start seeing these similarities and finding things within the design that are going to save you time in the long run that also means things are more maintainable and easier to update and all of that as well and building on top of that comes tip number two which is separating content from layout if you're going you have this three column area that you need to build and you make a class and you're putting all of the layout stuff in there and then you're also styling it and doing like the colors and the fonts in the background and the image and all of that is one big thing that's going to come back and bite you layouts on the web tend to repeat themselves a lot and treating something like this is a layout class it's going to set the stage for this layout and then i have these other classes that are going to come in and actually make things look the way they look then you can plug and play things a lot easier you can take you know this component plug it into this layout and take another component and plug it in there and in both situations it's going to work and it just makes your life a lot easier it's also going to be something that serves you really well in the long run because layout wise you're going to start reusing the same types of layouts all the time because these are the things that we see all the time on the web the web we know often looks very similar one site to the next and even if you get into more unique layouts these classes and the different things you'll do to build those layouts are often extremely similar project to project to project so if you have a whole bunch of classes that are creating these layouts and doing nothing else then you're gonna be able to reuse those project to project a project once again saving yourself a ton of time in the long run tip number three is going to circle back on things a little bit and i'm going to suggest that even if you've been writing it for a little bit now you're past the very very beginner stage it's to circle back to those fundamental and foundational skills or concepts i should say that we learned early on because often when we're starting to learn things we brush through them really fast because we're there's cognitive overload we're learning the syntax we're learning all the different properties the values and then even more like complex things like stacking context sort of like it passes over your head a little bit because you're you're more focused and you're more absorbed on what feels like the more important stuff and you miss out on these other things or you don't realize the implications maybe of the cascade or the box model and these other things and you might not even hear about some of the fundamental and really important parts of css like stacking context and formatting contexts which have a big impact on how you will be writing your css and understanding those fundamentals just unlocks a lot of other things and makes css make so much more sense and if you've never heard about things like formatting contexts or stacking contexts i have linked to a course that i have that's just down below called css demystified which is all about doing exactly what i said going back over the fundamentals but looking at sort of like how understanding those things can actually impact how we write our css so if you're interested the link for that is just down below all right tip number four is to stop trying to design stuff um take designs and build designs that are out there already whether it's from challenges whether it's you're copying another website whatever it is but if you're not a designer you're trying to learn css and learn web development that's a completely different skill set and that's something that people go to school just to study that so to be able to expect to do both to me isn't realistic and you're trying to learn two completely different skill sets at the same time which is just going to slow you down and generally means that you're just creating really ugly layouts that don't look good focus on what you're trying to learn and if you're watching this i'm assuming it's web development you want to really focus on that side of things and not worry about what the design is going to look like just how you're actually going to make that design become a thing now one of the things i always hear is how do i what do i build how do i know what to build so i have talked about that in a previous video about how we can escape from tutorial hell and in that video i do mention a bunch of resources that we can use that provide us with the designs so at the end of this video i'll circle back to that as a reminder and now tip number five comes sort of is tied in with the the one we were just talking about which is with the designs and it's this idea of pixel perfection not a good thing i don't like hearing that term it sends a chill up my back every time i hear that we don't want to strive for pixel perfection this is a term that started way back in whenever the old days when it was all photoshop mockups and we didn't have responsive sites we live in a world today where everything is changing we don't know what the user's resolution is we don't know the size they have their browser on their screen we don't know the size of their device the orientation of their device the color gamut of their device we don't even know if they're looking at it or if they're using a screen reader we know zero information about how the user is actually consuming our site we can just take best guesses and try and cover all our bases trying to get something to be very close to the design 100 we want to try and get close to the design trying to make it pixel perfect across every single browser is just you wasting your time that lasts like two percent is going to take you just as long as the 98 it took you to get to that point and it's just going to be you banging your head against the wall and struggling with things that in the big picture don't really matter i know sometimes we have bosses or designers that are saying no you have to get my design exactly how it is and maybe that's if possible time for a discussion with the designer or with the team or whatever it is about like is this really worth the resources we're putting into it depending on your role you might not even be able to have that but as much as possible try to ignore this idea of pixel perfection and just go for something that works and it is very close to the design and gets the essence of the design but remember the users they're going to do something that's going to make it not exactly like that anyway they change the screen by 20 pixels off of what you were expecting them to have or they're on your website for some reason on a landscape view on their phone who knows why but they are and so we just try and do our best to accommodate every possible situation and my last tip for today as i promised as a javascript tip and it is if you're struggling with figuring out javascript and you feel like you're just starting to learn it and it's a little bit like learning math in high school where you're sort of kind of getting it but you don't know what the point is i was there for a long time and i just kept sort of trying to push through it and learn it and figure out what the point of all of this was and there was no point until i got into learning dom manipulation and so yeah the tip is do that learn dom manipulation get in find tutorials about dom manipulation because that's when you start taking these ideas that you're learning and you actually start applying it to making a website and that's when everything starts to click and i think it's really important to understand the fundamentals of javascript and know what's going on with that and understanding loops and the theory of how all of this works but to make it make sense and to see the practicality of it all which makes you actually once you start seeing things happen and you're doing stuff with it it's much more exciting and motivating so if you feel like you're really struggling with javascript start at the very basics just doing basic basic dom manipulation stuff with it and you start seeing the point of it and then don't always be looking for excuses just to learn that but try and build something and along the way you're going to need how do i do that well i need some javascript well how do i do how do i accomplish that then you're going to find a tutorial or find something that's going to help you understand how to do that and slowly over time you're going to level up your skills and that brings us back to what i said i'd circle back to which is those resources and just getting out of tutorial hell and starting to really learn and reinforce your skills so if you do want to check out that video that does have plenty of resources linked in it it is right here for your viewing pleasure and with that i want to say a very big thank you to my enablers of awesome jan johnny lucas mr dave patrick simon stephen and tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your coin on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 224,680

Keywords:

Id: U7itlR6qESM

Length: 9min 9sec (549 seconds)

Published: Thu Sep 08 2022