One thing that helped me to understand layouts more was doing the mobile view first, it cleared up a lot for me. I even go back to old sites I did years ago and reduce the CSS by almost 45%/60%!
for me it was trying out tailwind. because seeing the css inside the html both together on one page helped me understand how things work together. and now i am back to regular css and suddenly things work easily that felt unpredictable to me in the past.
@@robopecha - Super interesting insight. Can you elaborate on this a bit? For example, are you saying that after you began using the tailwind classes in your HTML that it helped you better understand how to approach CSS design?
@@InspiredScience yes. but i think it depends on the person and how you visualize things. with tailwind for me it was much easier to use flex and grid and several other things. it just seemed obvious with tailwind where to put everything, while before in css, when things did not work, i was not sure why. i guess i sometimes mixed things up, but didn't notice, while in tailwind everything worked out instantly the way i imagined it. and now that i have this visualization in me brain, i can also use it with regular css and it works as well.
"When you go backwards, you're not actually going backwards - you're filling in knowledge gaps that you have." Woah that is an incredibly powerful and so true!
Kevin, your videos are always good. This one was really encouraging : often one thiinks its MY fault I'm having difficulty - so refreshing to hear it;s just the way it is, and there certainly IS complexity. Thanks! Easy to get frustrated if one doesn't acknowledge that.
That's lots of great advice! And "embrace the unknown" is especially fundamental to writing great, resilient CSS. I always ask questions like this: Does this work well with both small and massively large screens? Can the user use it with keyboard only? What happens we need to put more text some box? Does this card component work without an image? What if instead of 3 items, there are only 1 or 2, or more than 3? And the list goes on.
We learn a little by teaching others. I can’t count how many aha moments I’ve had by going over concepts I took for granted. Thanks for sharing these tips.
I always tell people that teachers others is a cheat-code for learning 😅. It's amazing how you can make a connection that you never had before while in the middle of a sentence, lol.
I do find it useful to go back over things that it's easy to think I don't need to. You learn a lot by doing this and it does help iron out some possible bad practices or improves how you do something. As you learn more, it's almost like refactoring your knowledge to make sure everything together is understood well.
kevin you are really doing good job. i really requesting you to create videos on figma to html conversion. in which kindly explain how to analize design, how to choose css units for different sizes like width and font sizes. youtube does not have such content. i really need you should create series on it
I've done a few videos where I do that. This playlist has several. Some of them I'm just using a static image design instead of Figma, but there are a few in this playlist where I go from a Figma file ru-vid.com/group/PL4-IK0AVhVjPKyc9UTHzx9xUnZYTGGi2b. The most in-depth tutorial I've done like that might be this one on Scrimba. It's a free course, but you need an account to access it: scrimba.com/learn/spacetravel
Any chance you are going to do a new "Build a responsive website with HTML & CSS" series but with fluid typography, container queries and the cqi values?
Hello, is it worth learning html,CSS,js these days ? Very many people advise me against it because there is wordpress or webflow which is much faster, what do you think ?
WordPress has existed for 20 years now 🤷 Tools like it and webflow have their uses, and fill a gap on the market, but in my opinion, it doesn't replace learning html, CDs, and JS, and if you really want to get into WordPress you'll get into PHP too
Remove unnecessary height if necessary use min height use flexbox,use grid ,start to make layout first for smalll smal items like header than remove height
Could you perhaps do a video one time about how to setup CSS for larger projects? I think that the problem with people flocking to utility class bombardment frameworks (I hate it so much) is probably because CSS is difficult to master, and definitely hard to not end up with spaghetti-CSS in larger projects. So very often I hear the fans of that one framework shout: "It's literally CSS!" and, to me, that sounds like strong confidence from people who don't know that they are, in fact, incompetent. Dunning-Kruger Effect in full swing, basically. I've started to just embrace the fact that CSS isn't perfect. To me it's gorgeous, but to many it's ugly and confusing as heck. And they can't make it work for them. They don't understand specificity and they don't understand cascading styles. Not to mention any of the more complicated matters (paint/composite/layout) and so forth...
This is an excellent point. However, I think a large part of it is laziness or 80/20 as well. In either case, this would be an excellent topic for Kevin, would love to see that.
@@InspiredScience Definitely laziness, agreed. I think it's the mindset that "it's just styling, and it just styles just some HTML" from the novices who can only spam `div` tags. I've reviewed thousands of applicants, and the utility-class bombardment candidates almost always can't seem to wrap their heads around HTML and CSS. They like writing code. So that's where they will be: in their code. Usually JSX, of course, and now they can make that annoying HTML (always a `div`) do CSS at the same time. CSS and HTML aren't programming languages, they underestimate it wildly, are wholly incompetent at both, and make crappy products full of validation errors. Should they learn? Yes. Will they? Probably not. But if sources like Kevin can at least educate a few hundred or a few thousand of those people how to get it right for larger projects, it might spread...
Hey Kevin. Love your videos, and this was another great one! If you read my comment, can you point me to either one of your videos (or any other source) that will help me with using non-background images in html/css? I've been trying to use images with flexbox and they just won't behave the way I would want, which makes me think I don't understand how images work. Thanks!
Images that are flex items are hard to wrangle. I usually put the image inside a div. The div is the flex item, and the image lives in there. Make sure you have a max-width: 100% on the images as well
Ok, that makes me feel better knowing images as flex items can be tricky. I'll play around with using images inside divs and making sure to have max-width: 100%. I really appreciate the response, Kevin! @@KevinPowell
You can, though it's not often I swicht something from one to the other, there's nothing stopping you! I usually have grid for bigger things, and nested in there I often have flexbox stuff, though it can also be the other way around.
i think one problem is, that a lot of people teaching css in schools or coding bootcamps themselves just work with trial and error. everywhere i went to learn web dev the css part was throwing things together until they kind of worked. i found it frustrating and had many question, but most people didn't. they were fine with this approach, they hate logic. and they are all out there with their trial and error wisdom.
@@KevinPowell shrug. my html and css teacher specifically told us he'd deduct marks if we put a class on everything and styled things that way. Use selectors properly, he said!
@@KevinPowell wow! the day you posted the state of html, i made their logo with simple animation using css in half an hour after you posted, I wanted to show you, so my id in codepen is iSepehr, please take a look, i’ll be glad to hear your feedback. also there is a countdown one who need some help, take a look at that too please. thanks
Hi, i have question i will be very glad if you answer I learned html and css but i can’t make sth that is in my head or make some prototype that I like what should i do
Design and development are two different skills. Usually developers get designs handed to them, and we build those. Doing both means learning two different skill sets. I usually recommend either building based on existing designs you find, or at least looking at existing designs to get some inspiration
Hi! Could you please make a SCSS and WordPress website project video? I'd really appreciate it so much!!! I work as a Web Developer at a company that deals with multiple sites and a couple of weeks I had the task to replicate a custom page that was made using scss for a WordPress site and make minor changes. The developer that created the site was a genius but they told me he couldn't be reached. So it took me one full week but I finally figured out how to make that particular page that had SCSS in a WordPress in a Divi Child Theme site. However, this is only self taught because I spent hours of my free time for a week to figure it out. I've been looking for project videos (you know, one of those videos of 2 hours or so) in SCSS and WordPress and there are not many. Please!!!!
I might one of these days. I just haven't done that sort of thing in a *really* long time. Interesting to put custom styles on top of divi, rather than using something a bit more bare-bones, but 🤷
@@KevinPowell Thank you so much for your response! Yes, please!!! I work for a hospital as a Developer and I manage like 50 sites and have done custom code on WP and Drupal from scratch but it's the first time a couple of weeks ago that I came across a WP site that used Divi theme and SCSS for 2 custom pages. I feel I can do that on any site but if you ask me to do something different I wouldn't be able to do it. I need to learn more the structure how files and structure is organized when it's part of a WordPress site. I feel I need to learn more about that. If I learn how to do that with SCSS I feel like I would never have a need for a plugin.
Hey, I love your content but I find these videos where you just talk a bit boring. Im not a native english speaker so sorry if my statement sounded a bit rude, I just wanted to give my opinion
Kevin, I am - what you would call a HUGE FAN. I mean I am not huge personally. But you know what I mean lol 💙 I'm sorry but I have to disagree with the Pliers analogy. As someone who has done home remodels and worked in Constuction for 4 years and Carpentry for 5 years - Each plier has its own beautiful specific tasks, and it knows it lol 😉needle nose for example is going to help you get into small, confined places whereas a normal pair of pliers would not be able to get too due to the size difference. There are pliers just for removing Oil Filters, pliers that you can adjust by twisting a knob at the bottom of the handle and when press all the way LOCK onto whatever you want. Pliers for cutting wires, pliers for removing nails that are embedded deep into a piece of wood. And so many more that have a specific purpose. Lol, I am just messing with you
These lovely new CSS features are always going to be prisoners of the browser companies' will to implent them in both small and large screen devices. It would be informative to know how the CSS compilers are actually implemented, in broad terms at least, so we could see the limits imposed by the category definitions.
caniuse.com is a great place to see the current state of browser support for features. These days, features tend to gain support pretty fast, and when a browser implements it on desktop, they also tie it into the mobile version as well so there is parity there (the one different being iOS, where everything is a skin of Safari, so it follows browser support of that). As far as how the CSS compilers are implemented, that's a whole other level. There is information out there on that if you want it, with varying levels of depth. Chrome, and all the Chromium browsers use Blink, which is open source, so you can really deep dive it if you want: www.chromium.org/blink/ - and here is the specifics for the layout engine - chromium.googlesource.com/chromium/src/+/HEAD/third_party/blink/renderer/core/layout/ng/README.md
