Honestly, I learned way more from you Kevin than I learned in school. Love your videos. Thats pretty cool that you still help out the beginner users. You are an excellent teacher. I would love to see some JavaScript videos.
Kevin thank you, I'm already 48 years old studying IT after beings in Electronics field for almost 28 years. Your video helps me a lot to understand what I didn't get from the school. I'm very grateful that I learned so much from you.
Hi Kevin, for a while I've wanted to thank you, since I followed you I've improved a lot my css skills and, definitively I don't feel frustrated with css anymore. So thank you so much for your daily work, videos, and commitment. (My English is enhanced as well all thanks to you). Jenny Q Colombia
For the record I have been doing web dev since the days of HotDog HTML editor lol, some of us watch all your stuff. Also the comment about dev tools, reminded me of what a game changer Firebug was!
Hey Kevin, you are wonderful in bringing up very small stuff that make a big difference! I like your recommendation to use "margin-bottom" instead of "line-height". that was indeed my mistake with the list I am currently working on. Merci beaucoup Kevin!
Another thing to consider for new devs: margins on list items is one way of doing it, but consider: ul, ol { display: grid /* some rem amount */ grid-gap: 0.5rem } You could flex-column it too. The advent of gap allows you to ignore having a separate margin rule for the :last-child
Yup, for sure! But I don't really like showing that if someone is *just* learning about how lists work, as they might not have got to grid yet and I don't want to add a new thing on top that margin will handle. But 100% a great solution.
Wild, I had no idea got changed from "definition list" to "description list" in the HTML5 spec. I read it was changed for semantics, but repurposing an existing tag that was already packed with semantic meaning into one that is more general/generic seems silly to me. If you do make a video, I hope you touch on this evolution!
I had to do multiple takes because I kept saying definition list, lol. They also made and "bring attention to" and "idiomatic text"... which I guess I get, but not sure it was needed tbh.
An important tip for those who started with a high-level programming language before learning about HTML: HTML doesn't care about line breaks or indentation. Just tags, attributes and the DOM.
It sets everything to 0 so you can add it back where you want it. However if you still added a margin bottom on your item eg h1 and a margin top on the item underneath eg h2 , they’ll still collapse (as long as they are not flex/grid items; then the margins no longer collapse)
hi thanks for this helpfull video i have a question how can i make my order list to start from like 100 because it normal starts from 1 to...thanks in advance
In 2023 lists should be used for actual lists and nav+menu should be used for navigation menus. No more ul for navigation. It's 2023 ,guys we have nav , menu and flex now.
Menu shouldn't be used for navigations, but for actual menus. Plus, browsers see a menu as a anyway and the items in it should be list items. There are some arguments to just have a nav with links in it, but most accessibility experts say a list is best still
The extension updates the browser when I save, so I don't have to refresh the page manually. There are many build tools that can do this too, but for beginners I find this the easiest way
I try to make them as long as I need to properly cover a topic, and for ones like this that means going in-depth. I do make a point of trying to occasionally have shorter ones though: ruclips.net/p/PL4-IK0AVhVjNcjfYDQEseNxuarDjSEdZK
Honestly, I learned way more from you Kevin than I learned in school. Love your videos. Thats pretty cool that you still help out the beginner users. You are an excellent teacher. I would love to see some JavaScript videos.
Kevin thank you, I'm already 48 years old studying IT after beings in Electronics field for almost 28 years. Your video helps me a lot to understand what I didn't get from the school. I'm very grateful that I learned so much from you.
nothing new for me, but its really great that you're going into this basic things. thank you!
Thanks! Other interesting list attribute tricks are using ```reversed``` and ```start="5"``` on the `````` for countdowns etc.
i didnt know i could zoom in the dev tools, thats life saving for my workflow, tks
Hi Kevin, for a while I've wanted to thank you, since I followed you I've improved a lot my css skills and, definitively I don't feel frustrated with css anymore. So thank you so much for your daily work, videos, and commitment. (My English is enhanced as well all thanks to you). Jenny Q Colombia
Sincerely, some things were new for me, even though i work with lists everyday, thanks a lot for the tips and continue the great work
Thanks Kevin ,I whole heartedly appreciate what you do.
For the record I have been doing web dev since the days of HotDog HTML editor lol, some of us watch all your stuff. Also the comment about dev tools, reminded me of what a game changer Firebug was!
Hey Kevin, you are wonderful in bringing up very small stuff that make a big difference! I like your recommendation to use "margin-bottom" instead of "line-height". that was indeed my mistake with the list I am currently working on. Merci beaucoup Kevin!
Awesome tutorial! Your examples are clear and concise. Thanks for sharing your knowledge.
Another thing to consider for new devs: margins on list items is one way of doing it, but consider:
ul, ol {
display: grid
/* some rem amount */
grid-gap: 0.5rem
}
You could flex-column it too. The advent of gap allows you to ignore having a separate margin rule for the :last-child
Yup, for sure! But I don't really like showing that if someone is *just* learning about how lists work, as they might not have got to grid yet and I don't want to add a new thing on top that margin will handle. But 100% a great solution.
Thank you the ::marker was what I needed for the css! Thank you for that
Wild, I had no idea got changed from "definition list" to "description list" in the HTML5 spec. I read it was changed for semantics, but repurposing an existing tag that was already packed with semantic meaning into one that is more general/generic seems silly to me. If you do make a video, I hope you touch on this evolution!
I had to do multiple takes because I kept saying definition list, lol. They also made and "bring attention to" and "idiomatic text"... which I guess I get, but not sure it was needed tbh.
An important tip for those who started with a high-level programming language before learning about HTML:
HTML doesn't care about line breaks or indentation.
Just tags, attributes and the DOM.
CSS: Styling Lists so clearly explained . Thanks , Kevin.
{2023-10-10}, {2023-10-24}
I love your tutorials
It's not new for me, but is always important remember what you study!
I use dl quite often. So I hope you really gona make a video about it.
can we use spaces inside the quotes of (content)?, like this for example:
ul li::marker {
content: "* ";
}
I tried it, and it worked
Just wondering, does the commonly used reset, *{m:0, p:0}, solves collapsing margin issue?
It sets everything to 0 so you can add it back where you want it. However if you still added a margin bottom on your item eg h1 and a margin top on the item underneath eg h2 , they’ll still collapse (as long as they are not flex/grid items; then the margins no longer collapse)
hi thanks for this helpfull video i have a question how can i make my order list to start from like 100 because it normal starts from 1 to...thanks in advance
😁
Dose a nav with sub menu realy need to be an unordered list ?
Considered best practice, yeah
Only loosely on topic, but I need to sure my boss never sees this. He's got a center fixation, but I don't think he's aware we could center lists.
Hi sir
Is there any website to practice HTML & CSS with projects??
make your own projects with them s the best you can do
He's got a Scrimba course thats free.
@@vladislavivanov1546 I'm trying 😀 but as a complete beginner its a bit difficult for me thats why
@@westonjp612 will check thank you
Frontend Mentor, iCodeThis, Frontend Practice, to name a few :)
In 2023 lists should be used for actual lists and nav+menu should be used for navigation menus.
No more ul for navigation. It's 2023 ,guys we have nav , menu and flex now.
Menu shouldn't be used for navigations, but for actual menus. Plus, browsers see a menu as a anyway and the items in it should be list items.
There are some arguments to just have a nav with links in it, but most accessibility experts say a list is best still
@@KevinPowell Exactly :) plus nested lists for complex navs seems the way to go for hierarchy.
Sir complete frontend project plz
I have a few bigger projects, but generally it's not what I focus on here
@@KevinPowell sir can you tell me the GitHub link of those project plz
And why don't you use autosave to save the project? Why do you need to use a third-party extension?
The extension updates the browser when I save, so I don't have to refresh the page manually. There are many build tools that can do this too, but for beginners I find this the easiest way
5' ago, i'm here
3 minutes ago? here I am
learn georgian it is one of the best languages
Make shorter videos please
I try to make them as long as I need to properly cover a topic, and for ones like this that means going in-depth.
I do make a point of trying to occasionally have shorter ones though: ruclips.net/p/PL4-IK0AVhVjNcjfYDQEseNxuarDjSEdZK
*{box-sizing: border-box; margin: 0; padding: 0;}