The 6 most important CSS concepts for beginners

[@Maxelya]

Not exactly related, but it's been months since I wanted to write this : As a (now employed) self-taught developer I used to really struggle with CSS and I was pretty sure I would have to find a job as a back-end dev since I couldn't do anything without bootstrap. But then, I stumbled across a company looking for a "true" full-stack dev. That's when I decided that it was time to do something about my css weakness. I started watching tons of vids on the subject and quickly found your channel and got the job. Less than a year later, I'm now working as a full-stack developer and a teacher, I now wish I could get rid of bootstrap (which my company still uses) and I'm obsessed with writing clean code (grid blew my mind and forever changed the way I write HTML). I still have tons of things to learn, but the best thing your channel did to me was actually make me LIKE css. And when I like something, I can't get enough of it ^^.

[@RickBeacham]

Congrats! What STACK do you like the most?

[@diwakardayal954]

thanks for the inspiration, May I ask what u did to perfect your JS? what helped you most in JS

[@Maxelya]

@@RickBeacham Thanks ! That's the cool part : I no longer have any preference ^^ meaning I get to fully enjoy my job. CSS was the only thing I used to really hate though because it was not "programming" and I didn't fully understand how it worked, leading to a lot of frustration -_-

[@Maxelya]

​@@diwakardayal954 With JS and programming in general I was lucky enough to grasp the logic rather quickly by solving algorithms. Then you can learn DOM manipulation/Event Listeners which might be confusing at first but really, you don't need to know a lot of it to start doing cool little apps with it. Especially with DOM manipulation I like to organize my code in a really simple way in order for make it look easy. Watching others coding on youtube also helps a lot to learn how to write clean code. Be curious !

[@sprtlife6261]

amazing!

[@simboy]

as a self taught web dev everything ive learnt has been on-line and this is one of the best and clearest yet not dummed down videos out there which is a huge rarity ..if your like me and have spent hours watching videos where they are explaning stuff and they somehow manage to skip the bits that are subtle a not obvious and after ten vidoes your like - yeah, they may be good programmers but not very good teachers - and then compared to all that, this is great

[@JG-ky6pw]

You are the best. I went to a Bootcamp and I struggle a lot with CSS. Thanks to you I understand what is going on. Thank you so much Kevin!

[@iChrisBirch]

The tip about separating layout and design selectors is gold. I've fought this so much when trying to re-use patterns and trying to override so many properties. Huge thanks for this video.

[@alouisjeanmedia7723]

Everything in this video touched on exactly where I'm at in my coding journey. Felt like you were doing a class specifically for me. Thanks, Kev!

[@mcfliermeyer]

Same! His teaching style is sooooo good for me

[@zachjensz]

Already know all of this but watched anyway because it's Kevin!

[@sagaryerguntala909]

True fan 😃😂

[@danisob3633]

its kevin :D

[@acubley]

I knew it, but I didn't really know it. 😐

[@Miretazam]

Why is his comment from 2 days ago? The video has been uploaded from 12 hours ago

[@acubley]

@@Miretazam He's a time traveler and it's the only way to watch all of the YT he wants to?

[@jovani4921]

You freestyling that dark-background color number @ 20:10 is goals 👏👏

[@sanfords]

I was doing a grid layout and having some bizzare issues with content going outside of the grid - then I added your box-sizing hack and whalla - mystery gone! Wow what a GREAT TIP!

[@theatypicaldeveloper]

this vid pretty much covers every subject that you need to know when starting out with CSS, great stuff.

[@kadagalaganesh4230]

Not gonna say more, this video simply amazing for CSS learners.

[@mwengemwanambale8659]

Hi Kevin , thank you for your videos CSS has become more easier to deal with since i started watching your videos

[@WebDevYTLearningAccount]

I'm currently taking Colt Steele's web boot camp and I'm glad everything you reviewed I have an idea on due to his course, so this was a good watch for multiple reasons.

[@PiotrZakrzewski-f7e]

Props for the hint on separating layouts from the design selectors 👍 Valuable recording there.

[@hectorg362]

Content vs Layout. That's something I never really put much thought of until now. Thanks! WIll keep that in mind for now on.

[@hjetwd]

Kevin, as always, pumps our brains. 🤗

[@alibaba0428]

dude, where have you been my whole life? this video is amazing and has made my life a little bit easier.

[@kopilkaiser8991]

I'm pumped to learn from this tutorial of yours, which is always an absolutely gold mine for CSS knowledge ✌️⭐️⭐️⭐️⭐️⭐️

[@duvanxo3033]

every time I look for css videos your channel pops up! love your videos :)

[@zachj7078]

I knew all these very vaguely but this has really enlightened me, thank you! 😊

[@Wandering_Horse]

Wow, thank you. Your videos are so clearly articulated and I really enjoy the video layout and production. As someone new to html and css your videos are so far more helpful then anything else I have worked with so far. In this video you explanations of inheritance, cascading, and specificity where my biggest take aways. I have been working on a simple web form and was given example css styling to go with it and I found myself going back and forth where modifying one thing would not make a change and then I found myself trying to hack it by force before finally just commenting out all the css and reintroducing one element at a time. Had I known about inheritance, cascading and specificity all of that could have been avoided. The great thing is I now have my go to source for all my html and css knowledge. Thank You!

[@Adjust91]

Fantastic. Your content is extremely helpful as im focusing on css to land my junior job!

[@azuraflame1]

You really are a great dude for these videos Kevin and you are really great teacher.

[@Smalls-iT]

I feel motivated to break out the text editor again. Thanks for the vid 👍.

[@michaelgleason4791]

I felt that intro in my soul.

[@code-tox6203]

Kevin The Css guru. your every videos teach me something new ♥️

[@cold_]

the last tip is amazing

[@iambabyr0o]

This is an amazing video! Thank you, Kevin! Appreciate you sharing stories about your own mistakes - it really helps build confidence and not focus on own clumsiness.

[@CulturalToast]

Love your channel! You have helped me so much!

[@henrysmith6578]

Thank you for such an informative video! Your channel is amazing. I'm so happy someone recommended I check it out!

[@KevinPowell]

Thank you so much!

[@iliyansvechev8113]

the best channel ever thank you kevin

[@LazarusStr]

Thank you for creating this video. I've watched it three times because I loved your explanation and breakdown. I appreciate the effort you made to create this content. 🌺☺

[@kapteinkonyn3450]

Thanks for this! Your channel is really helping me with CSS topics that I used to struggle with.

[@sep1ol]

hey Kevin, i've started diving deeper into CSS past week and eventually i found your channel. just wanted to say thanks, such great content, it's been really VERY helpful. have a great day :)

[@Powerful-Manifestor-]

So well said when you say "most of the things we read about in the beginning but then forget" and then run into trouble later 🤣🤣 So true!

[@Kai-zein]

Thank you Sir for all tutorial and advice! WE LOVE YOU

[@jaymarley6172]

I am a frontend developer checked out your earlier course html and css from 2016 and you also covered very well back then some of these concepts good to see it being transferred here as-well ... has also really helped me at work ... thank you for all your good content and continued efforts really appreciated.

[@MikeKoss]

When you refer to "the Cascade" in this video, I get the impression you're just talking about the order of style declarations in a style sheet. But, in my reading of the spec, it uses that term to apply to ALL the factors that affect when a style is chosen over competing styles. Out of 5 different factors to consider, the position of the declaration is the least important (#5).

[@aravis_]

Thanks for your videos, I am actually starting to enjoy coding way too much (as I originally thought I would) because you explain things in a way I actually understand and don't make me feel dumb lol. Thanks so much, you have no idea how excited I am now on my journey. Thanks so much for all your videos!

[@drankenstein5241]

I'm learning html n css and feeling like I will never get it. This really made things click for me. Thank you sir

[@Xevailo]

Hey Kevin, I just wanted to leave a HUGE thank you for making this channel! I am currently in the process of learning CSS and your videos are an incredible help there! Your style of teaching the subjects is on point, pragmatic and paced just the right way that I feel as if I'm understanding things. And though I still have a long journey ahead of me, I am beginning to feel confident that I may some day build something that actually looks nice, too! If I may leave one bit of constructive criticism though: In your video about "6 simple typography tips to more professional looking sites" you mostly work in Figma to draft the layout, which is absolutely understandable as a way to quickly visualize the effect certain changes will have. One thing I (as a complete novice) would have wished though would be that you briefly would have said how a CSS-porperty to achieve that COULD look like. Sometimes you did that but other times not, and it would have been a good crutch for me as well as repetition for more advanced viewers. I hope you have a great start into 2021 and am looking forward to learn more from you :)

[@dennyw17]

Awesome video! Just what I needed. Thanks!

[@CharlesSmall]

Thank you for keep us up to date.

[@FerkkeG]

Great video! i have done allot of CSS in my professional career and i definitely can find myself in this video.

[@ziranshuzhang6831]

CSS is always, always, the part that takes me most of the time whenever there is web development.

[@Jordan-nv8dt]

This is the best video! Thank you for teaching me so much

[@abdihakimguliye8207]

The CSS KING IS back! Kevin thanks for the concepts. Please do also JS most important concepts.

[@bySterling]

Ahhhh man I would LUV if you had secondary alternate shorts versions of your amazing vids for those of us usually ‘short’ on time (just don’t have a half hour for each vid to spare)

[@Pareshbpatel]

A really good tutorial on the most important CSS concepts. Separating concerns regarding Layout and Styling is something I found very illuminating. Also, I was having a hard time choosing between FlexBox and Grid to start with. Grid it is. Thank you, Kevin {2022-01-08}

[@bobbysilver272]

The specificity in this video was very specific. Thank you :-)

[@qxb348]

this is really helpful! thank you!❤

[@durppp]

The CSS king. Keep on kingin’ king 👑

[@mandyb-vs4cc]

This is a great content. Thank you very much for this.

[@eccenux]

Great video. Even though I kind of know all this it is still good to organise your knowledge. One thing I would add is that in general inheritance work for font things and it doesn't work for layout things.

[@80Vikram]

Can you please make a video on how to style a page, after receiving design from designer. Let's take a complex FB profile page or newsfeed page. This will be really helpful. As a beginner I struggled a lot about CSS where to start styling and how to proceed. Learnt through trial and error, thanks in advance

[@reoxb]

Thanks so much, this was so helpful to me.

[@CxG8Clan]

Got a question: at 6:10, you say we need inheritance because setting a property on a specific element (like a paragraph as opposed to a class) would mean we would not get the properties further down (when setting them for the class), but at 16:00, you've shown the complete opposite. Any clarification would be appreciated!

[@alialrahem9817]

Thank you for your tips and recommendations really helpful

[@RickBeacham]

Thanks Kevin! Great concepts to never forget. Did you know your one of the most famous Canadian devs on youtube after Ryan Reynolds? This is what I'm dealing with at work... .main-container .main .col-main .thread-products ul.thread-grid li.item span { padding-left: 70px; } .page .main-container .main .col-main .thread-products #products-list.thread-grid li.item span .price-box { margin: 5px 5px 5px 0 !important; } This could have been named : .threads-price-box { margin: 5px 5px 5px 0 } 😅

[@RickBeacham]

I suppose they did not want to edit the theme files from Magento too much...

[@andresmillsgallego814]

Wow, amazing video . I can tell you put a ton of work into your videos which I respect and appreciate! Just found your channel, look forward to checking more of your videos out.

[@legostud]

I hadn’t seen the prettierrc file, but the guys here setup an eslint and style lint files. Stylelint is pretty cool, because we have it setup to to control the order of properties. We also have something that does accessibility checking in JSX files.

[@80Vikram]

As always thank a ton for your knowledge sharing, god bless you. Happy + prosperous new year 2022

[@manhloc7784]

Hello Kevin, when are you gonna to open course about SASS again, I really want to look in this!

[@Fullsunfl00wer]

Thank you for sharing!

[@ikechukwualita521]

Thanks Kevin. ... U're just superlative!

[@zoirradjabov1420]

I've got much useful stuff from this video, tnx✌

[@bryanthompson1070]

Kevin, great videos. What video recording software do you use?

[@Sampad-Sarker]

thanks for life saving lessons,I really mean it

[@DaPaBe1999]

Kevin I suggest doing a video about CSS methods|functions that are very useful, it is very important for responsivness

[@MrKay23]

Wow this video was super super helpful!

[@dannygarcia8353]

Thank you Kev!!

[@troy1516]

whats typically better for making navbars/footers? flexbox or grid?

[@michaelengelby732]

Interesting. Specificity is like Order of Operations for the math folks out there. Never made that connection before. I am going to try and write up the rules of specificity so that it follows an order of operations ruleset. Might be an exercise in folly, as there as so many exceptions, but in doing so I will learn more things about it.

[@chomo54andbabyaisha97]

Really, how hard can it be to say speficiticity

[@chomo54andbabyaisha97]

Specificity is an absolutely horrible word, much easier to say is precedense. There is a precedense rule in Javascript too, and Mozilla has a splendid article on it. A lot of it is built on the presedence in boolean logic and math which both have individual precedense rules. Most know that addition has lower precedense than multiplication in math (so multiplication will be executed before addition), but the same is true in boolean logic, where OR has a lower precedense than AND in the order of which it will be executed (so AND will be executed before OR). *javascript operator precedence mdn*

[@chomo54andbabyaisha97]

You can also use an *online CSS specificity calculator*

[@md.arafathrahmankhan6076]

Really an aswesome video for those who're gonna start their journey with CSS. Keep it going kevin, make more beginner friendly videos. Thanks.

[@deatho0ne587]

How to simplify old CSS? Should be one of your future topics. Some key bullets: Bootstrap that used !important on almost everything and/or it just being on classes it really should not be on. There are 20+ pages and you should really only touch the one you are updating/creating though. Living in the basic looks that the other pages used. Making them responsive for IE and modern browsers without anything that is already in the project. Etc ... Another one would be how to limit HTML classes. Example have seen class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-2 etc". Most of it could have been just dropped down to 3 of the classes in the above example. This is part of the reason I think most dislike frameworks, if the classes on a single HTML element are a paragraph long then I know I dislike HTML.

[@laurenwozny2901]

Great videos. Very clear to understand. One thing I have a question about though, at 27:44 in Content vs Layout you combine columns and dark-background into one class (that I get), What I'm confused about is why does that override the gap setting in your grid layout? Is it because the gaps ARE still there, but they have now inherited the dark background?

[@kapurubanda6131]

Yes, the gaps are still there, but you can't see it because of the dark background-color, which is now applied to the parent div element by the ".dark-background" class. It's not technically inheritance. You just see "through" the gaps. You can also notice the parent div getting a padding of 1em.

[@iftikhar3731]

Sir kevin you saved my life ❤😊

[@b1mind]

Words are hard 😂Kevin- "After 5 years of making videos, I can finally say specificity"

[@AzimXma]

Great explanation buddy❤️ Keep it up 👍

[@bobbysilver272]

27:45 can anyone explain why " .columns {gap: 1em;} " is no longer working on the grid in the video.

[@RobertMcGovernTarasis]

it is still working, you just can’t see it because the background of the container div is now black. Previously it was just the boxes in the div that had the dark background so the gap was white. It does raise a question for me though, based on what Kevin said about preferring inheritance … is it better to have the dark background applied to the container, or just to the boxes, or is it one of those “it depends”

[@eccenux]

And that also shows another problem that padding should not be in the dark-background class. Because it's a layout thing more then it is about content style.

[@rameenana]

Thanks man. This way useful.

[@JohnBortins]

Outstanding!

[@booksquotes948]

Which laptop u have ? Ram required ?

[@hassaneoutouaya]

Thank you so much !

[@bswck]

A fantastic video! Thanks 👍

[@layerseven8755]

What extension are you using to preview your CSS implemented to your web-page in real time?

[@Bookseeke]

Oh my God it worked 😅 thank you!!

[@jjjjj33333able]

Hi, can you tell me how I can open a webpage on the side as you have it on the video above so I can see my chances?

[@bmccollneb1]

Kevin, how is the header 'IMPORTANT CSS CONSEPTS' styled in your example? Thanks.

[@KevinPowell]

That's just the way the font looks :)

[@webapple1]

So iI'm a beginner currently studying web development , Im currently using positioning on my CSS and its actually not so easy , so ima look into grid/flex box because it sounds better than positioning everywhere

[@ibuprofenPill]

That's why putting your properties in alphabetical order is a good idea, it helps prevent duplicates.

[@KevinPowell]

Default linting in VS Code also highlights duplicates 🤷. Personally, I can't stand alphabetical. If I'm working on positioning, I want my position and top, bottom, left, and right all together, not spread out amongst other styles, and I want my text- and font- stuff together, and so on. Drives me bananas when I come across alphabetically organized properties 😅

[@thecatmanager]

Very helpful

[@oliver139]

Actually is there any CSS you think it is compulsory as a base for starting to code a website?

[@ahmadfaisal6356]

big thanks for this video

[@mohitdhatrak]

So you used position: absolute; to bring your video on top of the HTML doc, as it is covering the text is it definitely out of the flow of the document :))

[@rajeshnakrani526]

Hope you consider uploading to Rumble in addition to KZbin. Love your videos, but I rarely use KZbin anymore.

[@CanadianPenny]

Doesn't your HTML and CSS for Beginners series teach using floats for layouts? Should I not follow that advice?

[@LiHou]

Nice content! Really enjoyed

[@ludwigvillalba1886]

Thanks!!!!

[@durgfestivalvibes]

Great video, thanks!!

[@skynettava]

Thanks.