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!
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.
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.
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.
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?
Generally the rule in typography is 45-75 characters per line, I believe... Now, on an ultra wide, if you did that with very big text, it could be terrible, lol. Not sure if there is a fixed rule though.
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
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
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 :)
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
@@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.
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 😄
It's hard to keep up with everything CSS so I appreciate all your hard work Kevin. All the best.
So close to a million subs! You make great content, it is well deserved.
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!
That is such a cool usecase for CSS counters!
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.
This is GOLD! Thank you Kevin. Always looking towards your videos
All amazing tips! You're undoubtedly gonna break a million subscribers this year.
Very good video Kevin, excellent explanation as always. Small tips, great content. Thanks!
Legend!!! Learned so much from you!
Css is amazing ❤❤❤ and your teaching style is always rock ❤❤❤❤
Embrace timestamps Kevin
Did you not get any? I put them in this video :)
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.
@@KevinPowell remove the extra 0 before single digit minutes:)
@@KevinPowellmaybe cause intro is added 2x
It works now 🙂
Been in a css slump haha you always come through
7:55 I'm going to totally do that.
Such a good video ! wow 😝 thank you
absolute brilliant xx
3rd and 5th were my favorites, thank you!!
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`?
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.
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.
Cool tips, thanks 💖
Thanks for the video! I am curious about @layer in this video, do you have a video explain about it?
I do! ua-cam.com/video/NDNRGW-_1EE/v-deo.html
@@KevinPowell thank you!
Nice post!
I want someone to look at me the way Kevin looks at text-decoration.
Good tips!
How to get that nice elevation like on the primary button in the last tip?
I love your content 😍😍
Wait, its "hello my front end friends" not "hello my friend and friends"?
Me encanta que este en español, igual siempre los vi en ingles, pero ahora es mas comodo para mi jajajaja
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?
Generally the rule in typography is 45-75 characters per line, I believe...
Now, on an ultra wide, if you did that with very big text, it could be terrible, lol. Not sure if there is a fixed rule though.
The github link doesn't had the last demo.
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
Hi Kevin, can you explain what that extension is on the right side of the screen, please?
Think it was just my dev tools :)
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
Good afternoon! Could you put this code in a repository? Tks
Here you go: github.com/kevin-powell/top-tips-2024
@@KevinPowell
Nice
Great
I told my husband that I have a massive crush on you because you are a front-end genius with a big brain😇😎
Por favor activa en tu canal la traducción automática mediante IA.
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 :)
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
La voz de la traducción al español es horrible 😞
Sorry to hear that. I used the auto feature in YT to see how it would be 😔
@@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.
la traducción debería ser la de un hombre
so... many... css... properties
The video content was great! But the click bait face in the video thumbnail is a big turnoff when people do them.