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 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 !
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
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.
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!
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.
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 :)
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!
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.
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.
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 :)
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)
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. 🌺☺
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!
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.
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}
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 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.
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).
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.
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
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.
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*
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!
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.
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.
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.
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
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 :))
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
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 😅
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
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!
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
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.
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!
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
You freestyling that dark-background color number @ 20:10 is goals 👏👏
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!
this vid pretty much covers every subject that you need to know when starting out with CSS, great stuff.
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?
dude, where have you been my whole life? this video is amazing and has made my life a little bit easier.
Content vs Layout. That's something I never really put much thought of until now. Thanks! WIll keep that in mind for now on.
Props for the hint on separating layouts from the design selectors 👍
Valuable recording there.
every time I look for css videos your channel pops up! love your videos :)
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.
Hi Kevin , thank you for your videos CSS has become more easier to deal with since i started watching your videos
I'm pumped to learn from this tutorial of yours, which is always an absolutely gold mine for CSS knowledge ✌️⭐️⭐️⭐️⭐️⭐️
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 :)
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!
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.
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.
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 :)
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!
Not gonna say more, this video simply amazing for CSS learners.
Love your channel! You have helped me so much!
Thanks!
Thank you!
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)
Fantastic. Your content is extremely helpful as im focusing on css to land my junior job!
Kevin, as always, pumps our brains. 🤗
The CSS KING IS back! Kevin thanks for the concepts. Please do also JS most important concepts.
Your videos are very informative and well structured. thank you!
I knew all these very vaguely but this has really enlightened me, thank you! 😊
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. 🌺☺
Everybody loves your work! Here comes a new subscriber!
Thanks for this! Your channel is really helping me with CSS topics that I used to struggle with.
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!
You really are a great dude for these videos Kevin and you are really great teacher.
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!
Awesome video! Just what I needed. Thanks!
Great video! i have done allot of CSS in my professional career and i definitely can find myself in this video.
this is really helpful! thank you!❤
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.
Kevin The Css guru.
your every videos teach me something new ♥️
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}
The specificity in this video was very specific. Thank you :-)
I feel motivated to break out the text editor again. Thanks for the vid 👍.
Thank you for keep us up to date.
Danke!
Thanks!
This is the best video!
Thank you for teaching me so much
Really an aswesome video for those who're gonna start their journey with CSS. Keep it going kevin, make more beginner friendly videos. Thanks.
Thank you Sir for all tutorial and advice! WE LOVE YOU
Great explanation buddy❤️
Keep it up 👍
Wow this video was super super helpful!
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...
the best channel ever thank you kevin
CSS is always, always, the part that takes me most of the time whenever there is web development.
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.
As always thank a ton for your knowledge sharing, god bless you. Happy + prosperous new year 2022
This is a great content. Thank you very much for this.
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).
I felt that intro in my soul.
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.
Words are hard 😂Kevin- "After 5 years of making videos, I can finally say specificity"
I'm learning html n css and feeling like I will never get it. This really made things click for me. Thank you sir
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
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*
The CSS king. Keep on kingin’ king 👑
Thanks so much, this was so helpful to me.
Thank you for your tips and recommendations really helpful
I've got much useful stuff from this video, tnx✌
the last tip is amazing
A fantastic video! Thanks 👍
Kevin I suggest doing a video about CSS methods|functions that are very useful, it is very important for responsivness
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!
thanks for life saving lessons,I really mean it
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.
Thanks man. This way useful.
Nice content! Really enjoyed
Thank you for sharing!
Hello Kevin, when are you gonna to open course about SASS again, I really want to look in this!
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.
Thank you Kev!!
Outstanding!
Great video, thanks!!
Sir kevin you saved my life ❤😊
Oh my God it worked 😅 thank you!!
Thanks Kevin. ... U're just superlative!
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.
Very helpful
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
big thanks for this video
Thank you so much !
Kevin, great videos. What video recording software do you use?
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?
Thanks!!!!
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 :))
whats typically better for making navbars/footers?
flexbox or grid?
if I could give two thumbs up to this video I would!!👍👍👏👏
Kevin, how is the header 'IMPORTANT CSS CONSEPTS' styled in your example? Thanks.
That's just the way the font looks :)
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
That's why putting your properties in alphabetical order is a good idea, it helps prevent duplicates.
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 😅