How to ACTUALLY Master CSS?

css is that one unavoidable thing which you have to learn as a developer if you want to build any decent front-end app it doesn't matter if you don't like css or not you have to code that because the days are gone when you can just ship a raw html page now in today's time everyone expects you to have a nice decent landing page at least for your basic website as well but what does it take to become a master and expert at css in this video i want to discuss a few topics which are important which you should consider visiting or revisiting if you haven't done them yet and see if you really really understand those topics or not because there are infinite things in css css pretty much is a programming language on its own at this point because it's too complex and there are so many new things you can try out but these few fundamentals you were gonna need for pretty much anything you do in your css world let's take a look at that in this video if you're new here make sure you leave a like subscribe to the channel and hit the bell icon this is free of cost and helps the channel grow all right so the very first thing i'm going to start off with is the box model in css now box model is so ridiculously important that i would not recommend pretty much anything else in css to learn before you actually learn box model and a lot of people start not with box model and that's completely fine but given a choice to relearn css i would learn a lot more about box model before i dive into anything else especially of the layouts part that is the grid and the flexbox now what exactly is box model well very simply speaking box model means how the margin the padding the borders these properties behave around an element in css right so learning about if you have a content out of the padding then the margin and the border like really behaves is really the essence of the box model understanding that is like super important once you understand the basics of box model i would recommend seeing if you actually understand layouts and css as well at least for now i would recommend flexbox and grid layout but if you want to really solidify your css learnings and understandings you can also take a look at what is known as floats in css now floats has a lot of use cases except you know just just not for layouts it is used in a lot of hacky ways sometimes as well and this is why this is a little bit dicey so you should probably consider this when you are more like intermediate with css then figure out what floats are how clear works how loads on sudo elements works and so on but for now flexbox and grid are your best friends in order to create most of the complex layouts you see on various websites right now when i say learn layouts what do i really mean is that if i give you a layout something like this i want you to draw this layout in html and css with flexbox and grid individually right and you should be able to do that you should be able to visualize in your mind that okay if i want to do this with flexbox maybe this is one element then this might be another element and so on so you should be able to visualize how you would make that particular layout similarly for grid as well and the more layouts you practice with the better your understanding would get in terms of how flexbox and grid and these various properties on the these layouts work so like this is like super important the third thing i would recommend for you is to actually understand about units in css this is also very important and a lot of times people overlook this when you get confused between pixels ems rams sometimes even pointers vh vw so these all sorts of older and newer units are there now so understand about them what does truly a pixel mean how does it differ on various screens like you know if you are using a website on a retina ipad what does the pixel really mean and this is like kind of an advanced stuff a little bit on the advanced side but we are talking about how you master css and a person who knows a lot about css would actually know a lot about these units as well how rem works how rem in conjunction with em or pixel works there are all sorts of nuances around how these units work and operate in css so learn about them after this i would also recommend learning about a bunch of new css3 things for example calc function is super handy super useful variables in css is very very useful for reusability and keeping your code base clean without actually using things like sas so that is also very important new features like you know new units for example bh and vw are also something which you can cover in this one so having a look at and knowing about what css3 features or css3 plus as well which is like you know beyond css3 what all sorts of features are available and what you can you use right now in browsers super important stuff now while we are discussing about units in general i also want to tell you that how important it would be for you to learn about how to make your websites responsive using css media queries so understanding about media queries in general and about making your websites responsive in general is also like i would say the fundamental difference between a good developer and a master developer in css right those people know how to set breakpoints those people know when to change the layout from this complex layout to a simple stack based layout which is usually what you would find on mobile phones and how to do that that's also like super important when i say how i mean like usually purely with css because if you use javascript it involves all sorts of cumulative layout shifts and hacks and this and that but yeah i mean making sure that you know about how media queries operate how you can make them responsive and your website responsive with the correct units in place this is like already getting too much into a little bit of advanced side of things so i would highly recommend you to take up your few projects which you know which were not responsive or you know just download a few projects which are not responsive and try to convert them to responsive there sixth i would recommend about animations so animations obviously is not for everyone in the sense that obviously not every front end would require a lot of animations but if you're talking about mastering css then animations is a big part of that because animation has first class support in css you can create some beautiful animations especially with css3 and the new keyframes and this and that things which are not available before you can do a lot more damage so learning about all sorts of keyframes and how they work i would also throw in something like bezier curves i think that's how you pronounce it i'm not sure if i'm pronouncing it right but bezier curves is a it's it's like a mathematical formula of having how an animation proceeds from zero to end so some animations you would have seen they start fast and they end slow right so this is like one example of a bezier curve some animations start very slow and then immediately ends right some animations which are linear they have a busier curve of this so understanding about these curves which curve might look better in what sort of animation spring animations this and that so this is also a little bit on the ux side of things but again if you are working with css you pretty much are working with the user experience so you have to know a little bit about that as well seventh thing which comes to my mind is using something like ocss or not exactly using at least knowing about post css and sas now what these tools do is that just talking a little bit about sas is that it gives your css superpowers in the sense that you can nest your selectors you can use variables you can use functions you can do all sorts of stuff but to be honest the only two features which i have really used when using sas is variables in css which is also like natively available now and the second one is actually the nesting of selectors this is probably the best feature out there i wouldn't be too surprised if css brings native support for nesting selectors in the next four five years so that is awesome other than that post css is also very useful especially when you don't want to write a lot of css properties but want to you know let's say support all sorts of browser quirks so auto prefixer is a plugin for post css which allows you to you know just write something once and then generate the webkit or moz or this and that styles automatically then there are something some plugins like css nano for example and you know all sorts of bunch of plugins which you can hook into this post css ecosystem which allows you to manipulate your final css generation so what this tooling does is that it allows you to write fresh clean modern css but also then back port it to all the previous browsers which might need some hacks or something to support that code out of the box so knowing about this tooling is super important and then last but not the least but the eighth point i can think of is knowing your way around deaf tools of css now dev tools is a game changer of course and you have to learn them as a front-end developer but knowing how to navigate your way around dev tools is also super important skill especially because css just like html does not complain if that is not working right for example if you use post css and a couple of plugins you can actually add a layer of validation in css but if it is isn't working if the css isn't working then you have to directly inspect the dom right you have to see what is happening on the website really in the dom tree so knowing about dom and nodes and css specificity and how css works and you know how you can manipulate the css using devtools how you can debug that essentially from your browser directly it's a game changer and it's a must requirement for anyone who wants to master css so yep these were my seven eight points on how you should master css what all things you need to learn bare minimum basics to master css and if you have a clear thorough understanding of all these topics you're gonna have a really good time working with css trust me a lot of people don't even know about completely know about box model in general or the layouts part in general so you can trust me when i say that if you have clarity on all these seven eight topics you are probably way ahead than 95 percent of the people right now in web development so that is all for this video i hope you learned something new you can check out a lot of these topics in the codenames full stack learning part front end section which covers a lot of css a lot of advanced css these css functions etc responsive website and so on so make sure you check that out but if you like this video make sure you leave a like and comment down below what you liked about this if there is anything which i missed out let me know in the comments below that is all for this one i'm gonna see you in the next video really soon if you're still watching this video make sure you comment down in the comment section i watched this video till the end also if you're not part of code dam's discord community you are missing out a lot on events which we organize on a weekly basis to code you already know the drill make sure you like the video subscribe to the channel if you haven't already and thank you so much for watching

Channel: Mehul - Codedamn

Views: 66,789

Keywords: codedamn, full stack development, full stack web development, BEST Way to Master HTML and CSS, css, learn front-end development, learn front-end web development, learn front end development from scratch, master css, master html, front-end, Fastest way to be a MASTER web dev, how to code, css course for beginners, css3, css tutorial, css for beginners, html css, css beginners, css course, cascading style sheets, css crash course, css tutorial for beginners, flexbox

Id: 6XGCCxiIUYc

Length: 11min 51sec (711 seconds)

Published: Fri Dec 03 2021