"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > How HTML, CSS, and JavaScript Work

How HTML, CSS, and JavaScript Work

Published on 2024-08-02
Browse:518

What is HTML?

HTML is short for HyperText Markup Language. I know it is a mouthful but basically, we use HTML to define the structure or building blocks of our web pages.

What is CSS?

CSS is short for Cascading Style Sheets. We use it for styling web pages, and making them beautiful.

What is JavaScript?

JavaScript is used to add functionality to web pages. Let me give you an analogy.

Think of a building.

How HTML, CSS, and JavaScript Work

A building in the real world is like a web page on the internet. It has a skeleton or structure – the framing and foundation of the building (HTML).

It can have pretty walls, windows, and tiles as well that finish it out and make it look nice (CSS).

How HTML, CSS, and JavaScript Work

And it can have certain functionality, like being a home, a hospital, or a supermarket (JavaScript).

How HTML, CSS, and JavaScript Work

For example, when we press the elevator button, it comes to pick us up. JavaScript would enable this in our analogy.

A Real Example

Here is a real example. Let's say you want to build a website like Twitter. For the profile, you want to have a layout like this:

How HTML, CSS, and JavaScript Work

First, we use HTML to define the building blocks of this layout. What are this building blocks here?

  1. An image.
  2. Some text indicating the user's Twitter handle (for example, @KarlgustaAnnoh).
  3. Another block of text containing the message (Teaching coding through stories...).
  4. Buttons/icons for editing the profile, Location, link, and date.
  5. Follower count.

We use HTML to add these building blocks to our web page.

Then, we use CSS to give it visual appeal. For example, with CSS, we can make the text bold (like the name), we can make our image round. We can also change the color of the location, link, and date icons, and define their looks when we hover over them.

So, CSS is all about the visual effects. With CSS, we can also create beautiful animations.

Now, most web pages this days are interractive. They respond to our actions like clicks, and scrolls. This is where JavaScript comes in. With JavaScript, we can add functionality or behaviour to our web pages. For example, we can click a button to follow a person.

So, JavaScript is a programming language, while HTML (Markup Language), and CSS (Styling language) are technically not. This means we cannot use them to tell computers what to do. We use them to define the building blocks of our web pages, and style them.

Every web page that you have seen on the internet is built with these three languages. So, the better you learn and understand them and their features, the better you will be at frontend development.

See you on the next one!

P.S. This is my new series. If you are new to coding, and would like some help learning to code, check out The 2 Hour Web Developer.

Release Statement This article is reproduced at: https://dev.to/thekarlesi/how-html-css-and-javascript-work-266f?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3