How to create and style lists with HTML and CSS

[@westonjp612]

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.

[@JunieVM]

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.

[@web-projektmanager]

nothing new for me, but its really great that you're going into this basic things. thank you!

[@jennyvanessaquintocordobaq8439]

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

[@badcatdesign]

Thanks! Other interesting list attribute tricks are using ```reversed``` and ```start="5"``` on the `````` for countdowns etc.

[@crunchya2153]

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

[@NewRhodeshia]

Thanks Kevin ,I whole heartedly appreciate what you do.

[@diegognoatto8706]

i didnt know i could zoom in the dev tools, thats life saving for my workflow, tks

[@RichardCalder67]

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!

[@iwpsurf]

Awesome tutorial! Your examples are clear and concise. Thanks for sharing your knowledge.

[@pysco11]

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!

[@DaMu24]

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.

[@MrOliver1444]

Thank you the ::marker was what I needed for the css! Thank you for that

[@Jarrod0067]

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

[@KevinPowell]

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.

[@Pareshbpatel]

CSS: Styling Lists so clearly explained . Thanks , Kevin. {2023-10-10}, {2023-10-24}

[@spaceyraygun]

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!

[@KevinPowell]

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.

[@AlThePal78]

I love your tutorials

[@viniciosmello6889]

It's not new for me, but is always important remember what you study!

[@rrd_webmania]

I use dl quite often. So I hope you really gona make a video about it.

[@saro976]

can we use spaces inside the quotes of (content)?, like this for example: ul li::marker { content: "* "; } I tried it, and it worked

[@erics2133]

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.

[@AbhinavKulshreshtha]

Just wondering, does the commonly used reset, *{m:0, p:0}, solves collapsing margin issue?

[@clevermissfox]

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)

[@hoshi411]

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.

[@KevinPowell]

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

[@badcatdesign]

@@KevinPowell Exactly :) plus nested lists for complex navs seems the way to go for hierarchy.

[@Mr.userx9]

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

[@KevinPowell]

😁

[@EricFressange]

Dose a nav with sub menu realy need to be an unordered list ?

[@KevinPowell]

Considered best practice, yeah

[@pintokatendejonathan1740]

5' ago, i'm here

[@KrishJr13]

Hi sir Is there any website to practice HTML & CSS with projects??

[@vladislavivanov1546]

make your own projects with them s the best you can do

[@westonjp612]

He's got a Scrimba course thats free.

[@KrishJr13]

@@vladislavivanov1546 I'm trying 😀 but as a complete beginner its a bit difficult for me thats why

[@KrishJr13]

@@westonjp612 will check thank you

[@KevinPowell]

Frontend Mentor, iCodeThis, Frontend Practice, to name a few :)

[@arunsaklani9890]

Sir complete frontend project plz

[@KevinPowell]

I have a few bigger projects, but generally it's not what I focus on here

[@arunsaklani9890]

@@KevinPowell sir can you tell me the GitHub link of those project plz

[@sssssolar]

And why don't you use autosave to save the project? Why do you need to use a third-party extension?

[@KevinPowell]

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

[@domanickharper]

3 minutes ago? here I am

[@Zkauba24]

[@thereisnospoon22]

learn georgian it is one of the best languages

[@shahinza]

Make shorter videos please

[@KevinPowell]

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: kzbin.info/aero/PL4-IK0AVhVjNcjfYDQEseNxuarDjSEdZK

[@420troll4]

*{box-sizing: border-box; margin: 0; padding: 0;}