Avoid These HTML & CSS Mistakes At All Costs

okay these mistakes are extremely deadly because while html and css is not actually that hard if you're making one or more of these mistakes it can feel incredibly hard okay now here's the thing i was a front-end developer for four years and i now run freemode the freelance developer bootcamp see the same common mistakes emerge over and over from beginners and i think unless you're aware of these mistakes html and css can just feel way harder than it actually is so in this video we're going to talk about eight very specific mistakes that you want to be aware of so you can avoid when you're writing html on css and even if you're a bit more experienced you might not actually know about this stuff so let's get into those mistakes right now and by the way did you ever get an iced coffee where they just dump ice in the hot coffee it doesn't really work that's what i have here so let's get into it now okay okay we're gonna go through eight mistakes in this video and mistake number one is trying to code all your html up front so i'll see people look at a design or think of what they want to build and they'll try to write all the html in a row so they'll be like okay i need a container i need a div then i need a ul then i need three lis one two three and they'll write in all the content and everything like that or they'll actually use emmett which is like this ulli times three and they'll write a super long string that is generating their code for them and if you do this uh you should stop doing it and it's look it's not your fault a lot of youtubers do this they code out all their html you know at once in the beginning and you're just like wow that's so cool they do it so fast but here's the thing that's not how it really works the reason for that is you don't always know how they're going to work together initially for example if you have three elements aligned left to right like let's say you have something like this you have three boxes uh that each show some content on your page and this is just an abstraction for what your design might look like that you're trying to build so if you're experienced you could reasonably think okay we're going to use flex for this display flex and css and we're going to align things left to right but there could be you know a box within this box okay and it could be some text and then the box above it and the thing is until you write out the css you don't know exactly how the html is going to look because you might need you know three containers to make this layout work so the bottom line here with tip number one which is don't write your uh html out all at once is you're going to end up rewriting it or changing it anyway and you may also have containers you don't actually need so you might create all these divs that it's just unnecessary to use because you can achieve the same result with css and do it in a very specific order which is going to lead us to tip number two what is the order you code out your html css in and i'm also very strongly opinionated about this where you're going to want to go from outside in so outside in let me show you what i mean on a page then i'll actually show you in code so we're on the wikipedia page for ukraine and it looks simple enough but if you really dive into you know what does this html css look like it's a bunch of different containers with different content inside of it so when you start thinking like a front end developer you can kind of see it in the matrix of this page and what i see first is a very big container outside the edge all right so you're gonna have this very big container and in my view you should always code this first okay uh then second let me just change the color what are the next biggest containers well i see one up here at the top there's like a header okay there's this sidebar and then there's this big main page content okay so what we're doing by thinking in containers is we're allowing ourselves to build from outside in which just makes things a lot easier for one simple reason and it's because you can segment your page appropriately from the beginning so if you tried to like build this sidebar first before anything else that's great but you might have coded it in a way where this is very difficult to add in later let's say you did like a position absolute on this then everything's going to be messed up and very hard to change down the road so how do we actually do this in code well let's open our very basic html page here and we have just this generated code so in the case of like this wikipedia let's just really quickly create these three sections [Music] now things are appropriately filling out let's see is that enough space i think yeah that is almost exactly what we want and how much space we want this to take up and this is going to give you the most sustainable solid foundation for not running into problems later when you have more code which is always going to be more complex okay now the next thing i want to talk about is class naming you can notice we did container sidebar content container and this is a simple tip but you just want your class names to make sense okay you want them to be descriptive so you don't want to just call your class abc or out for example you want it to be very specific and this container class is actually pretty pretty poor naming convention here because it's too generic but i could do like outer container or outermost container that would actually be better we have some of this built in with semantic html so our class name then becomes our element name for example here header but if i wanted to get even more specific i could say you know top header right and so takeaway here should be your class names they should be nouns they should be descriptive and they should make sense okay okay so class names should be descriptive they should be nouns what about class names to avoid well i would say anything actually relating to style should go in your css and not your html so this is a bit controversial because people maybe they will put red background here but this really limits what we can do with our css selector later on and we can only ever make it this descriptive you will see this used in libraries like bootstrap where it will talk about the css but in general i think you should you know stick to being descriptive about the location and the function of your html rather than talking about the styles in your class name okay now this next one is also super simple but it's absolutely huge okay so i just want you to imagine if we had way way way more html and css so let's say we had 500 lines of html here and a thousand lines of css which is still relatively small now let's say i'm looking for the styles for this class all right and this could even be in my css file so let's also put it here uh so what i see people do a lot is they will say okay it's outermost container then they'll go to their css file and they'll just be scrolling through they'll be scrolling scrolling looking for the name but people look there's this thing called ctrl f or command f right command f outermost it'll take you right to it so anytime you can use ctrl f whether it's google vs code whatever you should be using it that will take you exactly where you need to go and if you do use vs code then you can do command shift f and you can search for all appearances so outermost container you can search for all appearances in all your files so i know half of you are saying yeah this that's really obvious i already do that but i know at least half of you just start doing it right now and never stop okay okay next tip and let's continue to use this html we already have a mistake i see people making is not testing on all device and browser widths so you might be aware that within chrome you can use devtools you can simulate different devices right so if i do command option j and then i click this little device thing here then i can do iphone i can do ipad and i can say okay so this i want to move here on the ipad size and then i'll write my responsive css but what a lot of people don't do and i did this myself for a very long time is they don't think of everything so they don't test for example the vertical axis do things still look good if your windows like this small right and then also a big one is what about someone who has a screen bigger than yours okay that could actually be quite hard to test uh one way to do it is to zoom out and that will not give you an exact layout on a larger screen but it will kind of simulate that and it's better than nothing and then the last one is and most people don't know this even if you do the device view here if this is a serious website that's going to be going live you want to test it on your phone too for real because it can look different i mean this thing isn't perfect so definitely go to the url on your on your iphone or your mobile device validate it make sure it looks legit because you know a simple mistake like that it can make you kind of seem like an amateur if you're if you're coding on someone's you know important site okay now the next important one is not deleting unused code okay let me give you a quick example of this one and i'll do that by just adding a let's just do an h1 here okay and we'll do test body text okay so let me just build up this next issue that people have so let's say i wanted to center this this h1 here within the div and i just i couldn't quite get it and and i didn't know exactly how to do it so i was trying a bunch of different things so i was doing this i was doing a margin left 50 maybe so i added that and that didn't quite work so i did margin auto and then i did justify content center and that didn't work and then i do text align center and that did work okay so what is the problem here well i will see people they'll do something like this and then they won't delete the code that didn't work and this is so huge because you don't know what's actually centering this so if you want to go and change it later uh which one of these do you change which one of these do you remove so my next point is you want to delete all unused code that you can okay so uh if i know these three didn't work i want to immediately delete them because i only want the code that's actually doing something uh i would even take this to another level if you forget what something is doing like let's say oh do i actually need this height try deleting it save it and then say okay i didn't need it so bring it back okay so if you ever forget what something's doing try to delete it and then bring it back and this will just help you stay a lot more organized stay cleaner and your quality of life will just be higher okay now the next tip is related to just css and it is really grouping things together appropriately so the convention is to do broad type to specific type but it's not quite that simple but what we can do is we can definitely put the element selectors at the top of our css okay so anything without a class like html header body and especially you know if we're doing some html body or star selector stuff we would always put that at the top as well as variable names at the top and usually what you want to do is you want to group things from broad to specific but within their grouping so to be more specific let's look at this content container selector okay let's just go straight there uh below content container i have a uh header so i might want to do an advanced selector on just that header in which case i would take this and i would do direct descendant and then i would say okay just for this header i want to do change the background color to orange for example okay so uh then within this content container i have a div and h1 so maybe i would just want to style that div so i'll do content container div right below this i'll do background color gray okay so that's my text container and then within that div i have a h1 so i want to do h1 and i want to change that text color to white so what exactly am i doing here wait i messed that one up not background color text color color so what exactly am i doing here well i'm grouping things together in terms of their parent class so we can say this header this div this h1 these are all child elements so these are all going to be together within my css because the parent is going to be here and then the children are going to directly follow it and then that rule applies recursively where if i have a child within my child now this will be the parent and this will be the child so i know that's a bit confusing but basically things that are grouped together on the page are going to be grouped together also in your css so we can just call this logical grouping of css rather than kind of putting everything in a random place okay now just one more thing and this one is probably pretty obvious but it's easy to forget and it's not obvious for everyone is reusing css okay so if i for example have some text i want to change to white and this is a very specific selector just applied to this header but let's say i have some text at the top at the very top of the page it's like wikipedia h2 wikipedia then in header we can do let's say navigation put that into h4 and then test body text this could be our maybe article title but let's say i did want to make all my text white like this text here so what i don't want to do is put white everywhere so let's say i want to you know make the h2 white so i go to the appropriate place on my page sidebar i do sidebar all the h2s inside there color white and then uh navigation i want to grab that one so i go header h4 maybe like header h4 color white so what i'm doing right now i don't want to be doing because i'm i'm reusing a lot of uh this color attribute on different elements and if i know i want all my text to be white across my whole page and maybe i have a few exceptions where i want to turn it back to black well you got to think about this logically and say oh this should be less specific so maybe i make my default color up here white and then i can just delete this i could just delete all these all together so i'm saving three six and then uh you know nine lines of code and that's just because i'm putting it in the appropriate place in the hierarchy and this is part of the reason css is hierarchical or cascading cascading style sheets you want to make things the appropriate level of specificity so you know if you know that color is being applied to all your elements or even multiple elements inside a container you're going to want to put it as high up as possible in you know the hierarchy so you could call this rule not repeating yourself in css or rather just using specificity appropriately so with all that said i hope it was helpful hope you learned a thing or two at least one trick from this video and uh yeah subscribe if you want more videos like this one anyway i will catch you guys soon with a bit more variety and yeah talk to you later [Music] [Music] you

Channel: Aaron Jack

Views: 67,288

Keywords: programming, web development, javascript, react, learn programming, learn to code, coding, software development, become a software developer, software developer, freelancing, freelance developer, coding tutorials

Id: 8FlWUa04f2g

Length: 16min 39sec (999 seconds)

Published: Tue Jul 20 2021