The 6 most important CSS concepts for beginners
Vložit
- čas přidán 17. 06. 2024
- 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 CZcams 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!
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 ^^.
Congrats! What STACK do you like the most?
thanks for the inspiration, May I ask what u did to perfect your JS? what helped you most in JS
@@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 -_-
@@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 !
amazing!
Already know all of this but watched anyway because it's Kevin!
True fan 😃😂
its kevin :D
I knew it, but I didn't really know it. 😐
Why is his comment from 2 days ago? The video has been uploaded from 12 hours ago
@@Miretazam He's a time traveler and it's the only way to watch all of the YT he wants to?
this vid pretty much covers every subject that you need to know when starting out with CSS, great stuff.
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.
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 :)
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!
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.
You freestyling that dark-background color number @ 20:10 is goals 👏👏
Thanks for this! Your channel is really helping me with CSS topics that I used to struggle with.
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
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.
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!
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!
Same! His teaching style is sooooo good for me
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.
I knew all these very vaguely but this has really enlightened me, thank you! 😊
Love your channel! You have helped me so much!
every time I look for css videos your channel pops up! love your videos :)
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!
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!
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 :)
dude, where have you been my whole life? this video is amazing and has made my life a little bit easier.
Props for the hint on separating layouts from the design selectors 👍
Valuable recording there.
Fantastic. Your content is extremely helpful as im focusing on css to land my junior job!
this is really helpful! thank you!❤
Thank you for keep us up to date.
Awesome video! Just what I needed. Thanks!
Content vs Layout. That's something I never really put much thought of until now. Thanks! WIll keep that in mind for now on.
Hi Kevin , thank you for your videos CSS has become more easier to deal with since i started watching your videos
The specificity in this video was very specific. Thank you :-)
As always thank a ton for your knowledge sharing, god bless you. Happy + prosperous new year 2022
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. 🌺☺
The CSS KING IS back! Kevin thanks for the concepts. Please do also JS most important concepts.
Really an aswesome video for those who're gonna start their journey with CSS. Keep it going kevin, make more beginner friendly videos. Thanks.
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)
Not gonna say more, this video simply amazing for CSS learners.
Great explanation buddy❤️
Keep it up 👍
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.
Great video! i have done allot of CSS in my professional career and i definitely can find myself in this video.
Wow this video was super super helpful!
Thank you Sir for all tutorial and advice! WE LOVE YOU
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}
Thank you for such an informative video! Your channel is amazing. I'm so happy someone recommended I check it out!
Thank you so much!
This is the best video!
Thank you for teaching me so much
Kevin, as always, pumps our brains. 🤗
This is a great content. Thank you very much for this.
You really are a great dude for these videos Kevin and you are really great teacher.
thanks for life saving lessons,I really mean it
Thank you for your tips and recommendations really helpful
Thanks so much, this was so helpful to me.
A fantastic video! Thanks 👍
I feel motivated to break out the text editor again. Thanks for the vid 👍.
Thank you for sharing!
Great video, thanks!!
the best channel ever thank you kevin
Nice content! Really enjoyed
Words are hard 😂Kevin- "After 5 years of making videos, I can finally say specificity"
I felt that intro in my soul.
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!
Kevin The Css guru.
your every videos teach me something new ♥️
CSS is always, always, the part that takes me most of the time whenever there is web development.
I've got much useful stuff from this video, tnx✌
Thank you Kev!!
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.
The CSS king. Keep on kingin’ king 👑
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).
Outstanding!
Thank you so much !
Very helpful
big thanks for this video
Oh my God it worked 😅 thank you!!
Thanks Kevin. ... U're just superlative!
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.
Thanks!!!!
Kevin I suggest doing a video about CSS methods|functions that are very useful, it is very important for responsivness
the last tip is amazing
Kevin, great videos. What video recording software do you use?
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
}
😅
I suppose they did not want to edit the theme files from Magento too much...
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
THANKS!!!
I'm learning html n css and feeling like I will never get it. This really made things click for me. Thank you sir
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.
Really, how hard can it be to say speficiticity
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*
You can also use an *online CSS specificity calculator*
Thanks.
very good thks a lot
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!
Sir kevin you saved my life ❤😊
Impressive
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.
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
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?
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.
Hello Kevin, when are you gonna to open course about SASS again, I really want to look in this!
if I could give two thumbs up to this video I would!!👍👍👏👏
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
I want a video like this but for JS please!
Danke!
Thanks!
🔥🔥🔥
27:45 can anyone explain why " .columns {gap: 1em;} " is no longer working on the grid in the video.
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”
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.
whats typically better for making navbars/footers?
flexbox or grid?
What extension are you using to preview your CSS implemented to your web-page in real time?
nice
Hope you consider uploading to Rumble in addition to CZcams. Love your videos, but I rarely use CZcams anymore.