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
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.
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!
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.
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!
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.
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
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
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)
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: ua-cam.com/play/PL4-IK0AVhVjNcjfYDQEseNxuarDjSEdZK.html
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.
i didnt know i could zoom in the dev tools, thats life saving for my workflow, tks
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.
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.
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}
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!
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.
Awesome tutorial! Your examples are clear and concise. Thanks for sharing your knowledge.
Thank you the ::marker was what I needed for the css! Thank you for that
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!
It's not new for me, but is always important remember what you study!
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.
I love your tutorials
I use dl quite often. So I hope you really gona make a video about it.
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.
can we use spaces inside the quotes of (content)?, like this for example:
ul li::marker {
content: "* ";
}
I tried it, and it worked
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.
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
😁
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)
Dose a nav with sub menu realy need to be an unordered list ?
Considered best practice, yeah
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
5' ago, i'm here
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 :)
learn georgian it is one of the best languages
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
3 minutes ago? here I am
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: ua-cam.com/play/PL4-IK0AVhVjNcjfYDQEseNxuarDjSEdZK.html
*{box-sizing: border-box; margin: 0; padding: 0;}