How to create and style lists with HTML and CSS

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 55

  • @westonjp612
    @westonjp612 Год назад +23

    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
    @JunieVM Год назад +2

    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
    @web-projektmanager Год назад +5

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

  • @badcatdesign
    @badcatdesign Год назад +2

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

  • @diegognoatto8706
    @diegognoatto8706 Год назад +1

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

  • @jennyvanessaquintocordobaq8439
    @jennyvanessaquintocordobaq8439 Год назад +2

    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

  • @crunchya2153
    @crunchya2153 Год назад +2

    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
    @NewRhodeshia Год назад +2

    Thanks Kevin ,I whole heartedly appreciate what you do.

  • @RichardCalder67
    @RichardCalder67 Год назад +2

    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!

  • @pysco11
    @pysco11 4 месяца назад

    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!

  • @iwpsurf
    @iwpsurf Год назад +2

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

  • @Jarrod0067
    @Jarrod0067 Год назад +1

    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
      @KevinPowell  Год назад +1

      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.

  • @MrOliver1444
    @MrOliver1444 Год назад +1

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

  • @spaceyraygun
    @spaceyraygun Год назад +1

    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
      @KevinPowell  Год назад +1

      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.

  • @DaMu24
    @DaMu24 Год назад +1

    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.

  • @Pareshbpatel
    @Pareshbpatel Год назад +1

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

  • @AlThePal78
    @AlThePal78 Год назад +1

    I love your tutorials

  • @viniciosmello6889
    @viniciosmello6889 Год назад +1

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

  • @rrd_webmania
    @rrd_webmania Год назад +1

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

  • @saro976
    @saro976 Год назад +1

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

  • @AbhinavKulshreshtha
    @AbhinavKulshreshtha Год назад +1

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

    • @clevermissfox
      @clevermissfox 11 месяцев назад +1

      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)

  • @Mr.userx9
    @Mr.userx9 Год назад +1

    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

  • @EricFressange
    @EricFressange Год назад +1

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

    • @KevinPowell
      @KevinPowell  Год назад +2

      Considered best practice, yeah

  • @erics2133
    @erics2133 Год назад +1

    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.

  • @KrishJr13
    @KrishJr13 Год назад +1

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

    • @vladislavivanov1546
      @vladislavivanov1546 Год назад +1

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

    • @westonjp612
      @westonjp612 Год назад +1

      He's got a Scrimba course thats free.

    • @KrishJr13
      @KrishJr13 Год назад +1

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

    • @KrishJr13
      @KrishJr13 Год назад +1

      @@westonjp612 will check thank you

    • @KevinPowell
      @KevinPowell  Год назад +4

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

  • @hoshi411
    @hoshi411 Год назад +2

    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
      @KevinPowell  Год назад +1

      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
      @badcatdesign Год назад +1

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

  • @arunsaklani9890
    @arunsaklani9890 Год назад +1

    Sir complete frontend project plz

    • @KevinPowell
      @KevinPowell  Год назад +1

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

    • @arunsaklani9890
      @arunsaklani9890 Год назад

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

  • @sssssolar
    @sssssolar Год назад +1

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

    • @KevinPowell
      @KevinPowell  Год назад +2

      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

  • @Zkauba24
    @Zkauba24 Год назад +1

  • @pintokatendejonathan1740
    @pintokatendejonathan1740 Год назад +1

    5' ago, i'm here

  • @domanickharper
    @domanickharper Год назад +1

    3 minutes ago? here I am

  • @thereisnospoon22
    @thereisnospoon22 Год назад

    learn georgian it is one of the best languages

  • @shahinza
    @shahinza Год назад

    Make shorter videos please

    • @KevinPowell
      @KevinPowell  Год назад +3

      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: ruclips.net/p/PL4-IK0AVhVjNcjfYDQEseNxuarDjSEdZK

  • @420troll4
    @420troll4 Год назад +1

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