Find out if you won a free T-shirt, plus 3 more free tips 👉 kzbin.info/www/bejne/gIS4g62GhtOeopI
@Asia_Bangladesh3 жыл бұрын
How to debug code give some tips
@sumitmaiti14053 жыл бұрын
Which type of code if you want to run html css in vscode install live server
@patrickluka85133 жыл бұрын
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 =)
@wesleyalvin33083 жыл бұрын
@Patrick Luka Yea, I've been using InstaFlixxer for since november myself :)
@emonymph69113 жыл бұрын
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?
@ezeeok3 жыл бұрын
I can't believe the amount of valuable information that you explain in less than 10 minutes, amazing job as always!!
@paxnene3 жыл бұрын
I was thinking that too...
@bhumika60602 жыл бұрын
Awesome👍
@ReligionAndMaterialismDebunked2 жыл бұрын
Fr! :3
@marangponto9560 Жыл бұрын
how does one use emojis ?
@muhammadsaadmansoor7777 Жыл бұрын
indeed this was a useful video
@robertszordykowski4919 Жыл бұрын
You explained grid in 50 seconds more comprehensibly than other tuts do in an hour. Hats off.
@abcdefg-nu4xj3 жыл бұрын
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
@doublemarvellous55253 жыл бұрын
Safari cries with clamp
@falconarea3 жыл бұрын
Same here
@jude_I3 жыл бұрын
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
@acme_gamers3 жыл бұрын
ikr :')
@badplayer43483 жыл бұрын
Same.. also didn't know about these two specifically
@FlockofSmeagles3 жыл бұрын
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.
@BestNoobHello2 жыл бұрын
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.
@randythoams2 жыл бұрын
U R a life saver
@shinycascade88622 жыл бұрын
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
@Mel-mu8ox2 жыл бұрын
I'm a noob XD this did confuse me. I'm so glad I read comments :D Thank you xx
@nayankumarbarwa43172 жыл бұрын
I had zero idea few seconds ago. Thanks buddy you explained it very well
@dgh252 жыл бұрын
nice
@shreym033 жыл бұрын
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.
@elgatonegro17032 жыл бұрын
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.
@antifa_communist Жыл бұрын
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.
@Linuxdirk Жыл бұрын
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.
@Optable Жыл бұрын
@@Linuxdirk aka rEsPoNsIvE 🥴
@Linuxdirk Жыл бұрын
@@Optable Not even that. Just don’t have breakpoints.
@chamomilemasone51003 жыл бұрын
I can’t believe this is the first time I’m hearing about clamp()
@Fireship3 жыл бұрын
You've been missing out, probably the best thing in this video.
@Sejiko3 жыл бұрын
Me too!
@i.am.rossalex3 жыл бұрын
I use all of these... except clamp too :))))
@hamza_omari3 жыл бұрын
Note : Not supported in IE11
@martinn.60823 жыл бұрын
@@hamza_omari eeeehh....
@nsharma49813 жыл бұрын
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!
@Fireship3 жыл бұрын
TIL! Very cool :)
@meronogbai3 жыл бұрын
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!!
@jacoblockwood40343 жыл бұрын
Oh my god, I never new this! thank you so much!
@mattshnoop3 жыл бұрын
This saved my ass recently on a job. 10/10 One of the best newer properties!
@jacobstamm3 жыл бұрын
Great tip! Do you know if this plays nice with JavaScript methods like window.scrollIntoView(), or is this only for auto-scrolling using IDs?
@abhaynath58333 жыл бұрын
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.
@ove4k1llgaming14 Жыл бұрын
Idek what float is😂
@ogbuleo20483 ай бұрын
Lol,I still use float 😆 🤣
@jomy10-games3 жыл бұрын
“Is that a good idea? I don’t know” That line really got me
@fahada.9793 жыл бұрын
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!!!!
From now on, I will use emoji class names on all my personal projects :D
@calimio63 жыл бұрын
Nightmare in debug street.
@skylark.kraken3 жыл бұрын
I use combinations of zero-width joiners and underscores for all of my class names.
@JeyPeyy3 жыл бұрын
We need keyboards with emojis
@skylark.kraken3 жыл бұрын
@@JeyPeyy You can get VS Code extensions which allow you to type ":muscle:" and get the flex emoji
@JeyPeyy3 жыл бұрын
@@skylark.kraken I'm sure my coworkers will love that such an extension is required to work with my code 🙃
@blakel953 жыл бұрын
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.
@matteofalduto7662 жыл бұрын
My approach with any programming language: study thoroughly the language to have a solid general understanding of how it works before writing the first line of code. My approach with css: throw in random keywords until the page seems to somehow look right and pray it won’t break later on
@MI-rn7tf29 күн бұрын
Thas what I did, if you did a bit of WordPress and figma you got the logic needed
@MichaelRichins3 жыл бұрын
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!
@Fireship3 жыл бұрын
If you see !important everywhere... !run
@CassiusZedaker-pr7kc2 ай бұрын
This is one of the problems with w3schools' w3.css. I'm weaning myself off of it.
@skyracer-mk8hg3 жыл бұрын
5:10 I now am not in charge of CSS anymore. This saved my life and I thank you sincerely
@jonathan-arias3 жыл бұрын
It totally blow my mind.
@mattshnoop3 жыл бұрын
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
@SK-0093 жыл бұрын
Can you guide me to a video tutorial on this?
@An-li6er2 жыл бұрын
Yeah I also need a video for this, sounds interesting 🤔
@konstantinpaul83012 жыл бұрын
@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: kzbin.info/www/bejne/Y5nQgI2LbL-eZ5I
@k_viir74662 жыл бұрын
DOM sounds like a character of 2f2f for me, pitiful.
@hanchi3398 Жыл бұрын
Trueee
@DerRobert283 ай бұрын
Wow, I just discovered your video, and thank you for uploading this! It opened so many eyes to me. I recently struggled so hard with CSS in a profesisonal context, but now, with your knowledge in mind, I know how to use this new "super-power". Thanks a lot, man.
@Ikaros09982 жыл бұрын
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
@rafadydkiemmacha75433 жыл бұрын
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.
@Sedeerah2 жыл бұрын
Thanks! I am new to all this and was wondering how that part made any sense. Now it (kinda) does.
@iA4R0N3 жыл бұрын
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!
@raghav.bhardwaj3 жыл бұрын
CSS pro tip: You should use css variable to create day/night theme, instead of writing different code for different theme.
@skynet10243 жыл бұрын
@@tomasvn09 thank you kind stranger
@classicguy78132 жыл бұрын
@@skynet1024 LOL kind stranger
@nicetomeetugaming70242 жыл бұрын
Thanks!
@edwardelrics21382 жыл бұрын
LOL =))))
@razzuqrazzuq60253 ай бұрын
Hey man I am a new learner and would love to get connected to you for any help in learning css
@itsYovez3 жыл бұрын
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!
@MarcinKralka2 жыл бұрын
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.
@Mwtorres892 жыл бұрын
raw is always better ;)
@phunguyen8582 жыл бұрын
@@Mwtorres89 Tell Gordon Ramsey about it
@elle.3792 Жыл бұрын
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.
@goku546686 Жыл бұрын
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.
@piotrbilski896611 ай бұрын
8:00 you can just use HTML and property
@fiddle47593 жыл бұрын
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 KZbin for web dev!
@DanielCardoso53 жыл бұрын
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.
@NikhilYadav-ji8rm3 жыл бұрын
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
@umaibobuta35914 ай бұрын
I've been working with html & css for the past 4 days because I'm trying to build a website on neocities. I had 2 months of html in highschool and that was half a decade ago. I'm rawdogging this shit and videos like these are godsent lol
@greateagle879911 ай бұрын
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
@chawker673 жыл бұрын
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 KZbin does.
@codelightsparkles24033 жыл бұрын
Indeed, the autofit property is pretty cool. Try out flex-wrap: wrap. It does almost the same thing 😀
@rodrigolustosa90903 жыл бұрын
In case we have a display:flex , what do we could do instead?
@ogbillity3 жыл бұрын
@@rodrigolustosa9090 grid is ideal for multiple column/row layout while flex is ideal for single column/row. I suggest you change it to grid
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!
@hexafireworks3 жыл бұрын
The quality is top notch! Legit blew my mind on how effective it’s explained. Thanks and well done :)
@shxdo3712 Жыл бұрын
You're the greatest content maker about code / tech... By FAR !!!! Far far far.
@paragjyotideka12463 жыл бұрын
This is by far the best KZbin channel for programming. Period!
@siddharth-gandhi3 жыл бұрын
Ahh the irony in "CSS is awesome" at 0:13 😂
@ludologian3 жыл бұрын
Omega|lul
@shashikanthp31453 жыл бұрын
Nice catch 👌😂😂😂
@nickolasjoe3 жыл бұрын
Of course! That’s what’s naturally happens cuz overflow is visible by default 😂
@j-vahalla-b50513 жыл бұрын
just overflow:hidden 😂
@gladiator72493 жыл бұрын
lol it was funny tbh
@sleepteam3 жыл бұрын
The counter will be huge for me! I have a lot of dynamic lists in a current project. Awesome tip.
@_cmcg3 жыл бұрын
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
@omercak27463 жыл бұрын
Best 10 mins I ever spent on KZbin. Thanks!
@Darren-vh5lk2 жыл бұрын
I've done over 12 hrs of an Udemy Web Dev course regarding HTML and CSS.... This video smashed my mind wipe open.... I learnt more in less than 10 mins than I did on Udemy in 6+ hours on Udemy. Top Marks.
@Shubham-xh9nz3 жыл бұрын
I just love how much knowledge this guy puts in 10min video.
@gabrielchristiannegre27153 жыл бұрын
"The problem with this is that media queries will make you want to off yourself" that got me lmao
@addanametocontinue3 жыл бұрын
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?"
@Diegps3 жыл бұрын
@@addanametocontinue I'm just beginning and I'm excited about media queries, your comment spoiled me
@tarangpatil69523 жыл бұрын
@@addanametocontinue your profile picture background colour is same as mine 😀😃
@GamingTSH3 жыл бұрын
❤️👉 kzbin.info/www/bejne/op6sqIyCe76Nb7c 👈❤️..
@detskysade25813 жыл бұрын
CSS was so confusing that I learned back-end tools instead. This video came out too late 😂
@aavocadoToast3 жыл бұрын
ayy backend gang all the way
@estoyboy3 жыл бұрын
I always find back-end devs saying CSS is hard so baffling when back-end seems like the real big brain stuff
@ABHAY-hu9kw2 жыл бұрын
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
@TheMostVanillaGorilla2 жыл бұрын
I'm currently learning CSS/JS and omg.. This video taught me more than my last 10 hrs of studying. Thank you so much!!
@pankajaw3 жыл бұрын
I've never been this excited to work on CSS. This is great
@tanmay______3 жыл бұрын
I just binged your channel today, then you dropped this video, it is a lucky day :)
@anzeblagus95133 жыл бұрын
The amount of time this could've saved me in the past and will save me in the future is immeasurable
@TokyoXtreme3 жыл бұрын
This channel has 840K subscribers at the moment, and I still think it’s underrated. Absolutely the best presentation of any tech channel BY FAR. Love it.
@johnglennan21533 жыл бұрын
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.
@valence7073 жыл бұрын
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!
@_RafaelKr3 жыл бұрын
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.
@tommysmith54793 жыл бұрын
I've just watched a couple of your "code this, not that" videos (JS and CSS) and they are fantastic. The only problem now is that I feel utterly useless... I thought of myself as a pretty good front-end dev... but now I'm seriously trying to justify my salary - and I'm being serious. I'm going to dissect these videos as a starting point to bettering my dev abilities.... and there's a lot to learn. (a little bit of context: I've been a dev for over 20 years... and I'll be the first to admit that I haven't really kept up on the new facets of JS and CSS in the last few years. These videos have truly jolted me - I feel ashamed of myself)
@sxlg_322 жыл бұрын
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.
@fairytailnaruto76933 жыл бұрын
Thanks god, this video finally arrived. CSS is such a pain but I try to be better everyday !
@CristianKirk Жыл бұрын
CSS is super simple. The problem with programmers is that they are not designers. Most programmers are anti-anything that has to deal with art or creativity. That's also why they depend heavily on frameworks with pre-made components.
@voldiriddle42035 ай бұрын
That is fact
@MI-rn7tf29 күн бұрын
And the probleme with designer is "WHY THE FUCK CANT SVG WORK PROPERLY OMMMMGGGG DONT TELL ME ILL HAVE TO ADD EVERY VECTOR ELEMENT AS PNG" so we sont code ehehejajaja
@MauriceCalis2 жыл бұрын
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).
@muhammadrashid7724 Жыл бұрын
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!
@geordanhouse82472 жыл бұрын
Man, you by far have the best videos on KZbin for programming, Simple and to the point but also just down right funny as hell. Cheers man
@thomasmelak3 жыл бұрын
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.
@dev.hardik3 жыл бұрын
Web Dev:- CSS is fuck the mind 😵 Fireship:- Hold my beer 🍻 Thank you for the fire 🔥 content 💖
The title counter blew me!!! Perfect video. Learned 1 thing after a while!!!
@oshapermadi5 ай бұрын
I learned pure/raw CSS before discovering CSS frameworks like Tailwind or Bootstrap. While working on a personal project, I realized the CSS was repetitive and thought, "I can make just one class and use it in any other element." That's when I learned about concepts like DRY, OOCSS, BEM, and Atomic CSS. Discovering these principles was a crazy exciting- I realized how handy they are. Then, I found CSS frameworks and thought, "This is what I've been doing but easier and faster." The beauty of learning is that it leads to these kinds of insights.
@priestap2 жыл бұрын
Thank you for this. I've been writing CSS since 1999 and didn't know some of these things.
@NielsNL1 Жыл бұрын
24 years?
@reecebygrave7211 Жыл бұрын
@@NielsNL1 1999 is 24 years, yes you are correct
@monkaSisLife2 жыл бұрын
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
@adryeeel Жыл бұрын
Same
@MohilNZ3 жыл бұрын
You can edit box model properties in Chrome too in newer versions. For 02:11
@diegovillafane6313 Жыл бұрын
Man, CSS IS AWESOME. I just use it, every time, and I like it a lot, didn't knew people felt that way, once a dude congrats me for doing some basic styling and I was like... really? I would like to help everyone to use it, like you are doing, great video!
@Magnum692 жыл бұрын
At first, grid is very confusing. But once you understand it, it's a blessing to have. Super easy grids with barely any code that just. WORKS.
@nkbn25803 жыл бұрын
literally every chapter my reaction was "whatt?! no way", honestly i didnt even know these existed until now. thank you for making my love towards programming ever grater :)
@theramenboy3 жыл бұрын
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
@thebtm3 жыл бұрын
I remember the days of old CSS... Love the CSS3 and how easy it is.
@blkemerone40992 жыл бұрын
l love ccs too but i lm new at dev
@mathis9223 жыл бұрын
That video is pure Gold. I making Websites since 15 years and i this change my mind. Thank you!
@siri87822 ай бұрын
This is what we need!! 3 years ago, still so precious 💖
@rickpereira88213 жыл бұрын
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.
@ecs16113 жыл бұрын
This is one of the most helpful videos I've ever watched... Maybe CSS isn't too bad.
@csbshaw1 Жыл бұрын
After smashing my head against the wall working on the CSS my first project, this video was the perfect one to watch. I thought I was an idiot because I couldn't figure out how to center an image in it's div for nearly 2 hours. Turns out I am still an idiot, but at least I know I am not the only person that struggled with this. The @media query was absolutely soul crushing. Your video was awesome, easy sub.
@RahulJain-ck5bt3 жыл бұрын
Loved it 💯. I am working with CSS for about 2 years but didn't know about clamp and focus-within. You saved my life ❤️
@ashishsharma91263 жыл бұрын
I love this video particularly the use of GRID and animate elements using order var in-line style. Clamp() is super-cool. Thanks🙏
@phongnguyentuan82193 жыл бұрын
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.
@unizfrhn28033 жыл бұрын
In the modern times, where we have Kevin Powell, web dev simplified and fireship, CSS can be learnt much faster and not to mention, save you time and energy from a lot of complex or annoying situations. I advise everyone to learn it.
@McWolke923 жыл бұрын
: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.
@TallSchmuck3 жыл бұрын
I have been watching you for ages and youve been helping me become the developer I am today. Keep up the good content
@rancho8903 жыл бұрын
I knew all of this and still enjoyed it 💯
@semmu933 жыл бұрын
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.
@narutosubteam3 жыл бұрын
2 year experience coding in one video 9 minute 👏
@darrenforster993 жыл бұрын
One of the best things I found to do with CSS is to use an idea found in Bootstrap - create small styles as building blocks and apply those small styles to the different elements - like for example I created a few styles called fs-x_x going from fs-0_5 incrimenting by 0_1 up to 3_0 - in each of those styles I had one line of CSS font-size : and then the number followed by em so fs-0_5 would be font-size:0.5em; fs-3_0 would be font-size 3.0em - that way if I wanted to make the font size bigger or smaller I could just add the class fs-x_x to the element. I based this idea on some of the things that bootstrap does like the my- or px- classes which change the padding/margin by a set amount. I also did the same with colour c- and bg- That way if I wanted a bit of text "brand red" with "brand yellow" background, a bit smaller than the other text with no X padding and a large Y margin I could always do
@adminfebhost3 жыл бұрын
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
@SimplyFizz3 жыл бұрын
I just clicked on your channel after watching the rpi server one, and you made this video minutes ago lolz
@Fireship3 жыл бұрын
Welcome to the channel :)
@mohammadbilal57453 жыл бұрын
My Favourite CSS Pro tip:If you want to use responsive font size instead of using different font sizes using media queries for different screen. You can use as below: font-size: calc(1em+1vw);
@bastje Жыл бұрын
Difficult? Man I can dream CSS.
@code-for-me2 жыл бұрын
a small correction on 1:35 "every HTML element is a box that has content width and hight." except for display inline, it will ignore height, width and vertical padding/ margin.
@ОлексійКудряшов3 жыл бұрын
The most simple video on positioning I 've seen ! Many thanks! Subscribed=))
@AlexBogues3 жыл бұрын
CSS tip: When troubleshooting change your css in the inspector first to see immediate results not having to refresh then put those changes in your code. Bonus tip: Don't support IE11, just don't, let it die.
@usama2519933 жыл бұрын
It could never die. We use it to download Chrome 😛
@AlexBogues3 жыл бұрын
@@usama251993 that's what Edge is for now, IE11 only hobbles along because companies are still forcing devs to account for it.
@Ctrl_Alt_Elite3 жыл бұрын
+1 for Bonus tip 😆
@dimboump3 жыл бұрын
CSS pro tip: use hsl rather than hex colour codes. They make more sense once you get your heard around them!
@Fireship3 жыл бұрын
Good call! You win kzbin.info/www/bejne/gIS4g62GhtOeopI
@panteliselef2393 жыл бұрын
thanks, fellow greek coder
@aaronrothwell76153 жыл бұрын
I think there is talks in the works to have this replaced soon though, for everyone that keeps learning different colour models. LCH is similar to HSL but its big advantage is the lightness of colours is perceived equally between different hues.
@seanmccambridge3 жыл бұрын
Everything makes sense when you get your head around it. 🙂