How to create and style lists with HTML and CSS

Lists are one of the most common elements we have on websites, so I decided to do a beginner-friendly deep dive on them, exploring ordered and unordered lists, from how to create them, the difference between the two of them, their default styling, and how we can customize how they look with our own styles.

🔗 Links
✅ Live server for VS Code: https://marketplace.visualstudio.com/...
✅ More on external style sheets:    • HTML & CSS for Beginners Part 9: External CSS  
✅ Collapsing Margins:    • Margin and Padding Deep Dive: Collapsing m...  
✅ The different list-style-types: https://developer.mozilla.org/en-US/d...

⌚ Timestamps
00:00 - Introduction
00:39 - The two most common types of lists
04:12 - The importance of using the correct type of list
05:10 - An example of using them correctly
07:00 - The default styling of lists
11:00 - Understanding and changing the spacing of our lists
16:35 - Spacing between list items
18:40 - Colors with list items
19:40 - Changing the number or bullet point icons with list-style-type
23:00 - Changing the bullet point to a custom image
25:22 - Styling the bullet or number using ::marker
30:22 - The one thing you shouldn’t do with lists


#css

--

Come hang out with other dev's in my Discord Community
💬   / discord  

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺   / kevinpowellcss  

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon:   / kevinpowell  

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!