CSS List Styles Tutorial for Beginners

Подписаться 316 тыс.

Просмотров 25 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn CSS List Styles in this tutorial for beginners. Styling HTML lists with CSS can add impact to your HTML content. You will learn how to style lists with list-style-type and many other useful properties.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS List Styles Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:26) Setup
(02:21) list-style-type
(04:27) Useful HTML attributes
(05:32) Removing list item styles
(05:53) The unordered list
(06:10) list-style-position
(07:10) List items inherit typography
(07:43) list-style-image
(08:33) list-style shorthand
(09:38) List item styles
(10:25) nth-child pseudo-class
(11:21) ::marker pseudo-element
(15:10) One more helpful HTML attribute
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
📚 Typography Resources:
🔗 MDN: Fundamental Text and Font Styling - developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - www.cssfontstack.com/
🔗 MDN: Styling Links - developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about how to style HTML lists with CSS helpful? If so, please share. Let me know your thoughts in the comments.
#css #lists #styles

Опубликовано:

27 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 58

@DaveGrayTeachesCode 2 года назад

HTML lists are used more often than beginning web development students often realize, and it can be very beneficial to learn how to style lists with CSS. In this tutorial, we'll look at the basic properties of lists that we can style, and we will also look at a new pseudo-class and a new pseudo-element that have not appeared previously in this tutorial series. If you are new to CSS, I recommend starting at the beginning of my CSS tutorials for beginners playlist: ru-vid.com/group/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

@chandrachurmukherjeejucse5816 Год назад

Your lectures are really very helpful sir

@kelvinwong9190 10 месяцев назад

Probably the best teacher for Web Dev! Thanks Dave

@JayantBB78 4 месяца назад

Teaching is an art. Good Job Dave. Appreciate your work.

@emilnikolov9851 2 года назад

Hi Dave. Your tutorials are very good and very easy to follow. Your teaching skills are excellent. The moto "Strive for progress over perfection" is so simple and powerful. It is pleasure following your channel. Btw georgian is the language of the country Georgia (ex USSR republic called Gruzia) located on the east coast of the Black sea.

@DaveGrayTeachesCode 2 года назад

Thank you, Emil! 🙏

@grigoldvali4124 7 месяцев назад

thank you for your tutorials, Georgian is Georgian alphabet, I am from Georgia. Greetings from Georgia

@louiidelosreyes742 10 месяцев назад

Done! Cool video tutorial, easy to follow. Thank you again, Dave!

@alirezahekmati7632 2 года назад

keep making quality content that's what makes you stand out from the rest the only reason I came back to youtube is your channel.

@DaveGrayTeachesCode 2 года назад

Thank you for the kind words! 🙏🙏

@TravinskiyVladislav Год назад

Thank you, Dave

@nasssty284 2 года назад

was really happy when you chose Georgian as list-style-type Dave! im from Georgia and im watching and learning from your tutorials. you are the best! thank you

@DaveGrayTeachesCode 2 года назад

You're welcome! 💯

@aliben123 10 месяцев назад

Thank you for this incredible content. You are a great teacher.

@CanDoSo_org 2 года назад

So cool. Thanks Dave.

@DaveGrayTeachesCode 2 года назад

You're welcome!

@milanotv957 2 года назад

Hi Dave Gray, You Are Awesome, Your Tutorials Has Really Helped Me Grow As a Developer... Thanks Man.

@DaveGrayTeachesCode 2 года назад

Great to hear! 🙏🚀

@iambrijeshtoo Год назад

Thank you!

@DaveGrayTeachesCode Год назад

Welcome!

@fairytail6896 5 месяцев назад

Excellent❤

@worldclasscode1847 2 года назад

Great video! :)

@DaveGrayTeachesCode 2 года назад

Thank you! 💯

@kingb772 2 года назад

great tutorials

@DaveGrayTeachesCode 2 года назад

Thank you! 💯

@abdulganiyusanni8125 2 года назад

Good day Dave, am new to web development since the time have been trying to learn even through paid courses ,your tutorial is the most complete and understanding course have ever seen sir. i had finished taking your html course recently and it is a wow so i decided to continue my carrier pathway with your html tutorials.sorry sir, i would like to know when this your css playlist will be complete,i just started and i can see you are still updating the course sir.i will be very glad if the remaining playlist is out as soon as possible.i await your reply sir, thank you sir we really appreciate your effort and good work.

@DaveGrayTeachesCode 2 года назад

Thank you for the kind words 🙏 I am adding one chapter per week until the course is complete. 🚀

@NATAR160 2 года назад

As always, great, flawless tutorial. Wish Dave could do Svelte Native tutorial. Wd prefer this library to Flutter for mobile app dev.

@DaveGrayTeachesCode 2 года назад

Thank you! 🙏💯

@caramelbutterflycreations 10 месяцев назад

Hi Dave, is there a way to make only the word Step Bold in each list item but keep the other weights normal for the number? Not necessarily on both lists, thx!

@nadeemhussain2153 2 года назад

Enjoying Css learning journey after Html Thank You So Much Sir

@DaveGrayTeachesCode 2 года назад

You are most welcome! 🙏

@firemonkey7365 9 месяцев назад

Finished the HTML course and now working through the CSS stuff. Took me a while playing with the syntax but found that you can use the nth-child pseudo class along with the ::marker pseudo-element. I guess that there is a certain order you have to list the different parts of the selectors in?

@mortezafarhangpanah256 Год назад

fantastic

@DaveGrayTeachesCode Год назад

You're welcome!

@CTILET 2 года назад

Hellow Dave! Thanks for a new video. I began to learn TypeScript when the new video will come?))))

@DaveGrayTeachesCode 2 года назад

You're welcome! Do you mean when will a Typescript video be published? If so, later this year is the plan 💯

@arshadahamed988 3 месяца назад

Can we set disc style in il too?? Its my interview qust

@hiwayshoes 2 года назад

Hi Dave, great tutorial as always… just wondering if there is a difference between using the properties‘list-style’ and ‘list-style-type’? I typically see them used interchangeably, for example when declaring a value of ‘none’ to eliminate the list style. Thanks for all your help… Cheers 💖!

@DaveGrayTeachesCode 2 года назад

Yes, there is, but they can both be used. I cover both in this tutorial. list-style: is shorthand where you can specify one, two or three values for 1) type, 2) image and 3) position. Shorthand is available for many properties. It is why you see only background: (shorthand with other properties available to set, too) when many set background-color.

@abdulganiyusanni8125 2 года назад

sir pls will you be making any tutorial on css preprocessor (SASS/SCSS)

@DaveGrayTeachesCode 2 года назад

Eventually yes, but not before I finish this CSS series. Good question and request! 💯

@abdulganiyusanni8125 2 года назад

Sir i would like to know if you will be making tutorial on front-end frame-work(bootstrap)

@DaveGrayTeachesCode 2 года назад

Maybe in the future. I'm just focusing on completing this CSS series before looking too far ahead.

@abdulganiyusanni8125 2 года назад

@@DaveGrayTeachesCode okay sir we really appreciate your effort

@davesharma8946 Год назад

Hello Dave Is there any way we can resize list-style-image ?

@DaveGrayTeachesCode Год назад

Hello Dave! Google provides: www.geeksforgeeks.org/how-to-resize-list-style-image-in-css/

@davesharma8946 Год назад

@@DaveGrayTeachesCode thank you dave Appreciate the help

@samuelabimbola9851 Год назад

This is the best and recommended tutorial for beginners Thank you very much for the unpaid services you're rendering for beginners Pls, I have an issue with the Check mark styling of the list I downloaded a png Checkmark image and loaded it on my CSS to style the list item, instead of it coming out in small shapes like the one I'm watching in the tutorial, the Check mark image comes very big I've looked at my codes to see if there's any error but I can't find one Anyone pls help me out Thanks

@DaveGrayTeachesCode Год назад

Thank you! You can either resize your images before using them with an image editing app - and that is the best idea so you don't load a large image which increases load times - or you can follow the advice found on Stackoverflow here about using an html element to resize: stackoverflow.com/questions/57231618/how-to-resize-list-style-image

@fabrice9848 Год назад

Hi Dave. How long would it take to become a full-stack web developer ? I'm 40 and really hoping I still have time to establish myself in this line of work.

@DaveGrayTeachesCode Год назад

Code bootcamps promise as little as 6 months, and I'm not saying it isn't possible, but I'd say a couple of years of study will make a huge difference. There is no one set timeline. I also suggest working through the exercises at freecodecamp.org which will put you on the right path. 💯🚀

@fabrice9848 Год назад

@@DaveGrayTeachesCode I was thinking 2 years would be necessary to call myself a qualified web dev. Thanks for answering.