How to create and style lists with HTML and CSS

Video Description

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/items?itemName=ritwickdey.LiveServer ✅ More on external style sheets: https://youtu.be/JVsI0fspik8 ✅ Collapsing Margins: https://youtu.be/uEfH6qnFF6Y ✅ The different list-style-types: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#values ⌚ 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 💬 https://discord.gg/nTYCvrK 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! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/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: https://twitter.com/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!