The reason why many people struggle with CSS
HTML-код
- Опубликовано: 26 июл 2024
- Conquering Responsive Layouts - Free course: courses.kevinpowell.co/conque...
CSS Demystified - premium course: cssdemystified.com
Join the Discord Community: kevinpowell.co/discord
When we first learn CSS, we cover a lot, from the basic syntax to the fundamentals like inheritance and the cascade, to all the properties and values. It’s a lot to take in, and often we focus on the syntax and properties/values since that’s what we really need at the start. We remember that there is the box model and a cascade, but we aren’t as worried about those as actually getting our simple layout to work! Because of that, we often end up with holes in our knowledge as we move forward, and that can lead to big messes in our CSS!
🔗 Links
✅ Heading levels: • The most common HTML m...
⌚ Timestamps
00:00 - Introduction
01:07 - Not understanding the fundamentals
05:25 - Not looking at the big picture
09:42 - Bandaide solutions and getting too clever
17:45 - Go back over the fundamentals
#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 RUclips 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!
Me too. Haven’t even watched the video yet, but it’s Kevin. I know it’s going to be good. Instantly clicking like out of habit
Q
Kevin is awesome 👌
Videos where you go over common mistakes you see with beginners is gold. This is showing the how and why and the traps that devs easily fall into. Keep up the great work dude!
Understanding how useful inheritance can be is so underrated!
An engineer came to my company recently & is responsible for implementing a utility first css framework to be used across dozens of our sites. He has 15+ years of experience doing front end and is definitely not stupid. But in his attempt to make this tailwind-ish utility first system, he reset LITERALLY EVERYTHING on EVERY element using the * selector. Meaning that every single div needs class names to define every part of it’s look. Then, for example if you had a parent and child div, and add a font size on the parent, the child won’t get that font size applied as well, which is so against how CSS is built to work. I pushed back on this decision early on, so we’re probably not going to go with such a heavy handed approach, but this was really disheartening to see that even fairly experienced devs completely disregard the inheritance/the cascade that makes css great. Not tailwind hate, I do enjoy tailwind sometimes.
You would have had to set various font-sizes for every element, coz everything was reset 😂
Even do like the following 😂
.parent {
font-size: 18px;
}
.child {
font-size: inherit;
}
Sounds like a lot of unnecessary work for no reason.
Did you mean UI library, like bootstrap? Because building a whole CSS framework from scratch is useless, no matter how you look at it. It is a lot faster and easier to take existing Tailwind(or Windi, or Uno) and extend it with custom rules for all your needs.
Especially dozens of sites? I understand if it were some specific utilites that do not already exist anywhere(even though 99% of stuff exist in tailwind already), but for it to be reusable on *dozens* of sites it needs to be pretty generic. Very generic. So I can't comprehend why.
So happy to know I'm not the only one frustrated with big project devs trying to Tailwind an enterprise app.
@@dripcaraybbx what's wrong with that? I am not really for or against that, just wanted to ask.
@@twothreeoneoneseventwoonefour5 Giant projects, especially with design teams, need to abstract things semantically and name it a class to reuse, instead of composing all of the styles every time. Tailwind is imperative, so programmers love it. It steps on designers' toes.
I don't struggle with CSS per se but where it becomes troublesome (for me anyway) is when I add micro interactions or micro animations these are elements that clients might not consider important but in terms of design and layout they can set my designs apart from my competitors. I'm getting there and keep a web kit for reference! :)
An in-depth look at viewport units would be super helpful! Pros, cons, best usage scenarios (if there are some). I've only dabbled with them here and there, mainly for heights and I've run into issues. Which could very well be me using them completely wrong 🤣.
I just realized I've been doing bandaid solutions for years. I have done some crack head type CSS lmao. I'm so happy I found this channel and will be binge watching to improve. Can't wait for the SCSS course
Reading a comment that said he begins with "Frontend Friends" has changed my life. I always thought it was Friend and Friends. And now every video I notice something I didn't notice forever. Please tell me it's not just me
It's almost everyone 😅
These are some powerful suggestions and tips, thank you! I would just say that it is not only about planning big picture from the beginning, but also MOST of the time taking a step back to reevaluate what we have since code is being constantly added in a process of development ( I don't mean those one page portfolio sites but mid to enterprise lvl applications)
I’m struggling with CSS but I clicked to support 😊
Thank you, Kevin! Mega valuable for me to get a better grasp at CSS for sure :D
Wow, you have put it in the best elegant way that one possibly could ! Fantastic examples and very inspiring arguments here ! Just a small note albeit no excuse really. I am now 48 and been coding web sites on and off on a semi-professional way (last one I built was in 2007 and I am now back on the roll once again). By watching your videos I have come to realize that CSS is another coding universe on its own and I know strongly question whoever comes to me and claims that "I know CSS too". I think its all coming down to what you are saying, if you 've kept doing 'stuff that just works' all this time what is done is done, we all need to allow for some extra study time to re-study properly and methodically and try to feeel the point of existence of every aspect of CSS. Great material, thank you so much for everything !
Hey Kevin, thank you for the reminder of all the years of growing pains I went through and still sometimes go through with styling websites lol Today, I find it much easier to create template styling classes to be used all throughout whatever site/app I'm working on. And lately, I have been working on creating template styling variables which is making things even easier. Wish I would have gotten into these habits years ago. Salute !
I like the idea of going back to the fundamentals, I have implemented this into my learning something also known as spaced repitition. I also agree that it makes a huge difference even if you feel that you are far beyond that level. From my own experience using inheritance to my advantage allows me to write much simpler CSS and much more maintainable and readable code.
Code review! When I had my first code review, I was already pretty senior but I was also a bit scared. After a while, I’ve come to really appreciate it and even invite it from my junior teammates. It’s a great way to overcome perceptual/inattentional blindness and just learn a bunch of new things.
thanks to YOU mainly I'm not struggling with css ...I just can't miss any of your videos!!! Much Love!!!
I like how you investigate and dig into those small but troublesome details.
I really like these sorts of videos; getting an idea where to minimise duplicating CSS or just condense everything into a simpler fashion whilst getting the same output.
I'd probably be super critical of what I write CSS-wise anyway, but it's good to get someone else's perspective on the code you write, like this.
This is the very first video of you that i watched right now, and you already got a like and a subscribe. Well done.
If i may give you a small feedback: I really missed your code suggestion for number 3. Its always nice to see the way someone deep into it would have done it.
Guess i check out your channel now and watch another video 😊
i learned alot from ur old video and take ur advices thnx for everything
I don't struggle with css and don't get anxiety attacks 😂. Just enjoy watching your videos.
I think a good topic for a video would be to how to think when breaking down a layout, from an image file, into workable (and repeatable) CSS.
Thank you. Extremally valuable as usual.
☺
I think some of this comes from having to support IE and most tutorials are when we had to do that.
Example: Remember using VW's when having to support for IE and early responsive.
Stackoverflow for example has a lot of old stuff for CSS, JS, and HTML also. Which is where I guess ChatGPT got most of it's knowledge.
Before watching this video, I revised the basics of css like selectors etc. Then, I practiced my skills some and I feel like I have more control on writing css now. as you said, going back and understanding fundamentals helped me a lot. I even diagnosed the problems in the css you showed us ! But I realized that I need to study responsive layout, thanks for the video CSS KING !
5:25 SASS mixins ♥
Your videos has really help my career in tech........ thanks 👍
Solid tips as always ❤️ We really should embrace defaults more. It's good for a11y. I hope UI designers make that move as well.
In the strategy gaming world we call what you did 'saving disaster savegames'. More of this please.
That could be a fun type of tutorial exercise, huh? Here's a disaster page, here's the original design...fix it!
@@bumbleguppy absolutely, those are my thoughts exactly
Came to complain about under-investment in initial design, as well as needing to satisfy naive or unsettled client/management expectations. But mainly the problem is the CSS language, or at least the dev tools. Maintaining a CSS code base is a nightmare: no widely adopted tree-shaking refactoring profiling or effect tracing tools.
Thanks, @Kevin. And I absolutely agree the frameworks are not really helping: sass, scss, css in JS, css modules, web components... They dive deeper into the noise rather than helping us rise above it. Semantic HTML is a revelation; maybe its time for a better descriptive language above/around/about visual/accessible presentation.
Wow kevin you have over 700k subs now Congrats 👏. I remember watching your stuff when you were at 130. Keep up the good work.
This man is a legend. Getting better at CSS is not a joke. He just explained things just like an artist. Writing quality CSS is an art and how do you get better at art? practice, practice, practice until it gets as your second nature. There is no shortcut
Great content like always
CSS is one of those skills where every FE dev I’ve met doesn’t think it needs to be taken seriously because it is so “easy”.
I’m glad I learned from you instead of going with the status quo. I’m pretty much the CSS guru at my job, even the staff engineer and the lead designer lean on my skills, and I’m basically a junior.
I didn't know that's how FE devs saw it. The more I see about CSS the more I'm lovin it and getting into it, especially seeing these videos.
more videos like this 😁really learned alot
Having recently adopted Astro and components, I see the best practices changing a bit. Although, If I were really hardcore, the holistic view can be applied to one's components. But it takes more work and up front thought to go too far in genericizing one's components.
I do appreciate the work you put into these videos and they sure help me and a lot of developers to improve their skills.
But I'd like to bring some awareness to devs' mental health. There are a lot of devs out there suffering from impostor syndrome and other stuff (myself included)... As soon as I saw the notification pop up I thought "shit, I already suck at this and that...." 🥴
I think the community could really use of some positiveness. Maybe titling your video as "Why you could do better at CSS".
Thanks mate!
Most problems I see with viewport units come from one of the first things you talk about here - forcing heights. I think there are proper ways to design for the viewport, but the issues go all the way back to when designers laid out websites as if they were 8.5x11" pieces of paper filled with the perfect amount of lorem ipsum. The maxim that made me better at CSS was: if you declare width and height at the same time, you better declare how much content can appear inside.
Another very informative video! I always learn something from you.
My biggest issue is that i often don't know if my code is right how can i make sure that im on the right path
Always the hardest part for sure. Just because something is working, does it mean it was the best way to do it??? Best is if you can find someone who's willing to give feedback, but that can be hard to find 😕
Thank you.
As to that final note about viewport units, in my experience they do have their place. Don't get me wrong: I wouldn't advocate for a widespread usage of them, but here and there, as long as I test it on all screen sizes, giving something a small viewport unit, particularly small margins on the sides of the screen or something, really can work like that "magic number," exactly what I was looking to do at the time.
i wish there was a javascript 21 days challenge out there
This is the best!!!
Another (possibly somewhat contraversal point) - is using BEM really a good idea? If you ask me, BEM classes (e.g. middle-section__left-part), while providing isolation, greatly reduce the usefulness of cascading. I think this comes from the world of imperative programming languages, where modularization is a very useful and reasonable thing to do. On the other hand, in the WYSIWYM world of the web, it is not.
I would much rather have simple class names, like "middle" and "left-part", and then use a selector like "section.middle .left-part p", if I want to target specifically this part. This allows me to do a common layout for e.g. ".container .left-part" whereever they appear.
As a full-stack dev that definitely glossed over CSS, I really appreciate these videos.
It's not that. It's because after over a decade of casual usage and 4 years of professional development I still find out things like vertical-align stretching my buttons (would you thing that align has to do anything with height? I didn't) or body background doing something weird, different than background on other elements. It's such esoteric aspects that make me want to ragequit
I’ve been working on a web app game project, it’s a card game:
I need the board to fill up the whole view port
I need the whole board visible and not scroll off the screen.
It seems this is an ideal use case for dvw and dvh. One other side who does something similar has defined everything using pixels and then transforms it at the end to fit the view port. What would you recommend for an “app” like this as opposed for content sites?
I clicked this video cos you're one of the best and so I'm always happy hear and see what you have to tell us
Speaking of cascading and inheritance. I remember there were frameworks/concepts some time ago explicitly designed NOT to use those two CSS aspects. Weird times ...
Videos on TailwindCSS would be highly appreciated
hi kevin, sorry for my english, tell me about the pinegrow application.
The other two categories of inherited properties apart from typography are: lists and table borders. list-style and list-style-* properties; border-collapse and border-spacing. Of course nested lists and nested tables are really rare, so we generally don't need to think about these.
A couple of other things that I reckon make me not very good at it (yet) is I keep forgetting stuff and tend to write very chaotic code. I'm working on the second part and hoping that the constant practice will help with the first.
Hey man
I write plain CSS without using any CSS frameworks. I'm wondering if I'm doing this right.
I get comfortable writing CSS pure.
No framework is the best framework 😅
@@KevinPowellThanks man.
I clicked on it because it’s Kevin. Pretty much the only reason
I'd love to see a video of your thoughts on tailwind
I get why people like it, but it's not for me 🙂
Trying to set specific 'heights' for elements, at various viewport widths will get you into a lot code maintenance hell. Best to leave the heights alone....
Also using vw units for gaps, margins, paddings is crazy. I didn't even know vw units prevents zooming in/out causing accessibility issues.
I used vw with clamp e.g. font-size: clamp(32px, 4vw, 48px);
Where the 4vw part is some magic number that needs to be tweaked 😂
Hi Kevin,
I haven't said this enough: I LOVE YOUR WORK. You are so crucial to our learning journey, and we appreciate you so much.
This will be my first criticism, and I hope you can take it constructively. The name of this video can stoke a lot of negative feelings to both new developers, but also those who are experienced with CSS. I know that may garner view counts, but I doubt that's your intent. Please consider the title can be very off-putting to some folks.
Thats why i am choosing tailwind css to write full responsive websites.
Does it have magical button "make responsive"?
@@amy_lio not a magic one.
Is there a way to split a list of 200 names coming from a database into multiple dynamic columns using css grid. I can't seem to find any help on this issue. If you can, I'd really appreciate any help.
CSS is a nightmare even as a senior dev.
There’s a reason why most companies don’t use “vanilla css” and use a framework or other tools instead.
i struggle right now after learning a little i am lost 😢 wish me luck starting over and trying to improve
There's nothing wrong with multiple H1's on a page. Google doesn't ding you for this, although it's important to be used in ways that makes semantic sense for a document. What I would _definitely_ say is a hard *"DON'T EVER DO THIS"* is, multiple H1's within a document section. So for example, you would probably have an H1 for a page's main content, then H1's inside tags, etc. I'm not a big fan of convoluted class names, so I'd personally advocate targeting with existing elements where possible instead of classes, such as "article h1 {...}" instead of "h1.middle_section_teaser {...} ", etc.
I wouldn’t rely to much on using same classes all over the place. Because it’s is way to common issue when you change some class properties for this particular item but when you are about to see result - instead of one thing it changes tones of things on website.
@ᴋᴇᴠɪɴ ᴘᴏᴡᴇʟʟAnd why would anyone fall for this scam?
Sir Have a nice day 😀🤗😊🤗😊
this is the ultimate question. the answer is probably I'm just suck at making things beautiful
Hoping there's a video on the issues with viewport units...Maybe in the style of Jerry Seinfeld , "What's the deal with viewport units?"
Is it better to finish my html first before proceeding with css ?
Hey Kevin, so you recommend not to using Tailwind right? Pure css is best right?
Wellp, yes by kevin
The most wholesome emotional damage that I have ever take. Thanks again for the great video
Improvinng css, and you find you are lacking with problem solving skills. My god, will this pain ever go away😢
Can you do something fluid responsive design. Last night I was thinking that basically any full-screen background image can be made fully responsive for any screen if sufficiently dynamic proportions and clamp functions are imposed on it. And given a normal ratio, that same css could be applied to any other image. It's a task you only need to figure out once and it applies to all websites.
If you want a background image that isn't pixelated on an ultrawide screen, that image will eat up the RAM on mobile phones (and their internet connection). You should use media queries to suit at least two different dimensions: mobile and desktop.
I took a look into the conquering responsive layouts 21 day challenge and i find it awesome.. But there is one problem can u please open all the challenges and lessons so we don't have to wait 21 days to finish it
Some comments in the video are obvious with hindsight. Those similar sections that could all have been done the same way could well have been coded months apart following additional customer input. Some might review the entire website following any new addition that uses the latest supported CSS options but I suspect that most do not. I am not sure that a customer would want to pay for it, either.
3:07 In this case it looks like this developer is abusing H1s but its not a problem having multiple H1s per page in HTML5 as long as they're used semantically. For example an archive page might have an H1 "Posts Archive" followed by a list of posts in tags, each containing the H1 for that post. I'd go as far as to say that *not* doing it that way is wrong!
I have learning in css one month but still I have struggling in margin,padding margin auto,then 4 values in padding and margin, then top left. What should I learn your vide o any tips please.animation also
@KevinPowell- thank you sir
Actually, I watch this video because I think that I already have a black belt in CSS and wonder if there's something I might have missed to attain the hidden gold belt in CSS ;-)
Nice Info
People don't seem to realise that your website is responsive by default. Problems occur because as well as not understanding the box model they over complicate their layouts and go crazy with flex and grid. Just take a step back and ask yourself what you're trying to achieve. My CSS motto is less is more.
How do you recommend that I practice CSS? I am a beginner and when I look at designs that I want to re-create, I either instantly know how to do it because maybe I've seen something similar in a video or have created something similar, or I just have no idea how to even begin approaching the design. But then I read other people's code for the design and everything makes sense and then it feels like I am just dumb.
Where do u find those designs?
Try answer [css] topics on Stack Overflow. That's what I use to iterate my knowledge, and learn from other solutions.
@@souloftradition5555 websites like frontend mentor and such, sometimes I even try to copy designs from my peers or my seniors at Uni.
Hello!
Can you please guide "active" navigation using only css? and do not use subpages!
One of the things I've never seen clearly explained, which makes css seem confusing, is the distinction between the cases, when the size of a child influences the size of a parent and when the size of a parent influences the size of a child.
One can always find this out for any specific case, by looking into a particular size unit, display value and other relevant properties such as flex-grow, of course. But isn't there any general set of rules, which explains how this all works as a unified system?
00:08 because i love you videos. And i am bad at all Web-Stuff. ;)
Do u have any course? Which we can opt for?
A couple linked at the top of the description, and of you scroll down a bit, there's a link to a page with all my courses 🙂
@@KevinPowell thank you
I think sometimes people forget of code reusability in CSS
As a beginner I recommend Frontend Mentor :)
The thing that annoys me about CSS is that there never seems to be one way to do things. Attempting to blend published solutions to problems (like say, setting up a nested hamburger menu) because no single solution you've found does everything needed just seems to lead to disaster.
And by the way, why are we still dealing with kludges to make something as common as a hamburger menu work? (Rhetorical question.)
Free course link not working please
I'm stuck on following your "Responsive navbar tutorial using HTML CSS & JS" because some CSS just isn't working and you post this video... I'm certainly watching it before I go back to banging my head against the wall because background: url() isn't working!
Probably something to do with the path to the image?
@@KevinPowell Intellisense in VS Code is finishing the paths so it should be valid. The file is there. I've tried full path ../../../assets/img/image.png, I've tried short path /assets/img/image.png, I've tried with quotes, without quotes... nothing is working. If I hover on the image name in DevTools, it shows me the image is there, I just can't seem to see it on the page.
I'm sure I'm doing something wrong, I'll just retrace my steps again.
Thanks for this video. Reminds me of the quote "Perfection is achieved when there is nothing left to take away." Simplify the solution. The trick is to know how to simplify and I'd say that comes with the experience of making a lot of mistakes.
Edit: All path options were fine. My image size was way too large. Shrinking it down worked.
Mate you don't need clickbait titles. You provide good info. Whoever wants to learn CSS will click this video and watch. Others who clicked cause of clickbait will leave in 10 sec which is bad for RUclips algorithm.
No, the reason I struggle with CSS is because there seem to be endless options and details and interactions and I don't have a good understanding of the norms and idioms. I can follow a tutorial. I can go and apply a specific solution. I can't look at a problem and have some idea of what usual approach fits it. And none of that accounts for having some idea what kind of layouts I should pick and why before I even start trying to build HTML/CSS/JavaScript. Maybe my problem is a lack of experience, but I don't know how to get that experience without a professional problem, and I don't want to sell my services to someone knowing I'm going to do a crappy job due to lack of experience.
My name is Gary, and I'm an over-coder...
Thats crazy because my name is omer moshe too😂
Is clickbait really a must to survive on this platform? Kevin, sir, you too? Why am I bad at CSS? Am I?
People struggle with CSS because it's terribly implemented lanaguage and there are almost no tools that address the issues you discuss. There's almost 0 truly worthwhile design-time tooling to help beginners (or anyone for that matter). Curently the ONLY way to become even mildly proficient at CSS is doing things over and over and over and over and over. Which for CSS is boring AF!
Thanks for the video YOU are awesome! More awesomer than CSS! :)
I feel attacked haha
I am not bad in css, I am bad in writing clean css.
"I'm sure you clicked on this video for a specific reason"
Yes, I am bad at CSS
Go simple. Go find the simplest solution out there.
Gonna be a long video.
Why you are bad at CSS. ????
ans: It is just because of you(Kelvin Powell). Every time I watched your videos and feel like dude! I know nothing about CSS. How this guy Every time came up with new property and more attracting method!!! ;).