What are some of the dumb, recurring mistakes you make when writing CSS?
@sanzanderteio4392
Жыл бұрын
"font-color" instead of "color" :P
@JulianColeman03
Жыл бұрын
display: hidden
@znotchill
Жыл бұрын
@animation
@MizManFryingP
Жыл бұрын
Trying to set a Z-Index on an element before giving said element a stacking context
@foster0ne
Жыл бұрын
min-width: none max-width: auto
@stsamiko1142
Жыл бұрын
The CSS God is human too. That's comforting.
@JulianColeman03
Жыл бұрын
Oh man, what a humbling video. I make a ton of mistakes as a senior FE dev. Having a linter is great. Thanks for the upload, Kevin!
@cedrictheveneau9141
Жыл бұрын
Man, your content has helped me so much over the last 4 months when I finally got my first job as a front end web dev, all those css tricks your videos reached me I’d say it’s only fair you do some mistakes from time to time, considering the quality of what you teach us Thank you for taking some time to get back on your mistakes and correct them, it’s really nice of you
@fiddle_n
Жыл бұрын
I've only just started to learn CSS from The Odin Project and I've fallen in love with your channel! Just subbed to it
@rayhyde11
Жыл бұрын
For me, Emmett saves me every time - "posa" and "curp" for "position: absolute" and "cursor: pointer" are so ingrained I never have to think about them.
@ShellBryson
Жыл бұрын
I'm so glad I'm not the only one who makes these typos! ... and I've been working with CSS since it was first introduced.
@lukasmolcic5143
Жыл бұрын
using overflow: hidden high up in the DOM some time early in the projects and then coming to a point where I need to make something sticky
@VeitLehmann
Жыл бұрын
Oh, that one did already took me hours to catch! First recognizing the problem, then finding that damn `overflow: hidden`, but above all: checking what might break when removing it.
@arundhungel2522
Жыл бұрын
One of very rare videos, that made me happy knowing 'oh thank god i am not the only one' that 'oh that's neat thing i learnt today' 😅
@ersinbasaran
Жыл бұрын
I only did forget content: "" a few times. Now I had to forget if it is cursor: pointer, or pointer: cursor. This video definitely helps :))
@a1white
Жыл бұрын
nice to know I'm not the only one who makes dumb mistakes. Common one for me is getting @media (max-width:) and (min-width:) mixed up and listing it out in the wrong order in the css
@AbdicateDotNet
Жыл бұрын
Always a great video! Shortcut keys are the way to go sometimes. I used AutoHotKey to put stuff I use regularly plus the ones already in the VS Code! Great job and thank you!
@KevinPowell
Жыл бұрын
I should definitely make a hotkey for position: absolute, lol 😅
@ayaanshaikh6374
Жыл бұрын
@@KevinPowell you can type poa, for position: absolute, similiarly por & pof for relative and fixed respectively It's intellisense Mostly I try to type only the first letter of the property I want Like cup for cursor: pointer And so on...... It helps everytime I recommend it strongly Master intellisense!
@ayaanshaikh6374
Жыл бұрын
Btw, love your videos! You come up with great CSS tips! Learnt figma from you! Keep up the good work!!
@fragdance
Жыл бұрын
align-items vs justify-content. I usually mix and match until I get what I want
@drgothmania
Жыл бұрын
Re: "display: absolute", I have similar mistakes in other languages, and the way I often find out is that I remove the value, press Ctrl + Space to open Intellisense and find out "Oh the name/value I need is not here".
@scottborrowman
Жыл бұрын
The mistake I always do I no longer have to worry about! I would constantly type translate: transform
@KevinPowell
Жыл бұрын
So happy with the new spec on this, lol.
@scottborrowman
Жыл бұрын
@@KevinPowell definitely looking like a lot of cool stuff should be getting better support this year.
@isaac_lin
Жыл бұрын
For something like your background colour problem, one thing I'll do is check the computed values in the inspector to double-check if the browser is setting the property to the value I think I set. For your case, if the background colour was being inherited from some other element up the chain, seeing it in the inspector might jog your mind into realizing the error.
@VeitLehmann
Жыл бұрын
I also happen to forget `content` for pseudo-elements a lot. And duplicated rules are also very common. That's why I like to have my rules sorted by Stylelint. I like a logical order there, like SMACSS, because that's a natural order for me to reason about the rules being applied. What I always mix up is `flex-direction: row` vs `column`, but luckily that's something you can see immediately if you got it wrong. And finally, specificity issues. But that might not count as a dumb CSS mistake anymore, that's hitting all of us I guess 😉
@justkailash
Жыл бұрын
very helpful video.... and yeah the Background and color one was awesome.. it has done so many time from my side...
@Danarieel
Жыл бұрын
if it helps, the tooltip for 'absolute' says: "in combination with float and position..." that way you can check if you wrote 'position' or 'display' :D
@MartinKatscan
Жыл бұрын
I have a mental block with 'cursor' too. But instead of getting it back to front, it's the actual naming convention doesn't make sense to my mind, so I constantly get 'default' and 'pointer' mixed up. To me, 'pointer' sounds like it's describing an arrow, so when I want a 'hand' icon, I often slip up as I'm thinking 'well I Don't want an arrow so it must be 'default'. My other one is a weird keyboard muscle memory I seem to have instilled in me to always spell 'background' as 'backgurond', which is surprisingly difficult to spot in a large chunk of code.
@HammadWebDev
Жыл бұрын
Thanks for making this video. Now I know that I am not the only one making these mistakes most of the time 🤭For me "cursor: pointer" and "transform: transition" happen quite a lot.
@TerminatorFiles
Жыл бұрын
Dumbest I once (or twice) did, is to refresh the online website (domain) instead of my localhost and wondering why nothing changed :) .
@Hassankidult
Жыл бұрын
That cursor: pointer mistake happens to me very often
@outofrange9100
Жыл бұрын
Thanks for your content! Please make a video about safe-area-insets in css and how use them with 100vw or vh ☺️☺️☺️
@braveitor
Жыл бұрын
That transition-transforms mistake also happens to me every time! :D
@fiddle_n
Жыл бұрын
Also, just remember that `cursor: pointer` goes in alphabetical order - then you'll always know if it's right or not :)
@VeitLehmann
Жыл бұрын
... until he wants to apply `cursor: auto` 😉
@Bempus
Жыл бұрын
@@VeitLehmann auto: cursor just looks plain wrong though...
@arivanhouten6343
Жыл бұрын
I never manage to get the ellipsis property right - aaaaand of course pointer: cursor is also something I mix up all the time
@coolemur976
Жыл бұрын
Furthermore, why not to use button { cursor: pointer } instead of .button { cursor: pointer } (global element selector instead of class), and use .button classes just for additional custom styling.
@KevinPowell
Жыл бұрын
Totally valid, I'm just in the habit of using .button for my buttons, since I often end up using it on links and buttons alike. But doing it on the button element itself could be a decent thing to include in a personal CSS reset, since it's something most people end up applying to every project anyway.
@jshstuff
Жыл бұрын
I like having a special button class because in the real world my designer will someday request that I make a button look like a link (bad ofc) or something else, and I don’t want to need to override the button styles when that time comes.
@coolemur976
Жыл бұрын
@@jshstuff element selector for common styles. Additional classes for style modifications 😏 because ‘button’ and ‘a’ elements might always have a cursor pointer. And you don’t want to repeat yourself in style modifications.
@jshstuff
Жыл бұрын
@@coolemur976 yep I agree
@andradegilmar
Жыл бұрын
I also use color when I need a background-color... And everything get more confusing when styling SVG, I never remember to use 'fill' instead of background.
@joewarren4858
Жыл бұрын
I do the same thing with the color and display property at times. I also sometimes want to write font-color instead of color (even though it doesn't exist). It would make sense with all the other font properties that are available... size, weight, family, etc. but as we know that isn't the case haha
@AutsajderRR
Жыл бұрын
Very helpfull video :) now I won't be so terribly mad at myself and consider myself as dumass for all those stupid mistakes, if they happen for best expert in this matter 😄
@friedrichvillegasmurillo9775
Жыл бұрын
We can make mistakes but is more valuable knowing how to fix them
@mrezaweb
Жыл бұрын
Kevin you are the best!
@romanperera
Жыл бұрын
I too get most of these errors 😅 But im kinda happy, a pro like you too just stare at the code to figureout "what stupid mistake i did" 😆 Thank a lot for all the wisdom you share 😊✌
@eliasepg
Жыл бұрын
I identify myself with the last mistake haha that happened to me a couple of times.. really frustrating xD
@vizigr0u
Жыл бұрын
The other day I couldn't understand why my style was wrong with Chrome and not Firefox in vertical modes. I was using @media (min-ratio: 1) Turns out Firefox is content with a screen ratio of "1" but Chrome wants it to be "1 / 1" Of course since then I've learned about orientation landscape/portrait media queries.
@anonmultifruta9345
Жыл бұрын
lol the pointer cursor gets me every time
@DereksWebsitesAndMore
Жыл бұрын
Kevin, I learned somewhere that you do not have to have the last semicolon before the closing curly bracket. I’ve been doing it ever since. My logic is that it decreases the file size and, therefore, the page load speed. What do you think?
@KevinPowell
Жыл бұрын
Very, very small savings, and for me, opens up adding a new property later on and forgetting to put one on the previous line... But if your comfortable working that way, it won't hurt
@rickardelimaa
Жыл бұрын
I always mess up commas with _linear-gradient,_ _box-shadow,_ and multiple inputs in _background-image._
@KevinPowell
Жыл бұрын
yup, commas are definitely another
@khalidsaifullahfuad
Жыл бұрын
If the CSS king himself made mistakes writing CSS. Then I don't need to feel too bad about myself.
@matthewjamestaylorcom
Жыл бұрын
It's alphabetical: Cursor comes before pointer ;)
@GuitarHope
Жыл бұрын
Hahaha. Accurately!
@Indigo-Bunting
Жыл бұрын
I forget to add "solid" to my borders alllllll the time. The first time I forgot, it took me 2 days to realize 🙃
@Indigo-Bunting
Жыл бұрын
oh and the "url" before the () on background images
@NicholasZein
Жыл бұрын
At least you write the names right. I wasted a lot of time trying to understand why things weren't working only to realize I switched letters. 🤦♂️
@jezztorrent6636
Жыл бұрын
Color & background color😅 I’ve been making this mistake too
@kenthefley2226
Жыл бұрын
Mine is always border-box: box-sizing.
@kinstar
Жыл бұрын
One time I absolutely forgot to add a dot.... Before my selector wondering why no styles were showing. Time I'll never get back in life 😭
@-ct-celcomtechniques2566
Жыл бұрын
the cursor is the pointer finger 😃 cursor: pointer; Hope it will help !
@haidubogdan8712
Жыл бұрын
regarding pointer:cursor it's similar to dyslexia swapping words
@trappedcat3615
Жыл бұрын
No such thing as a dumb CSS mistake. Everything is a learning opportunity.
@tailsonrails
Жыл бұрын
The cursor points, but the pointer curses.
@GashyDev
Жыл бұрын
Its natural to make mistakes, we are only human!
@webdeveloper4742
Жыл бұрын
Just remember Absolute has a position or remember the b can be flipped to be the p for position. Or Apsolute...
@peteryates308
Жыл бұрын
I always spell centre properly before realising it needs to be set to a regional dialect.
@captainzappa8561
Жыл бұрын
I have done all you listed except the cursor. The one I make every day is spelling position I leave out the first i and like you although I have done it daily I can look at it and not see it.
@AmanRaj-sk5ws
Жыл бұрын
Display: absolute 🤣😄
@danisob3633
Жыл бұрын
writting a comma instead of a semicolon
@xBZZZZyt
Жыл бұрын
02:00 crosshair:cursor; ???
@daveturnbull7221
Жыл бұрын
"We all make dumb mistakes from time to time" - some of us make them all the time 🤣 I'm one of those who will make an error of some kind on almost every line. Mis-typing variable names, getting things the wrong way round, missing a parameter...the list just goes on and on.
@epicadidash
Жыл бұрын
Great video
@adamuk73
Жыл бұрын
border: 1px soild red Every. Single. Time. I have wonky fingers
@Take-the-Ticket
Жыл бұрын
There's this guy. He is very angry and *cursing*, and pointing at the idiot that wrote bOdYDisPLayaBSoluTe. The curser is pointing. cursor: pointer
@deepjasoliya9137
Жыл бұрын
"font-color" while styling color of font😶🌫
@KevinPowell
Жыл бұрын
Whenever I'm teaching to beginners it's always fun explaining that we prefix everything with "font-" or "text-"... except color, that's just "color", lol.
@VeitLehmann
Жыл бұрын
@@KevinPowell Maybe because it also applies to borders? 😬
@princefredkent1732
Жыл бұрын
💙
@mohammadghandour4756
Жыл бұрын
Hey there my friend and friends, my name is Kevin...
@KevinPowell
Жыл бұрын
A lot of people (including auto-captions a lot of the time) hear friend and friends, but I'm saying front-end friends 😊
@rollingjourney
Жыл бұрын
cursor: pointer; remind yourself it's in alphabetical order
@shoelaced
Жыл бұрын
On the very rare occasion that I have to style an ID, I've spent untold amounts of time trying to figure out why my `.box` css isn't working for my `` element. *facepalm*
@KevinPowell
Жыл бұрын
I've been there too :D
@Shubhamyadav-hs2lw
Жыл бұрын
Sir How are you?😊
@KevinPowell
Жыл бұрын
I'm great, thanks! :D
@webdeveloper4742
Жыл бұрын
Comments show someone commented a day a go.???
@KevinPowell
Жыл бұрын
My Patrons get access to videos ~48 hours before they go live :)
@AlazTetik
Жыл бұрын
100% same mistakes, again and again and again... Probably again after watching this video... 🤭
@Hikyu
Жыл бұрын
40 seconds online, one comment with 1 day? sus
@KevinPowell
Жыл бұрын
My Patrons get early access :)
@Hikyu
Жыл бұрын
@@KevinPowell Well.. that makes sense haha
@zain-xk9fo
Жыл бұрын
Hello, I am following you from Iraq. Can you speak a little slower, because English is not my first language, so that I can understand you more? Thank you. ❤❤
@KevinPowell
Жыл бұрын
This is me speaking slower, lol. I do try hard, though I often end up back at my normal cadance as I'm recording, specially on videos like this. Thanks for reminding me though, I do need the reminders all the time :)
@resolutesatyr
Жыл бұрын
You can always slow the speed of the video, try 0.75 I speak English perfectly and I do it all the time.
@zain-xk9fo
Жыл бұрын
@@KevinPowell Thank you very much for all the information you provide. I benefited greatly from you ❤❤
@zain-xk9fo
Жыл бұрын
@@resolutesatyr Thanks I will do that
@drax6094
Жыл бұрын
One that gets me every single time is grid-template-columns. Is it repeat(1fr, 3) or repeat(3, 1fr). I always get it backwards for some reason, and I know I'm going to mess it up, and overthink myself into it just like you xD
@michaeljohnson1576
Жыл бұрын
Keep at it! Grid was an annoying concept to master for me but it came eventually. It’s repeat(3, 1fr).
@jakewynn
Жыл бұрын
What does this even do? Does it just do 3 even columns? I can't stray away from flex because its just so intuitive!
@drax6094
Жыл бұрын
@@jakewynn Yeah, it creates 3 even columns. I'd actually see it's more intuitive than flexbox, at least imo, but it does have a bit of a learning curve :)
@CyberSpaceFilms
Жыл бұрын
I can totally relate to the pointer: cursor problem; I do it all the time. Someone pls send help.
@kinstar
Жыл бұрын
You could try The mouse has a cursor and its cursor is a pointer. But you might say it the other way also 😂
@jame_sta
Жыл бұрын
I love your channel Kevin, God bless you bro 🙏🛐✝️ keep up the great content. Can you do some videos with ShadowDOM components? Thank you!!
@jshstuff
Жыл бұрын
I don’t think I’ve ever done display: absolute, but I do position: inline-block all the time
@welling1
Жыл бұрын
I'm guilty of all these. But the pointer: cursor get's me everytime!
@angelg69420
Жыл бұрын
Tip: When you wasted more than 2 minutes trying to debug something give a try to chat GPT to debug it for you, it helps so much
@Showmatic
Жыл бұрын
Whole working in React with Vite last night, I spent a good 40+ minutes troubleshooting and googling trying to figure out why my scss modules weren't working when they ALWAYS work in the same environment, only to find out that I had forgotten to add the .module to the scss filename 😶. The utter disappointment I had in myself.
@ricardodesirat2590
Жыл бұрын
beautiful :) I had the same cursor/pointer dyslexia until I made a memory trick: "how do I want my 'cursor'? like my hand, pointing"
@carolmckay5152
Жыл бұрын
I left the content off of pseudo elements for so long so many times that I ended up making a mixin for it to deal with that AND the top left right bottom in one fell swoop - I worked around my dumb. Now inset is here and I've been doing css for so many years I have stopped using my mixin for new code now ... may need to go back to it yet, we'll see 😄
@lemonlime1508
Жыл бұрын
I had never made these mistakes before. But after watching this video I may Start making these mistakes. This video is affecting my brain somehow.
@tmbarral664
Жыл бұрын
again, I love your choice of tshirt when calling yourself dumb. Irony at its best. Thx, Kevin ;D
@pnjprods
Жыл бұрын
I always confuse box-sizing and border-box. I have to think about it and still put it the wrong way
@briankgarland
Жыл бұрын
Mistakes are good. They teach you troubleshooting skills and you learn other things while trying to fix those mistakes.
@Pyrospower
Жыл бұрын
I do make the ::before mistake as well!
@vasyaqwe2087
Жыл бұрын
I always forget about the content property 🙂
@phucnguyen0110
Жыл бұрын
Yes, even the CSS king on KZitem himself makes mistakes - so I feel less stressful writing CSS lol
@wickedclamor4882
Жыл бұрын
Giving properties to parents when you are trying to style a child is the most annoying mistake I always make.
@BenRangel
Жыл бұрын
display:hidden is mine (especially since one of my common helper classes is named "hidden" so it's often top of mind)
@SustainedFuture
Жыл бұрын
I have yet to get the { cursor: pointer; } order correct on the first try (even while typing this comment).
@bedlam5657
Жыл бұрын
display: absolute; is one I've spent some time on in my current project
@CirTap
Жыл бұрын
I never make stupid mistakes, only very clever ones.
@Stoney_Eagle
Жыл бұрын
I keep spelling widht wrong 😂
@VaibhavPareek
Жыл бұрын
Hey you are the one of my favourite creator
@CaretTheGnome
Жыл бұрын
`display: absolute` Every. Single. Time.
@KevinPowell
Жыл бұрын
Glad I'm not alone! 😁
@cosmes.l8742
Жыл бұрын
The error of forgetting the background color in the before or after happens to me from time to time, but what always happens is when I use transition & transform I always get confused XD, because I use transform: transition 1s easy-in as an example, and I get wondering why it's wrong XD.
@patrickmcnelis1520
Жыл бұрын
Thank you Kevin for making these awesome vids. I have been looking for a channel that I enjoy learning from, and I finally found it. I think its just you down to Earth approach to your teaching. I just started the 21day challenge and got on Discord...loving the community there. I will become a Patreon as well so I can give back to you for doing all this hard work on these vids. Making KZitem videos is not easy. Thanks again Kevin!!
@saheedsimisaye8978
Жыл бұрын
This video made my day. I used to beat myself up so badly for making most of these mistakes and more, but now that I realize the CSS King makes these mistakes too, I won't feel too bad about them anymore. Thanks.
@shawnhiser8784
Жыл бұрын
I make the exact same mistakes you showed! Every one of them hahaha! I'm glad to know I'm not the only one! Thanks for the video!
@felicityadj5886
Жыл бұрын
hi kev, your videos are just too good, i love all the CSS stuffs...and yes, you do make us fall in love with CSS !!
Пікірлер: 158