HTML, CSS, JavaScript … how do they work together?

projectnick
2 min readFeb 7, 2023

When you hear “frontend” development, often times it can get a bit confusing to know what is necessary to learn, what does what, and where to even start! Here is a quick article that breaks down the three key parts to the frontend… HTML, CSS, and JavaScript!

Here’s how I like to break it down:

  • HTML: Skeleton of the website
  • CSS: Styles of the website
  • JavaScript: Functionality of the website

Think of it like building a house. As you are building this house, you start with the structure. The barebones of the house would be the wood, architecture / layout, dimensions, etc, which is what HTML does for a website. HTML provides the structure and content to build a website!

Here’s an example of what something would look built with just HTML:

https://codepen.io/mizandhre/pen/jOGzXVr

Next, you want to decorate the house. You start painting the walls, rearranging the furniture, and organizing what you have, which is what CSS does for a website! CSS is in charge of all the styling you see.

https://codepen.io/mizandhre/pen/jOGzXVr

Finally, you want your house to be functional! Before, you might have had a stove there… but with HTML and CSS, it is just there and maybe looks really nice, but when you try to use it… it doesn’t do anything. That’s where JavaScript comes in! It adds the functionality, interactivity, and dynamic behavior to the website!

https://codepen.io/mizandhre/pen/jOGzXVr

(Although you can’t see it in action, the clock does indeed move)

That’s a quick little guide to show you how HTML, CSS, and JavaScript work together!

Hope this helps (:

--

--

projectnick

Software Developer || Creative || EX-Tech Recruiter/AM