10 CSS Pro Tips - Code this, NOT that!
Вставка
- Опубліковано 2 чер 2024
- Top 10 CSS Pro Tips to make your life as a web developer more productive. Some of the best programmers say CSS is too hard… but you might be surprised at how modern techniques can dramatically improve your code. fireship.io/tags/css/
00:00 CSS is too hard (myth)
00:56 1. Learn the box model
02:00 2. Firefox is Amazeballs
02:31 3. Flexbox is Fantastic
03:34 4. Grid is Great
04:23 5. Clamp it Down
05:09 Bonus: Impress your Boss
05:30 6. Aspect Ratio One-Liner
06:01 7. Variables for variables
06:46 8. Fancy Calculations
07:38 9. State Management Counter
08:18 10. Finding focus-within
09:01 Bonus: Treat an Incurable Disease
#css #learntocode #top10
Box Model developer.mozilla.org/en-US/d...
Focus-within CSS dropdown fireship.io/snippets/basic-cs...
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font - Наука та технологія
Find out if you won a free T-shirt, plus 3 more free tips 👉 ua-cam.com/video/JSURzPQnkl0/v-deo.html
How to debug code give some tips
Which type of code if you want to run html css in vscode install live server
Dont know if anyone cares but if you are bored like me during the covid times you can watch pretty much all the latest movies and series on instaflixxer. Have been streaming with my brother for the last few months =)
@Patrick Luka Yea, I've been using InstaFlixxer for since november myself :)
Why do people bother with SASS over SCSS? Isn't it better that whatever you write in SCSS can be reused in small CSS snippets as well if you want to in the future?
I can’t believe this is the first time I’m hearing about clamp()
You've been missing out, probably the best thing in this video.
Me too!
I use all of these... except clamp too :))))
Note : Not supported in IE11
@@hamza_omari eeeehh....
.titanic {
float: none:
}
*based on a true story*
Xd
margin-bottom: 0px;
@@AndiKod pok
display : flex;
flex-direction : column;
justify-content : flex-end;
You explained grid in 50 seconds more comprehensibly than other tuts do in an hour. Hats off.
You made me appreciate the fact that I learned the box model in the beginning.
I couldn't imagine designing a page without that freedom.
i consider myself pretty good at CSS but i didn't know about the focus-within pseudo class and clamp(). this is amazing, my mind is blown
Safari cries with clamp
Same here
I'd also like to be as good at CSS as you bro. I'd like to get helpful materials from you (materials that can help me get better at CSS), that's if you some and you if you don't mind..... what's your social media bro (Instagram or Twitter) so I can hit you up
ikr :')
Same.. also didn't know about these two specifically
I can't believe the amount of valuable information that you explain in less than 10 minutes, amazing job as always!!
I was thinking that too...
Awesome👍
Fr! :3
how does one use emojis ?
indeed this was a useful video
A minor mistake at 2:45 that might get some beginners confused is that the CSS shown on the screen does not put the element (the poop icon in this case) at the bottom right of the container (i.e. the first absolutely or relatively positioned parent element, so not necessary its direct parent). It puts the top-left corner of the element at the center of the container, so now the element's position within the container is slightly off and not exactly at the center. That's why we need the specify the `transform: translate(-50%, -50%);` property which moves the element upwards by 50% of its height, along the Y-axis and leftwards by 50% of its width, along the X-axis, thus properly puts it right at the center of the container.
U R a life saver
I remember when I was first trying to play with positions, and always wondered "why does this put it in so weird place, and not in the center, if I described that it should have moved it 50% from left and 50% from top? wouldn't this mean it's equal so then center?" lmao
I'm a noob XD
this did confuse me. I'm so glad I read comments :D
Thank you xx
I had zero idea few seconds ago. Thanks buddy you explained it very well
nice
“Is that a good idea? I don’t know”
That line really got me
From now on, I will use emoji class names on all my personal projects :D
Nightmare in debug street.
I use combinations of zero-width joiners and underscores for all of my class names.
We need keyboards with emojis
@@JeyPeyy You can get VS Code extensions which allow you to type ":muscle:" and get the flex emoji
@@precumming I'm sure my coworkers will love that such an extension is required to work with my code 🙃
A CSS Tip I learnt a long time ago was to always design mobile first.
If you look at your plain HTML in mobile mode, it usually is perfectly designed moulded for a mobile setting. As you grow bigger, it’s easier to adjust all the content using “min-width” media query.
The mobile first is helpful in most cases when designing.
Good tip- plus if you're doing a professional project usually you have some kind of analytics to see how many users access the site/use the app on mobile vs desktop, etc, so you can kind of decide what should be the 'main' look and what should be a screen-adjusted layout of that.
Also fwiw for anyone this might help, and based on a thing that I definitely didn't recently have to deal with- don't procrastinate your media queries to doing them all at once after you style your pages/components; if you can, try to do all or as much of you can of them for each component as you develop its styles. Sometimes you get lucky and can just set a container width to like 50/60/70vw and good ol margin 0 auto, but sometimes you can have something like a thing that I definitely didn't recently have to deal with where you're like 'wtf subheader why do you keep escaping through the container's border on xl screens??' Plus if resize media queries are a thing your app needs, they're a lot easier to manage one page/component/feature at a time.
ETA: I once did something I was really pleased with where I looped through list items to grab their ID then assign that value to the content property of a before pseudoelement as a way to number things and style the number, and now I feel like a tit after having seen that counter thing.
Phones tend to be slower too and the layout is simpler and more one dimensional. It's much easier to add things than trying to remove them.
Mobile first isn’t even a thing anymore, since mobile screens got so big.
Design in a way that the style automatically adapts to the viewport.
@@Linuxdirk aka rEsPoNsIvE 🥴
@@Optable Not even that. Just don’t have breakpoints.
Grid and flexbox were lifesaver for me. I used to do layouts with float and clear properties.
When I learnt grid and flexbox, one fine evening I created new git branch of the project, removed all 'float' and 'clear' from entire source code. As expected, layouts were broken. Then I implemented grid and flexbox. It was time consuming task but it was fun.
It was 2 years back and I haven't wrote 'float' in any css file ever since.
Idek what float is😂
This was absolutely amazing. I've been learning simple web development for a couple of months now, and I've had so many issues with CSS, of which this video solved them all. Thank you!
Greatt video as always! Here's my favourite CSS Pro Tip: There's this obscure CSS property called scroll-padding-top. When you have a sticky / fixed header, and you click an anchor link, it gets hidden under the sticky header. To avoid this annoying bug, just give your body element scroll-padding-top equal to the header height. Along with scroll-behaviour: smooth, this will make it so that when you click an anchor link, it'll scroll to it, such that it starts right beneath the header instead of hidden under it, which is the intended behaviour!
TIL! Very cool :)
I remember manually adjusting the padding of my anchor link destinations to fix this issue on one of my sites. This is an amazing solution that will serve me well. Thanks a lot!!
Oh my god, I never new this! thank you so much!
This saved my ass recently on a job. 10/10 One of the best newer properties!
Great tip! Do you know if this plays nice with JavaScript methods like window.scrollIntoView(), or is this only for auto-scrolling using IDs?
CSS pro tip: You should use css variable to create day/night theme, instead of writing different code for different theme.
@@tomasvn09 thank you kind stranger
@@skynet1024 LOL kind stranger
Thanks!
LOL =))))
i dont really have a problem with using the css, but more with making things look good. there is always something that makes me mad because it doesnt look like how i want it to look like
Same
Man, you by far have the best videos on UA-cam for programming, Simple and to the point but also just down right funny as hell. Cheers man
5:10
I now am not in charge of CSS anymore. This saved my life and I thank you sincerely
It totally blow my mind.
CSS was so confusing that I learned back-end tools instead. This video came out too late 😂
ayy backend gang all the way
I always find back-end devs saying CSS is hard so baffling when back-end seems like the real big brain stuff
Wow, your videos are outstanding (judging by the 2 I've seem). This one provides so many useful upgrades to my CSS, and just the right time for me to "hear it". "When the student is ready, the teacher will appear". Thanks. Btw, I rarely subscribe to channels, but your presentation is just the way I like it. Reminds me of my favorite cuber channel (jperm).
Your videos are steadily bringing back the passion I used to have for web development. Thank you.
Been a frontend developer for last three years, this video made my life 100 times easier which i didnt know i needed, appreciate it bro!!!!
Ahh the irony in "CSS is awesome" at 0:13 😂
Omega|lul
Nice catch 👌😂😂😂
Of course! That’s what’s naturally happens cuz overflow is visible by default 😂
just
overflow:hidden
😂
lol it was funny tbh
Another nifty thing to do - in my opinion at least - is to set te font-size of everything to 62.5% (by use of the HTML selector). This way you'll have a much easier time calculating sizes with the rem-suffix.
In a nutshell, setting font-size to 62.5% causes 1 rem to be equal to 10 px
Loved it 💯.
I am working with CSS for about 2 years but didn't know about clamp and focus-within. You saved my life ❤️
I think over all my favourite CSS protip is; although, maybe less of a CSS tip and more of an organizational tip in general; how important it is to keep your DOM clean. When I first started, I would put divs everywhere with tons of nesting. When in reality, you can usually get away with having one div to one box on your page. Very little wrappers are needed if you take a second to think about what each element in your HTML is doing
Can you guide me to a video tutorial on this?
Yeah I also need a video for this, sounds interesting 🤔
@Anja and @SK: Have a look at the LayoutLand channel made by Jen Simmons. A good example, where she thinks about HTML first and then about styling is: ua-cam.com/video/-hmOZU7Zk10/v-deo.html
DOM sounds like a character of 2f2f for me, pitiful.
Trueee
"The problem with this is that media queries will make you want to off yourself" that got me lmao
The first time I was introduced to media queries, I was like, "Wow, this is incredibly cumbersome. WTF? Who the hell would want to write 3 versions of the same layout?"
@@addanametocontinue I'm just beginning and I'm excited about media queries, your comment spoiled me
@@addanametocontinue your profile picture background colour is same as mine 😀😃
❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️..
I've always sourced to using Bootstrap or Tailwind for designing my websites. I've always been interested in back-end primarily so I never dabbled in front-end. But the goal is to be a full-stack developer soon, so I'll be switching over to raw CSS. Thanks for the tips!
I think the best unsaid tip is to focus and master the basics before going further and use frameworks, it's probably true for most stuff in software development.
raw is always better ;)
@@Mwtorres89 Tell Gordon Ramsey about it
You can still use Bootstrap while using CSS. I frequently use css in my bootstrap code so that it does exactly what I want it to do, as opposed to the default bootstrap behaviour.
Although raw is better most companies find it a time waster and will set you up woth tailwind or other frameworks. Buisness is about efficiency after all. I also say this because many a cocktail devs. Will claim css is easy and yet have come here to learn the 30 extra things they never heard about on css. What I'm saying Is css has ALOT and can become overwhelming. The basics aren't bad and mostly gone over in the video. Padding, margin, border and flex box along with grid are important.
One of the single most useful videos out there. Great explanation of the box model and editing directly on Firefox. The clamp() function blew my mind!
One of the largest struggles I had while learning CSS was precedence. Too many times have I come across "! important" on properties that shouldn't have needed them! Great video!
If you see !important everywhere... !run
The protip: you can build awesome responsive layout with (almost) one line of CSS. Use
{
display: grid
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
}
and see how elements in your grid shrink and grow depending on the parent grid size.
You can also add *grid-gap* to make it even better. It's great for something like i.e placing video thumbnails like UA-cam does.
Indeed, the autofit property is pretty cool. Try out flex-wrap: wrap. It does almost the same thing 😀
In case we have a display:flex , what do we could do instead?
@@rodrigolustosa9090 grid is ideal for multiple column/row layout while flex is ideal for single column/row. I suggest you change it to grid
❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️......
@@rodrigolustosa9090 flexWrap : 'wrap'
I love this video particularly the use of GRID and animate elements using order var in-line style. Clamp() is super-cool.
Thanks🙏
Great Video. For anyone who develops on Chrome: The features from Firefox @ 2:00 are also available on Chrome. Under Computed, any value under box model is editable if you double click. Chrome has grid lines on screen available under Layout, but I suppose Firefox has nicer graphics for that. Just wanted to note.
I feel like I'm pretty good with CSS, and then I watch this video and feel like you just opened up a new world for me. This is great, I love these kinds of videos!
2:42 Correction: position absolute 50% doesn't move the element to the far right and/or bottom. It moves the left and top corner of the element to the center of the parent. Then we apply translate to move it back by its own half, having the element perfectly centered in the parent.
Thanks! I am new to all this and was wondering how that part made any sense. Now it (kinda) does.
Pro Tips:
1. Stack box-shadows with varying parameters and opacity to get a more detailed and polished look.
2. Create a master file that you can use between projects to give you simple classes like "img-border-radius", "btn-border-radius". "primary-color", "primary-light", "error-color" - these keep stylesheet calls from CSS frameworks from bloating your site.
2A. Use SASS/SCSS and create variables to use inside the classes, so you only have to change 20 lines of code instead of 500, but you still get a custom look per site
I'm currently learning CSS/JS and omg.. This video taught me more than my last 10 hrs of studying. Thank you so much!!
This is amazing. I use all these techniques and they all took hours to days to learn and memorize, and here it is in one handy video. Good work!
The quality is top notch! Legit blew my mind on how effective it’s explained. Thanks and well done :)
incredibly useful! I learned CSS in the early ays but needed to catch up on all the new stuff. Thank you!
Thank you for your video. Clamp(), counter for header number and passing css variable in style to order was totally new to me.
I thought I was pretty good at CSS, and after watching this video it turns out that apparently I am. However, I still learn from every single video you post, including this one. Best channel on UA-cam for web dev!
Amazing content as always!
The top: 50%; left: 50%; actually brings the element to the middle of the parent and then the transform just subtracts half of the width and the height of the actual element.
I have been watching you for ages and youve been helping me become the developer I am today. Keep up the good content
This is one of the easiest CSS tutorial across tutorial. I've known the properties but I couldn't use em correctly. This made things way more understanding.
This has inspired me to write css like never before, few people can achieve this level of viewer retention and content quality. Kudos fireship, you've won our hearts
The counter will be huge for me! I have a lot of dynamic lists in a current project. Awesome tip.
I am about to start CSS , no prior knowledge in it.
But, your way of explaining is very awesome as I WAS ABLE TO UNDERSTAND CSS WITHOUT MUCH DIFFICULTIES
I am currently learning programming and I find your video as informative. Thank you this is great 👏👏👏
Web Dev:- CSS is fuck the mind 😵
Fireship:- Hold my beer 🍻
Thank you for the fire 🔥 content 💖
69 likes dude
@@jathur_ yeh bruh 🤗
Awesome content as always, I learn something new from your videos all the time! The most exciting property I learned about in css recently is object-fit for images and video, if you'd like to set a specific width and height to the element you can use object fit to prevent any type of distortion or stretching.
Awesome video, thanks for sharing these great tips, looking forward to watching the next CSS videos
Great tips, and love the way you incorporate humor - makes the videos entertaining and more digestible. Thank you!
I just binged your channel today, then you dropped this video, it is a lucky day :)
I've never been this excited to work on CSS. This is great
U just earned a sub bro. u saved 2 weeks of my frustration from going further. and now i feel like i can make any design thanks to you
I haven't see any video that is so short, so simple and so amazing, THANKYOU VERY MUCH
Nice video as always!
For the sake of learning how CSS works avoid framework or utility class is necessary but after you understand how it works using those tools is a lot of time saving for sure
Great content as always. The part where you explain centering with absolute, I believe top: 50% is 50% of the parent, same with the left. Therefore, the child is at the center of its parent. However, the child is centered by its top left corner so we need to transform the child -50% (which is now 50% of the child width/height) to correctly center it by its center.
You sent me down so many rabbit holes, this 10 min video has led to 2+ hours of notes. Thank you for your teaching magic
Hey sir! thank you for this video I am have been struggling a little with css this was such a drop of knowledge! the clamp is a game changer!
Clamp and fancy calculations blew my mind 🤯
Wait. . .
Soon we'll have:
1. container queries
2. layers
3. scopes
I knew all of this and still enjoyed it 💯
The most simple video on positioning I 've seen ! Many thanks! Subscribed=))
I agree with a fundamental understanding of CSS. That being said, tailwindcss, postcss, and autoprefixer have made my jump into Angular very smooth given my limited and dated experience with HTML/CSS.
I just clicked on your channel after watching the rpi server one, and you made this video minutes ago lolz
Welcome to the channel :)
The amount of time this could've saved me in the past and will save me in the future is immeasurable
I found this very useful and helpful, clearly by an expert sharing best practices. I am just a beginner to front-end coding and will be returning to this video in the future for sure.
You rock! This video has pulled me out of the bootstrap, tailwind, material-ui hole I've had my head buried deep in. Just wow.
Love these tips, thank you! Combining this with your following video (3 more life changing tips), I'm loving the possibilities of variables with HSL for dark theme support:
:root {
--H1: xx;
--S1: xx;
--L1: xx;
--text-color: hsl(var(--H1), var(--S1), var(--L1));
}
.light-theme {
--L1: 25;
}
.dark-theme {
--L1: 225;
}
I haven't tested this yet.
Thanks god, this video finally arrived. CSS is such a pain but I try to be better everyday !
I love this witty high quality content.
Thank you for sharing your knowledge.
Mind blown from the amount of useful information condensed into such a small footprint🤯
I remember the days of old CSS... Love the CSS3 and how easy it is.
l love ccs too but i lm new at dev
These tips are so good! I learned some very cool new stuff 😎
But I noticed a little mistake in the animation at 2:44. The 50% top and left will place the poops top-left edge in the center of the box. The poop is NOT placed in the bottom-right edge of the box.
I have never been happier to watch a video. This is so informative
Watched this video when I was beginner, I learned something new. Now, it just showed randomly and I just clicked and learned something new. Great video!
I just love how much knowledge this guy puts in 10min video.
This is one of the most helpful videos I've ever watched... Maybe CSS isn't too bad.
Great video! It opened my eyes for a lot of stuff i wasn't very sure about! Thanks
Very nice explained, you're a better teacher than most from schools!
Thank you, that's awesome! What about a video on how we can keep a good font size ratio based on screen width ?
Thank you for this. I've been writing CSS since 1999 and didn't know some of these things.
24 years?
@@NielsNL1 1999 is 24 years, yes you are correct
:focus and :focus-within is such a great tip, i can't believe i've written js to manage states for popups and dropdowns all those years.
I knew all the concepts and used everything till date, but happy to see all these information together ❤
Great video. I still prefer Sass though, merely for nested CSS and (in my opinion) easier variable definitions.
Hi, i am an instructor and would love to know the processes you follow to make your videos ? They are so concise and still very informative, and the way you go about explaining is so coooool. Thanks by the way.
This video has been a huge help. Thanks
This is *incredibly* helpful. Thank you.
Two defining moments of the 21st century-
1. The day I was born.
2. The day I learned the box-modal.
really man? I hate CSS if that helps I will jump on it right now. thanks.
2 year experience coding in one video 9 minute 👏
So much info summarized beautifully. Thank you very much.
As always very good content. I wrote a lot of CSS druing the last months and most of the mentioned points aren't new or not completely new to me. But The focus-within thing for example is something being completely off my radar so far. This will change :)
BUT:
I do miss one tip here, which hasn't directly to do with how to write your CSS, and this is Normalizing! Make sure that all html elements look the same (as far as browser support goes of coz) when no custom style is applied. This would also apply the border-box model which is not the default one.
And one additional thing: Collapsing margins! which is also quite unkown and even called a "bad" thing by the creators and maintainers of CSS itself.
Still loving your videos
I NEED THIS!
You are on fire 🔥 man❣️
Currently taking a intro coding class and we are just starting on css, definitely gonna come back to this video for help.
Best 10 mins I ever spent on UA-cam. Thanks!
You can edit box model properties in Chrome too in newer versions. For 02:11
Cool video, learned a lot of new stuff during these 10 minutes!
Though you have an error around 2:43. When centering divs the old way (by absolute positioning and translation), you don't move the item to the bottom right corner first, but instead you move it to the center actually. But it is going to be slightly off, because now the top left corner of the child element is in the center, not its actual center, so that is why you need the translate property.
One takeaway here is that the first two 50% values are referring to the parent container's size, but the translate property uses the child element's size for the 50% calculations.
But I guess you know this, just made a mistake in this video.
Dude I finally understand what the other comments mean now haha
This was really helpful...hope you create more