How to Create Tabs with only HTML & CSS

Поділитися
Вставка
  • Опубліковано 12 вер 2024

КОМЕНТАРІ • 158

  • @astigmatik
    @astigmatik 3 роки тому +7

    I logged in just to like this video. In fact, I let the ads play to show my gratitude :-) By far, this is the cleanest solution that I have found. No annoying "position: absolute/relative" that would screw up everything when you merge it with your own CSS. I just added some border-radius to the top right and top left of the tab labels and they look even better. Thank you again!

    • @ieatwebsites
      @ieatwebsites  3 роки тому +1

      That’s amazing. Thank you so much for that! 😁👍

  • @sunnyshen8954
    @sunnyshen8954 9 місяців тому +1

    Thanks man. You saved me.
    I got the job saying I know JS, but I don't.
    I am learning JS but it takes time. for now you saved me.

  • @dereinzigbeste9042
    @dereinzigbeste9042 3 роки тому +3

    Such a good video! You explained it the best way possible and its so much better than other Descriptions

  • @perfectkanpeki
    @perfectkanpeki 3 роки тому +12

    This deserves way more views, thanks for the tutorial

  • @rubinaaziz8807
    @rubinaaziz8807 2 роки тому +1

    Just Awesome.Before Watching this i know that it can be make by Js.But now i can make it just using Html css.Thanks Bro.

  • @GunzzYT
    @GunzzYT 3 роки тому +8

    thank you finally a good tutorial with explanation and no stupid background music ;)

  • @TomaNeagu
    @TomaNeagu 3 роки тому +1

    You just earned a subscriber, it ain't much, but it's honest work xD! Keep up the good work, chief!

  • @TashikaCruz
    @TashikaCruz Рік тому

    Thank you so much for this tutorial! I appreciate how the steps were laid down explicitly, making sure the reason behind each code was explained. 🙏 Thanks man!

  • @zakidz6716
    @zakidz6716 3 роки тому +1

    After seeing this, i can't leave the video without a like and subscribe .
    simple tutorial with cool css tricks in a short time, this is great .

  • @bioshock14
    @bioshock14 Рік тому +3

    Brilliant tutorial, one of the best ive seen

  • @weymouthdave
    @weymouthdave 5 місяців тому

    Excellent tutorial, you explain this concept in a very easy to understand way. Well Done!

  • @pierrelavoie7399
    @pierrelavoie7399 3 місяці тому +1

    This is exactly what I needed, thanks a lot 🙂

  • @marionseychelles7963
    @marionseychelles7963 3 роки тому +1

    It's a great video to learn quickly and easily how to create an accordion tab. If I could put a thousand likes
    I would have done it !!

  • @raenahunter7173
    @raenahunter7173 Рік тому +1

    such a great video! very easy to understand, and I appreciate it being done in real time - much easier to keep up!

  • @indiajackson5959
    @indiajackson5959 2 роки тому +2

    This is an excellent video! Exactly what I needed! I will include in the notes on my dissertation.

  • @kwmcgreal
    @kwmcgreal 3 роки тому +1

    Very Clever. Just add a pointer on hover to the label and it is golden.

  • @Sebastianweston1
    @Sebastianweston1 8 місяців тому

    Amazing tutorial, all others use javascript and some don't even work. Thanks a lot!

  • @ronbalid7259
    @ronbalid7259 Рік тому +1

    Thanks Man! This is so very helpful for my capstone project

  • @therealrajan
    @therealrajan 2 роки тому +1

    After nothing else worked this saved me thankyou so much.

    • @ieatwebsites
      @ieatwebsites  2 роки тому +1

      I’m glad to hear that! You welcome.

  • @oluwarotimiajayi
    @oluwarotimiajayi 11 місяців тому

    An awesome video! Thanks for explaining the concepts that make the code work the way it does. Not many tutors take the time to do that. Thanks a bunch!🙏🏼

  • @daniloablong7853
    @daniloablong7853 2 роки тому +2

    Very clear explanation. Thanks for such a great video!

  • @sushmapuli1233
    @sushmapuli1233 2 роки тому +1

    Your explanation is clear and learnt a lot

  • @Klrfl101
    @Klrfl101 2 роки тому +1

    I just want to say thank you so much, I love the order trick, will definitely use it on my projects. once again thanks so much!

  • @dix_mois
    @dix_mois 2 роки тому +1

    Nice! Thank you man!!!

  • @dominicbelleyweb
    @dominicbelleyweb Рік тому +1

    Fantastic video. So simple and well explained.

  • @dibyajyotichakraborty7790
    @dibyajyotichakraborty7790 Рік тому +1

    Excellent One. Thanks for uploading.

  • @karolperez5993
    @karolperez5993 3 місяці тому

    thank you for this video, this solution is so clean and simple, AMAZIIIING!!

  • @ashrafulrahmansakil9612
    @ashrafulrahmansakil9612 2 роки тому +1

    Thanks, this is very important video.

  • @toddvance1568
    @toddvance1568 Рік тому

    Very elegant! Now to make them responsive!

  • @shaeleamuir2295
    @shaeleamuir2295 Рік тому +1

    Extremely easy to follow! Thank you!

  • @ciastek1292
    @ciastek1292 Рік тому

    I hope the reason this video isn't popular is about people already knowing it or people that don't want to know it

  • @hamergil
    @hamergil 8 місяців тому

    Beautiful. I just used it in one of my projects! thanks a lot!

  • @ainmosni4319
    @ainmosni4319 Рік тому +1

    +1 sub
    This move way too smooth.

  • @bhushana8463
    @bhushana8463 3 роки тому +1

    Very cool step by step narration. Thanks you very much

  • @helloplz590
    @helloplz590 Рік тому +1

    very good its really working, thankyou!

  • @josephfatoye6293
    @josephfatoye6293 4 роки тому +2

    This is very cool, its just what I need in my present project. Thank you very much, looking forward to more amazing contents :)

    • @ieatwebsites
      @ieatwebsites  4 роки тому +1

      That’s great! You welcome. 😁

  • @zYnsy21
    @zYnsy21 2 роки тому +1

    thanks! you're amazing bro!

  • @user-mk8bt3ej4e
    @user-mk8bt3ej4e Рік тому +1

    pretty coool and amazing explanation, thanks!

  • @AnaAlvarez-ob9rg
    @AnaAlvarez-ob9rg 2 роки тому +1

    greate video, thanks!

  • @nickyeoman
    @nickyeoman 2 роки тому +1

    It's such an easy trick, works great. Love it!

  • @naseerakbari4949
    @naseerakbari4949 2 роки тому

    that was amazing young boy! ✌✌✌

  • @poterealpopolomalaysia3540
    @poterealpopolomalaysia3540 Рік тому

    I million dollar questions: 1) would it be possible to make the text scrolling underneath the tabs like a sticky header? 2) Is it possible to make the the tabs bar as top header (sticky) once you scrool the page down to the tabs? Hope it is clear. Cheers Valter

  • @barbo1776
    @barbo1776 2 роки тому +1

    Thank you!!!!! Amazing video!! You saved a life!

  • @Shuyinz
    @Shuyinz 2 роки тому +1

    this is golden! Thanks for sharing this to us!

  • @oksanakukhotska7190
    @oksanakukhotska7190 2 роки тому +1

    Thanks for the clear tutorial😃

  • @Maxs386
    @Maxs386 3 роки тому +2

    Just a perfect video tutorial!!

  • @prakashchandra5401
    @prakashchandra5401 3 роки тому +2

    Thank you this helped me a lot :)

  • @deetorz
    @deetorz 3 роки тому +1

    This was amazing and helped so much. Super easy to understand too. Thank you! subbeddddddd

    • @ieatwebsites
      @ieatwebsites  3 роки тому

      You are very welcome! Thanks! 😁

  • @emir.siriner
    @emir.siriner 4 роки тому +1

    Amazing. Very nice. Thanks for share.

  • @ayesharehman4515
    @ayesharehman4515 3 роки тому +1

    thanks man, nice job

  • @yousafzaman8118
    @yousafzaman8118 3 роки тому +1

    This video was very useful to me. Thank you!

  • @davitgogidze4310
    @davitgogidze4310 4 роки тому +2

    Interesting and important content 👌

  • @manish_aravindh_2007
    @manish_aravindh_2007 2 роки тому +1

    Thanks buddy 😊

  • @stb4327
    @stb4327 2 роки тому +1

    it' saved my life

  • @jeeerwin-24
    @jeeerwin-24 Рік тому

    Thank you so much for this video!

  • @frankietsoi10
    @frankietsoi10 2 роки тому +1

    thank you so much!

  • @MirkoMancini
    @MirkoMancini 3 роки тому

    Really thanks for this tut, I need to create same project that change background color at any tab, thanks again

  • @angellongalong5211
    @angellongalong5211 3 роки тому +1

    Thank you!!!!! This tutorial is a big help!!

  • @nareshhidalgo2588
    @nareshhidalgo2588 2 дні тому

    What can I do to make it work on mobile or responsive? When I click on it, it doesn't work.

  • @jacesaints4117
    @jacesaints4117 Рік тому

    It's working! Thank you a lot 🎉
    But can you help me? If I want to use a 2nd tab-window it just checked the tab-window above. So when I click on the tabs on the second tab-window below it just checked the tabs above xD

  • @hiroshinakamura8095
    @hiroshinakamura8095 3 роки тому +1

    Excellent

  • @mattiethekoala5619
    @mattiethekoala5619 2 роки тому

    this is just what i needed, love it

    • @ieatwebsites
      @ieatwebsites  2 роки тому

      I’m glad to hear that! 😁 you welcome!!

  • @dharmendrasingh-oz2uz
    @dharmendrasingh-oz2uz Рік тому +1

    I make fourth tab, but it is not working why?

  • @GeneralTotoss
    @GeneralTotoss 11 місяців тому

    Very useful man!

  • @besttosan
    @besttosan 3 роки тому +1

    Wow! This is great and helpful.

  • @samcrider1446
    @samcrider1446 4 місяці тому

    css master! thank you!

  • @reester1341
    @reester1341 3 роки тому +1

    Simple and easy tutorial thank you very much :)

  • @theartpalette5238
    @theartpalette5238 2 роки тому

    Thank u so much.. like so so much!

  • @rangabharath4253
    @rangabharath4253 4 роки тому +1

    Awesome as always 👍😀

  • @chesckamontes3321
    @chesckamontes3321 2 роки тому

    hi, I just wanted to ask why I'm having a trouble on clicking on the first tab? Like, if I clicked the other tabs u can't go back to the first tab, unless u refresh it. Thanks in advance.

  • @Prokudak
    @Prokudak 3 роки тому

    This is a clever a solution: using radio buttons as tabs. Thank you. How do I make a tab label's width match the width of the tab container?

  • @halabarid361
    @halabarid361 3 роки тому

    when i do display: none in .may tabs .tab , what's in tab disappear and nothing appears when I click it on label.

  • @florakan9759
    @florakan9759 Рік тому +1

    Brilliantly explained. Thank you for a great video. I tried to get the little tabs to display rounded corners but didn't succeed. Anyone any idea?

  • @Sama-jx8vs
    @Sama-jx8vs 2 роки тому +1

    Hello! Can you make a tutroial for responsive tabs? I would love it. Does anyone know of any responsive tabs tutorial I can follow?

  • @i_am_gaming_gamer_game
    @i_am_gaming_gamer_game Рік тому

    Any way to make the tabs size different and place then in the middle instead of left?

  •  2 роки тому

    Is it ADA compliant? How is it supported to people who uses screen readers?

  • @boytuhab
    @boytuhab 2 роки тому

    Hey I added a button but when I click it. it returns to the first tab? Any suggestions?

  • @lumotohoneyqueen2103
    @lumotohoneyqueen2103 3 роки тому

    hello, your tutorial is excellent. I had a problem on trying your code and replacing tag to form and table, the content wont show but the rest is goo. only when i hide it then click it, it wont show

  • @tompluto1
    @tompluto1 3 роки тому +1

    Good Movie, helpful!

  • @buy99now
    @buy99now Рік тому

    Awesome work. Thank you for doing this video ^^

  • @sarabibrahim8312
    @sarabibrahim8312 Рік тому +1

    👏👏👏

  • @pyrageisold
    @pyrageisold 2 роки тому

    how would I allow a tab to have more tabs inside of it?

  • @user-eb6yb7ck6v
    @user-eb6yb7ck6v 2 роки тому +1

    Thanks 🙏🙏🙏🙏

  • @youtubexviii8894
    @youtubexviii8894 2 роки тому

    big thank you ♥i love things with only HTML & CSS
    do you think you can do like a "Side Navigation" with this?

  • @luisfernandoescobar2131
    @luisfernandoescobar2131 2 роки тому +1

    Excelente, gracias!

  • @mirazh8216
    @mirazh8216 Рік тому +1

    thank you

  • @raselmiah4410
    @raselmiah4410 4 роки тому +1

    That’s so cool!!!

  • @ndushmanthaish
    @ndushmanthaish 3 роки тому

    dear sir...How to add Html,Css and Javascript file in to one Html file...Because i want to add Tabs to my eBay listing description.

  • @kimcao5862
    @kimcao5862 2 роки тому

    Hello can I know if this tabs can be hyperlink to each other?

  • @marcellyrangel5419
    @marcellyrangel5419 2 роки тому

    Is there a way to put subtabs inside the tabs? for exemple, inside the "free" tab content, putting 2 more tabs.

  • @kaustubhmokal8947
    @kaustubhmokal8947 4 роки тому +1

    Thank you buddyy ...

  • @rhojeshr
    @rhojeshr 2 роки тому

    Thank you very much

  • @arevev
    @arevev 2 роки тому +1

    ty sir

  • @Timooooooooooooooo
    @Timooooooooooooooo 4 роки тому +1

    That's a very clever trick

  • @ManjunathManja1227
    @ManjunathManja1227 2 роки тому

    Problem with this code is all the input tags inside 'mytabs' will have the same style (like tab)

  • @hkhald01
    @hkhald01 5 місяців тому

    How to make all div have the same height

  • @bird271828
    @bird271828 3 роки тому

    Thank you, this is great. How can I include a 2nd html file in my main html file?

  • @user-ss3km1dv4w
    @user-ss3km1dv4w 2 роки тому

    Nice tutorial man but how do i add images?

  • @ndushmanthaish
    @ndushmanthaish 3 роки тому

    I have downloaded your Html zip file thats working fine... thanks... I have created another Html ,Css and Java file...That 's 3 files only works in the same folder. when I add Html , Css and Javascript file in to one Html file thats not working. How to add Html, Css and Javascript file in to one Html file ...Please help

  • @sajjalahmed7450
    @sajjalahmed7450 2 роки тому

    I have to do it on notepad... so how will i add css part doing on notepad??

    • @ieatwebsites
      @ieatwebsites  2 роки тому

      You can add inline css, instead of external css.