Can someone ELI5 how html, css and JavaScript link together?

Question

I understand the functions and the languages sepperatly but can't quite grasp the concept of making them working together. Jumping between 3 scripts is also confusing and time consuming.
I want I to build a simple app with multiple button menus that displays either text or images depending on which button is pressed. it's easy to make 1 button and function but when I start branching out to more menus and functions it gets overwhelming and I don't know where each piece of new code should go.

Answer 1

The thing is that you're trying to manipulate multiple elements, not just one, this means, you should be working with "classes" in your CSS and "arrays" in your JavaScript.

Quick tips:
■ HTML: Used to organize and give structure to the content and elements. Some properties are used to either reference a CSS rule to apply style or to trigger a JavaScript function to create interactivity. Important: It can be modified later on using JavaScript!
■ CSS: Used to make everything pretty with style, but it also has this superpower of making elements appear and disappear using the display or visibility properties. Important: It needs to be referenced by an html element, and it can be modified later on using JavaScript!
■ JavaScript: This guy is a beast, it creates and destroys HTML tags or CSS rules dinamically, whenever and whatever you want.

I also created a code for you with the program I believe you were trying to build, it has detailed comments for you to (hopefully) understand the mechanics more easily. And I know at first is difficult to jump between 3 files but believe me, when you work with bigger projects, you will thank yourself for separating the structure, the style and the logic(interactivity), it makes maintenance a lot easier 😊

https://code.sololearn.com/WmhO3USSGhR4/?ref=app

Answer 2

think of it like this: html is the foundation and structure of the building, css is the wallpaper and decorations, and Javascript is the light switch and wiring.

you use html to designate where things should show up and where things generally should be. you apply css to the html to give it a look and feel. Finally, Javascript is used to add extra functionality to the site.