How to create Tabs using HTML, CSS, and JAVASCRIPT

Nice animated tabs using HTML CSS and javascript.........
========================
custom range slider: • Custom range slider us...
-----------------------------------
Input animation: • Input animation using ...
#html #css #javascript

[@RupeshJoshi-sk3vi]

ok, now how to make it appear in the same page in screens with varying dimensions. i made it in a bigger screen but now if I open it in a device with smaller screen, the line is misplaced. please make a video on it as well

[@user-zk6pi4nn8n]

verrrrrrrrrrrrrry
gooooooooooooooooooooooooooooood

[@chrisgraham9022]

Very helpful, thanks!!

[@simplecode933]

you are welcome 🙂

[@user-wt1tn7oh3q]

best way to do it bought me about an hour

[@philip6540]

U are so Simply and smart Thank you

[@simplecode933]

Thank you 😊

[@usedom3605]

Great Tutorial!

[@charmcaster2549]

what about if you want the box to stay in place if it has a lot of content?

[@sunnymilkyboy7664]

Greatt ❤ logic

[@Alaa1Eddine]

How can I separate the codes in Tab 1 from Tab 2, so that the first code does not affect the second code?

[@sh9vch9nk0]

Great video, thank you! 💓💓👍👍

[@simplecode933]

Thank you too

[@storyPlus12]

Nice project thanks brother

[@simplecode933]

Most welcome

[@ob5804]

@@simplecode933 And if there are still blocks with tabs, how then to rebuild it all??

[@zohidilloturgunov7337]

awesome🤩

[@simplecode933]

Thank you 😊

[@sabaSaba-zc4hq]

Thanks bro you saved me❤

[@simplecode933]

Welcome ❤️
Subscribe for more videos 🙂

[@user-ew9ep3pp2j]

Thanks a lot for this video. 😘

[@simplecode933]

Welcome ❤️
Subscribe for more videos 🙂

[@bilalnaeem7158]

Brilliant logic sir great🎉

[@simplecode933]

Thank you and keep supporting ❤️

[@brukearn7976]

Thanks very simple!

[@simplecode933]

You're welcome!🙂

[@English-Is-Not-Difficult]

Thanks for help i do not copy your html code but I use css of display block and animation and js for active tab show as active. at this time 4:14 Am I am bussy in making tool website. Comming soon awsome website

[@snap_journey]

Really really nice background music 👌 bro🤘 keep going 💯

[@simplecode933]

Thank you 😊

[@baltaza]

Bruv, you saved my lifeeeeeeeeee

[@simplecode933]

Thank you and keep supporting ❤️

[@user-nw3hv3eq5g]

thanks for the solution

[@simplecode933]

Thank you and subscribe for more videos ☺️

[@user-yi3rq7jk2r]

i love it too

[@simplecode933]

Thank for your support ❤️

[@ultrAbdu]

how can i do this responsive for mobile?

[@rkaawkaa5858]

When positionning the line, how do you know the property top should be at 62px exactly please ?

[@simplecode933]

Yes, I put it like randomly 55px, 60px and 62px...... It fits on 62px

[@daveandrew7097]

or you can just use bottom: 0;

[@immortal2004]

source code please?

[@iVyper211]

I'm having an issue where the line does not pop up and is hidden behind everything. I copied everything and looked everything over, any solutions?

[@simplecode933]

Are you talking about indicator? Send me the picture of that issue on my Instagram 🙂

[@anthonylie4588]

Hey bud, thank you for this wonderful video. Small qn tho, i tried inputting the javascript portion into a js file(instead of script tag in html file) but the line portion wont work. Any idea why?

[@simplecode933]

Are you talking about the blue color line indicator? or the entire js code is not working?
if the js code is not working can you check js file is appropriately linked to the HTML file........ or DM me on Instagram with screenshots of the code.

[@anthonylie4588]

@@simplecode933 talking about the blue color line indicator. I cant make it move to the other tabs after pressing them. It only stays at 'Home'. This is only if i input the code in the js file tho. Works perfectly fine if i input under script tag in html file.

[@Zacban]

@@anthonylie4588 Did you remember to put the script import at the bottom of the html file?

[@mbahfavour3614]

please can i get the course code

[@Rama-gl3yz]

*source code

[@uzayrsonday8514]

how do you only have 1.3K followers wtf

[@nepalihoni9213]

OP Brother/Sister

[@simplecode933]

Thank you and keep supporting ❤️

[@LokeshBorse-fe4oy]

thank u

[@simplecode933]

You're welcome!

[@user-ff3us4we9p]

please Help me when i open a site the first tab should be always open please help me in this

[@simplecode933]

you need to mention the class name active in the HTML page, so when you open the page it will show the tab in which you mention active class name to the tab.
still, if you have doubts please DM me on Instagram.

[@hasanali-gh5bx]

merhaba videonuz kesinlikle harşka ancak keşke videonun kodlarını da paylaşsaydınız harika olurdu

[@ultrAbdu]

niye bedavaya paylassin, millet gelip kopyalasin videoyu izlemesin diye mi? izle videoyu yazarak yap iste

[@senthil5031]

Nice video. It is very helpful. how The line left px will change based on the screen size. How to fix the line positioning left automatically for the different screen size

[@collapsingspace]

Use a psuedo ::after element for each button and position it relative to be a little lower than the original button. Keep its display none and then onclick you can enable the display for the psuedo element you can give its height like 10px and width will be 100% so same as original button

[@v0xj]

Doesn;t work on 11 buttons

[@mariarai793]

Hi, thank you for the solution! How can I make the line fill in the left space when Home is pressed and the right space when Cont Us is pressed?

[@simplecode933]

Yes, it is easy just follow my steps 🙂
1) There is a class name "tab_box" that change the justify-content property value to "justify-content: space-between; " (in the CSS file)
2) Now let's change the indicator which is the class name "line" and change the top property to "0px"(in the CSS file)

[@mariarai793]

@@simplecode933 Perfect, thank you so much!

[@simplecode933]

Welcome 😊 and keep supporting me 🙂

[@dubfy]

code pls

[@TutoMaster]

It is simple
I think It are hard

[@user-yi3rq7jk2r]

please build animaiting web page with html css and more js

[@simplecode933]

Okay sure 😊

[@user-gb2lj3zm7j]

thanks from Ukraine !!!💙💛🤟🤟

[@simplecode933]

Thank you too🧡

[@mlandowethukhumalo9580]

Life saver 🫂

[@DaMu24]

Not a fan of many of the code practices used here...

[@storymationpresents6106]

It’s my first day I got the hang of it don’t worry add interest and as a beginner copy and remember which code functions what sooner and this will practice your mind to code without assistance after that.

[@youth991]

btns.forEach(btn => btn.classList.toggle(“active”, btn === e.target);
😑😑😑