The 6 most important CSS concepts for beginners

Подписаться 913 тыс.

Просмотров 149 тыс.

50% 1

When we first get started with CSS, we hear a lot of new terms and jargon, a lot of which is glossed over pretty quickly. In this video, I look at the most important things to know when getting started, but I also look at why they matter, and how to work with them or take advantage of them to write better CSS.
🔗 Links
✅ More info on the box model and box-sizing: • box-sizing: border-box...
✅ More info on specificity: • CSS Specificity explained
✅ Getting started with flexbox: • Learn flexbox the easy...
✅ Getting started with grid: • Learn CSS Grid the eas...
⌚ Timestamps
00:00 - Introduction
01:37 - Inheritance
07:48 - The Cascade
12:09 - Dealing with the box model
15:04 - Specificity
18:46 - Naming stuff is hard
20:58 - Creating layouts
25:22 - Content vs Layout
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 177

@Maxelya 2 года назад

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 2 года назад

Congrats! What STACK do you like the most?

@diwakardayal954 2 года назад

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

@Maxelya 2 года назад

@@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 2 года назад

@@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 2 года назад

amazing!

@zachjensz 2 года назад

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

@sagaryerguntala909 2 года назад

True fan 😃😂

@danisob3633 2 года назад

its kevin :D

@acubley 2 года назад

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

@Miretazam 2 года назад

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

@acubley 2 года назад

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

@theatypicaldeveloper 2 года назад

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

@jovani4921 7 месяцев назад

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

@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.

@Wandering_Horse 2 года назад

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!

@sep1ol 2 года назад

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 :)

@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!

@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.

@iChrisBirch 3 месяца назад

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.

@kapteinkonyn3450 2 года назад

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

@kadagalaganesh4230 2 месяца назад

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

@CulturalToast 2 года назад

Love your channel! You have helped me so much!

@alouisjeanmedia7723 2 года назад

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 2 года назад

Same! His teaching style is sooooo good for me

@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

@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!

@Xevailo 2 года назад

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 :)

@duvanxo3033 2 года назад

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

@Adjust91 2 года назад

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

@CharlesSmall 2 года назад

Thank you for keep us up to date.

@dennyw17 Год назад

Awesome video! Just what I needed. Thanks!

@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!

@zachj7078 Год назад

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

@qxb348 2 года назад

this is really helpful! thank you!❤

@andresmillsgallego814 2 года назад

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.

@user-mb3fg2he3m 6 месяцев назад

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

@hectorg362 2 года назад

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

@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. 🌺☺

@mwengemwanambale8659 11 месяцев назад

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

@hjetwd 2 года назад

Kevin, as always, pumps our brains. 🤗

@abdihakimguliye8207 2 года назад

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

@AzimXma 2 года назад

Great explanation buddy❤️ Keep it up 👍

@bobbysilver272 2 года назад

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

@henrysmith6578 2 года назад

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

@KevinPowell 2 года назад

Thank you so much!

@alibaba0428 2 года назад

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

@MrKay23 2 года назад

Wow this video was super super helpful!

@Pareshbpatel 2 года назад

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}

@80Vikram 2 года назад

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

@md.arafathrahmankhan6076 2 года назад

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

@ferrystech6066 2 года назад

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

@michaelgleason4791 Год назад

I felt that intro in my soul.

@mandyb-vs4cc Год назад

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

@Jordan-nv8dt 2 года назад

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

@bswck 6 месяцев назад

A fantastic video! Thanks 👍

@iliyansvechev8113 2 года назад

the best channel ever thank you kevin

@durgfestivalvibes Год назад

Great video, thanks!!

@Fullsunfl00wer Год назад

Thank you for sharing!

@WebDevYTLearningAccount 5 месяцев назад

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.

@azuraflame1 11 месяцев назад

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

@Kai-zein 2 года назад

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

@reoxb Год назад

Thanks so much, this was so helpful to me.

@LiHou 10 месяцев назад

Nice content! Really enjoyed

@alialrahem9817 11 месяцев назад

Thank you for your tips and recommendations really helpful

@code-tox6203 2 года назад

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

@MikeKoss 2 года назад

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).

@Powerful-Manifestor- 2 года назад

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!

@eccenux 2 года назад

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.

@b1mind 2 года назад

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

@Sampad-Sarker 2 года назад

thanks for life saving lessons,I really mean it

@Smalls-iT 2 года назад

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

@dannygarcia8353 2 года назад

Thank you Kev!!

@bySterling 2 года назад

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)

@JohnBortins 2 года назад

Outstanding!

@zoirradjabov1420 2 года назад

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

@durppp 2 года назад

The CSS king. Keep on kingin’ king 👑

@ziranshuzhang6831 2 года назад

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

@RickBeacham 2 года назад

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 2 года назад

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

@ahmadfaisal6356 2 года назад

big thanks for this video

@hassaneoutouaya Год назад

Thank you so much !

@cold_ Год назад

the last tip is amazing

@ikechukwualita521 2 года назад

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

@thecatmanager 2 года назад

Very helpful

@Bookseeke 2 года назад

Oh my God it worked 😅 thank you!!

@DaPaBe1999 2 года назад

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

@80Vikram 2 года назад

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

@legostud 2 года назад

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.

@CxG8Clan 2 года назад

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!

@zaczac7030 2 года назад

Hi. How about putting a empty space (I mean, the space created when we tap the enter button twice) to separate the styling for content and layout? Most of the time we dont need to have sperate selector for each because we usually inherit what the parent is using

@bryanthompson1070 2 года назад

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

@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

@ludwigvillalba1886 2 года назад

Thanks!!!!

@viniciusm.m.7822 2 года назад

THANKS!!!

@jeromealtariba7339 2 года назад

very good thks a lot

@michaelengelby732 2 года назад

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 2 года назад

Really, how hard can it be to say speficiticity

@chomo54andbabyaisha97 2 года назад

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 2 года назад

You can also use an *online CSS specificity calculator*

@bobbysilver272 2 года назад

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

@RobertMcGovernTarasis 2 года назад

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 2 года назад

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.

@deatho0ne587 2 года назад

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.

@skynettava Год назад

Thanks.

@srinathsri6975 Год назад

Impressive

@manhloc7784 2 года назад

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

@iftikhar3731 Год назад

Sir kevin you saved my life ❤😊

@rita1234rita1234 2 года назад

if I could give two thumbs up to this video I would!!👍👍👏👏

@troy1516 Год назад

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

@mih1110 2 года назад

🔥🔥🔥

@layerseven8755 Год назад

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

@webapple1 2 года назад

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

@karuheine1152 2 года назад

Just curious, is utility classes much better than having a css function such as invert() for inverting color? For instance, dark-clr can be done to "all" places, but then if the background changes to something darker, I will just flip it over like this color: invert();

@eccenux 2 года назад

Invert will also flip images and this might not look good. Invert will probably work fine for icons, but will be bad for photos and more complex images (e.g. cartoon character).

@karuheine1152 2 года назад

@@eccenux thanks.

@ibuprofenPill 8 месяцев назад

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

@KevinPowell 8 месяцев назад

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 😅