Languages and Tools of Web Development

Websites have two parts: a front-end and a back-end.

The frontend is the part you see in your browser and interract with. All the visual aspects.

The backend is the part that powers the frontend. It is behind the scenes, and it's mainly about storing data in databases and providing it to the frontend.

So, web development jobs fall into three main categories:

1. Front-End Development
2. Back-End Development
3. Full-Stack Development (which involves both Front-End Development and Back-End Development)

Front-End Developers use HTML, CSS, and JavaScript to build front-ends.

So, now let's talk about HTML, CSS, and JavaScript.

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.

That's it.

You can get my members-only eBook! It's been called "the most practical and informative" Complete HTML, CSS and JavaScript eBook. But it's a well-kept secret. Because it's not sold in every bookstore. The Complete HTML, CSS, and JavaScript eBook(Zero to Mastery) is packed with hands-on advice for understanding HTML, CSS, and JavaScript. From tips, to tricks, and hints, The Complete HTML, CSS, and JavaScript eBook(Zero to Mastery) guides you from beginner to advanced. It's a how-to eBook for people who want to roll up their sleeves and get to work! You can get it here.

I hope you received excellent value in today's article. If you would like to go deeper, head over to My Newsletter, where you can find more great contents that will help you in your productivity, your impact and the quality of your life. I wish you an amazing day.