How HTML, CSS, and JavaScript Work

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.

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).

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

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:

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.

The above is the detailed content of How HTML, CSS, and JavaScript Work. For more information, please follow other related articles on the PHP Chinese website!