My best CSS tips from 2024

[@grasshopperweb]

Glad I stuck it out to the end cause that fit-content trick just released a stress knot in my back I wasn't even aware of 😄

[@jbest84]

So close to a million subs! You make great content, it is well deserved.

[@outpost31737]

It's hard to keep up with everything CSS so I appreciate all your hard work Kevin. All the best.

[@ethansc]

I ended up using CSS counters for a project of mine after you released that dedicated video and it works super well! It’s a songwriting app I’m hoping to release a demo for in the next few days and I used counters for each of the sections (e.g. Verse 1, Chorus 1, Verse 2, Bridge, Chorus 2, etc). The user can drag and rearrange the sections so I need them to dynamically renumber, and counters work beautifully for that with no JS! Thank you so much for all of the great content you put out!

[@thedavidd]

That is such a cool usecase for CSS counters!

[@605hu4]

Embrace timestamps Kevin

[@KevinPowell]

Did you not get any? I put them in this video :)

[@KevinPowell]

Hmm, super odd. I just checked and don't see any, but I definitely put them in there (you can see them in the description). Gonna look into why they aren't working.

[@eduazy]

@@KevinPowell remove the extra 0 before single digit minutes:)

[@Alex-ml3zx]

@@KevinPowellmaybe cause intro is added 2x

[@antonym00]

It works now 🙂

[@ejemeniboi]

This is GOLD! Thank you Kevin. Always looking towards your videos

[@VerySadBatman]

Legend!!! Learned so much from you!

[@unterohr]

absolute brilliant xx

[@trollocat]

3rd and 5th were my favorites, thank you!!

[@BasicMathTutorials-v3d]

Such a good video ! wow 😝 thank you

[@psykhout]

Been in a css slump haha you always come through

[@off___billy]

Very good video Kevin, excellent explanation as always. Small tips, great content. Thanks!

[@hclyrics]

All amazing tips! You're undoubtedly gonna break a million subscribers this year.

Cool tips, thanks 💖

[@c__beck]

05:23 you can use the `text-decoration-line: line-through overline underline;` for a hamburger menu icon, yeah? Pure CSS instead of using an image or something.

[@serkanalkan8150]

Nice post!

[@8_ball_z]

Good tips!

[@johnborron1059]

7:55 I'm going to totally do that.

[@sarojchauhan7392]

Css is amazing ❤❤❤ and your teaching style is always rock ❤❤❤❤

[@PIka15Channel]

Thanks for the video! I am curious about @layer in this video, do you have a video explain about it?

[@KevinPowell]

I do! kzbin.info/www/bejne/hHWxg3qNYsRke6c

[@PIka15Channel]

@@KevinPowell thank you!

[@anuvette]

Kevin i found a kinda cool scrolling effect while browsing thru kickstarter. u can see it in rewards tab of any kickstarter project. (the cards scroll and then stop like a sticky navbar or something until some event and it scrolls up again and disappear until another card takes its place and then stays stuck; sorry for rambling i tried my best to explain the effect) like i dont even know where to begin recreating that. will u try to recreate it using css in a future video🥺 thanks.

[@tsudizera]

About the last tip, `min-width: fit-content`: isn't it easier to just not set `flex-basis` to `0` and leave it as `auto`?

[@callanambulancebutnotforme5702]

I love your content 😍😍

[@skumpuntele8941]

How to get that nice elevation like on the primary button in the last tip?

[@JimKernix]

I was hoping you would do a video like this - some kind of summary. I'm bad with putting into practice the things you cover.

[@killerwolle88]

I want someone to look at me the way Kevin looks at text-decoration.

[@МаксимИванов-я1и3ъ]

Hi Kevin, can you explain what that extension is on the right side of the screen, please?

[@KevinPowell]

Think it was just my dev tools :)

[@RENAISSANCE_DAY]

You first caught my attention by a term you used for "website readability" and the logical ascertion that the ac t of reading involves scanning a page at a certain width. This is something that I have been in rather problematic discussions with clients. Trying to fill up a large screen by increasins font size or for end to end in browser view port with modest padding just does not make sense. What is the term you used for readability and keeping read area to about 1200 to 1400 pixels?

[@brohands-je9gg]

Its been nearly two years ive started to use css .mostly tailwindcss , but when it s come to make some modern navigation menu kinda like tricky ones i lack html structure and css ? Is it normal , for some times i google lots of syntax too

[@MrZogar1993]

Wait, its "hello my front end friends" not "hello my friend and friends"?

[@watchandlearn7945]

When I write text-decoration-thickness: 14px; It does not work for me until I add the text-decoration property also. where as you write "text-decoration-thickness:" only without adding the text decoration its worked for you

[@maxidevs]

Me encanta que este en español, igual siempre los vi en ingles, pero ahora es mas comodo para mi jajajaja

[@midnightinsane6893]

The github link doesn't had the last demo.

[@smyrrha]

Good afternoon! Could you put this code in a repository? Tks

[@KevinPowell]

Here you go: github.com/kevin-powell/top-tips-2024

[@smyrrha]

@@KevinPowell

[@arturkwiatkowski5019]

Great

[@Battle-Scarred]

Nice

[@jorgeabelburgosquezada2065]

Por favor activa en tu canal la traducción automática mediante IA.

[@KevinPowell]

I have to trigger it for each video, and I have limited number of videos I can do a week... I'd been doing some older videos, so I'd run out when I uploaded this one. I'll try to do it soon :)

[@trollocat]

amigo si quieres codear tienes que saber inglés, una traducción de IA en un video de programación en inglés probablemente va a traducir las palabras reservadas del lenguaje de programación y no te va a ayudar para nada 🙏 a menos que busques contenido nativo en español

[@sangeethastephen8357]

I told my husband that I have a massive crush on you because you are a front-end genius with a big brain😇😎

[@BossPetta]

La voz de la traducción al español es horrible 😞

[@KevinPowell]

Sorry to hear that. I used the auto feature in YT to see how it would be 😔

[@BossPetta]

@@KevinPowell I know Kevin, don't worry too much about that, I've been listening to you in English for years, but I was curious to hear how the automatic translation was. In my opinion they still have a lot of work to do there.

[@eduardojavier112]

la traducción debería ser la de un hombre

[@JJ_Seno]

so... many... css... properties

[@RC-Flight]

The video content was great! But the click bait face in the video thumbnail is a big turnoff when people do them.