CSS List Styles Tutorial for Beginners

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ธ.ค. 2024

ความคิดเห็น • 63

  • @DaveGrayTeachesCode
    @DaveGrayTeachesCode  2 ปีที่แล้ว +6

    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: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html

  • @JayantBB78
    @JayantBB78 9 หลายเดือนก่อน +1

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

  • @namizo_des
    @namizo_des 3 หลายเดือนก่อน +1

    Hello 👋🏻 In this video you hoped someone would understand "list-style-type: georgian;" symbols. Actually it's georgian alphabet 🇬🇪 . I am from Georgia (a small county near the Black Sea) and this video made my day ❤. I am always extremely happy to see Georgian things out there on purpose or not 🤣. P.S you are a brilliant tutor, THANK YOU 🤠 i'll buy you plenty of coffee ☕

  • @kelvinwong9190
    @kelvinwong9190 ปีที่แล้ว +2

    Probably the best teacher for Web Dev! Thanks Dave

  • @emilnikolov9851
    @emilnikolov9851 2 ปีที่แล้ว +10

    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.

  • @alirezahekmati7632
    @alirezahekmati7632 2 ปีที่แล้ว +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.

  • @nasssty284
    @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

  • @louiidelosreyes742
    @louiidelosreyes742 ปีที่แล้ว

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

  • @grigoldvali4124
    @grigoldvali4124 ปีที่แล้ว +1

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

  • @milanotv957
    @milanotv957 2 ปีที่แล้ว +1

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

  • @aliben123
    @aliben123 ปีที่แล้ว

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

  • @TravinskiyVladislav
    @TravinskiyVladislav 2 ปีที่แล้ว

    Thank you, Dave

  • @CanDoSo_org
    @CanDoSo_org 2 ปีที่แล้ว

    So cool. Thanks Dave.

  • @LavaLegacy
    @LavaLegacy 2 หลายเดือนก่อน

    no one thought like singham again will be this huge and create the noice like never before

  • @nadeemhussain2153
    @nadeemhussain2153 2 ปีที่แล้ว +1

    Enjoying Css learning journey after Html Thank You So Much Sir

  • @firemonkey7365
    @firemonkey7365 ปีที่แล้ว

    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?

  • @fairytail6896
    @fairytail6896 11 หลายเดือนก่อน

    Excellent❤

  • @NATAR160
    @NATAR160 2 ปีที่แล้ว

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

  • @brijeshkumarchavda
    @brijeshkumarchavda 2 ปีที่แล้ว

    Thank you!

  • @andromilk2634
    @andromilk2634 5 หลายเดือนก่อน

    I was under the impression that the stack order would have started like this : list-style: url("images/checkmark.png") square; as opposed to the inverse which you did? The reason I'm saying this is because in the video about fonts/font-family, the stack order was always from left to right : font-family: "Roboto", sans-serif;

  • @caramelbutterflycreations
    @caramelbutterflycreations ปีที่แล้ว

    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!

  • @abdulganiyusanni8125
    @abdulganiyusanni8125 2 ปีที่แล้ว +1

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

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว +1

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

    • @abdulganiyusanni8125
      @abdulganiyusanni8125 2 ปีที่แล้ว

      @@DaveGrayTeachesCode okay sir we really appreciate your effort

  • @ruslangilyazov7733
    @ruslangilyazov7733 5 หลายเดือนก่อน

    Thanks Dave

  • @davesharma8946
    @davesharma8946 2 ปีที่แล้ว +1

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

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว +2

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

    • @davesharma8946
      @davesharma8946 2 ปีที่แล้ว

      @@DaveGrayTeachesCode thank you dave
      Appreciate the help

  • @abdulganiyusanni8125
    @abdulganiyusanni8125 2 ปีที่แล้ว +1

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

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว

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

  • @kingb772
    @kingb772 2 ปีที่แล้ว

    great tutorials

  • @abdulganiyusanni8125
    @abdulganiyusanni8125 2 ปีที่แล้ว +4

    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
      @DaveGrayTeachesCode  2 ปีที่แล้ว

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

  • @worldclasscode1847
    @worldclasscode1847 2 ปีที่แล้ว

    Great video! :)

  • @arshadahamed988
    @arshadahamed988 9 หลายเดือนก่อน

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

  • @CTILET
    @CTILET 2 ปีที่แล้ว

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

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 ปีที่แล้ว

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

  • @hiwayshoes
    @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
      @DaveGrayTeachesCode  2 ปีที่แล้ว +1

      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.

  • @fabrice9848
    @fabrice9848 2 ปีที่แล้ว

    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
      @DaveGrayTeachesCode  2 ปีที่แล้ว +1

      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
      @fabrice9848 2 ปีที่แล้ว

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

  • @newlap5608
    @newlap5608 ปีที่แล้ว

    sir i have a doubt that y do v need main tag or header tad or footer tag

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  ปีที่แล้ว

      You need to go to the HTML course and the chapter on semantic tags: th-cam.com/video/kX3TfdUqpuU/w-d-xo.html

  • @mortezafarhangpanah256
    @mortezafarhangpanah256 2 ปีที่แล้ว

    fantastic

  • @samuelabimbola9851
    @samuelabimbola9851 2 ปีที่แล้ว

    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
      @DaveGrayTeachesCode  2 ปีที่แล้ว +1

      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

  • @greatminikwu9089
    @greatminikwu9089 10 หลายเดือนก่อน

    My list image is massive 😭 like it takes half my page 😭 and I use a phone to code I can’t even understand the two dots inside the url

    • @IG7799-c4u
      @IG7799-c4u 9 หลายเดือนก่อน +1

      You either need to downsize your image using some software such as Irfanview, or I believe this should work too:
      li {
      background-size: 20px;
      }

  • @shivsarwade
    @shivsarwade ปีที่แล้ว

    I seen your html video that was ultimate in terms of depth and no of attributes and css is no difference

  • @moha-q1x
    @moha-q1x วันที่ผ่านมา

    i didnt understand this is useless