The 3 Friends: HTML CSS and JavaScript in Web Development

Sharing is Caring : )

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on tumblr
Share on reddit
Share on whatsapp
Share on facebook
HTML CSS and JavaScript

Every webpage on the internet is HTML CSS and JavaScript.

Think of them as the foundational coding languages of the internet.

Just like how Belgians have three languages; French, Dutch, German, webpages also have languages.

HTML CSS and JavaScript

In the case of websites, their languages are HTML CSS and JavaScript. Sure, you may have heard of them, but do you really know how they work?

Web Development is what you see when you go to a website. Check out my ultimate guide to web development.

What is HTML?

What is HTML. HTML CSS and JavaScript

So first, let’s look at what is HTML?

HTML stands for “Hypertext Markup Language”. Hypertext refers to the fact that HTML makes it so that you can click on links in web pages. That’s the hypertext. The words “Markup Language” just mean that it’s something that you use to markup normal English to indicate things. Let me show you what I mean.

HTML CSS and JavaScript, HTML CSS and JavaScript
Image Source: Coding Proton

This is a normal web page. It is in WordPress, and the entire page uses HTML to tell the browser what to do with all this text. Some of it is more important than others, some of it is in tables, some of it is images, and on any webpage, in any browser, you can right-click and view page source, and see all that HTML.

Originally hypertext simply meant that you could click it, but now it means all sorts of things, like declaring headers and tables and images. HTML describes the purpose of text. Then, it is up to the web browser to know what to do with that text.

Now that you know what is HTML? Let’s Jump into What is CSS?

What is CSS?

What is CSS? HTML CSS and JavaScript

So, let’s talk about CSS what the heck is it and how does it work? What is CSS?

A modern-day website is made up of three different files or codes and these files are HTML CSS and JavaScript. HTML defines the structure of a website while CSS defines the overall appearance and style of that website.

CSS is short for “Cascading Style Sheet”. It helps determine things like colors, fonts, and positioning of certain elements, and even a little bit of animation.

The first word of CSS is “Cascading”. So, what does that mean? well, let’s keep it simple and say that you have a website that’s made up of three different sections and in each of these sections is some heading text. Now, let’s say that you want to assign all of these texts with a class of heading two aka h2 and you want them to be open sans font. Well, you can write a bit of code that will change all of them at once throughout the entire website.

Therefore it’s called cascading and you can even assign multiple values such as font, size, color, weight, and more.

It’s not just for text any visual element on your websites such as backgrounds, boxes, headers, footers, images, literally anything can be altered with CSS.

So, the next word is “Style” which makes perfect sense because it alters the style of your website.

So, let’s move on to the third word which is “Sheets”. And by this, I mean Style Sheets which are basically like writing a bunch of custom CSS settings for things like text, backgrounds, images, properties, etc., and saving it as one file aka a Sheet. That you can apply to multiple web pages all with different content and layouts in order to achieve a cohesive style throughout your entire website.

What is JavaScript?

What is JavaScript? HTML CSS and JavaScript

So, What is JavaScript?

All modern web applications that are used through an internet browser are written using JavaScript. Because it has become the standard in developing web applications.

The way these web applications are built is that you have a layer of “HTML” which gets styled and made more beautiful by “CSS” to make this beautiful surface also called “User Interface Smarter” and more intelligent.

We use “JavaScript” to write logic and create features. Examples of such features are,

  • User registration
  • Booking a ticket
  • Online shopping
  • Sharing photos
  • writing messages etc.

I call them “The Three Friends”. HTML is “Hypertext Markup Language” or “The Builder”, CSS is “Cascading Style Sheets” which I consider “The Artist”, and JavaScript “The Wizard”.

They are all different languages and work differently but HTML CSS and JavaScript need one another to make a website.

Imagine you want to code Facebook’s Homepage using only HTML. HTML essentially would define all the content, the text, the images, the links. But without CSS “The Artist” and without JavaScript “The Wizard”, an HTML-only website would look like this.

HTML CSS and JavaScript
Facebook’s Homepage Without CSS

CSS adds the styling to a website. CSS cannot live without HTML or else there would be nothing to style.

Its responsible for outlining the colors, the fonts, and the positioning of the content.

Your website will now look like this.

Now, we come to JavaScript “The Wizard”. Popup air messages, the autocomplete that Search Engines use, that is all JavaScript.

Now that you understand how it works, and the “3 Friends” here are three things to remember about HTML CSS and JavaScript.

  1. They make up what is called front-end web development.

Front-end web development is what you see when you land on a page, as opposed to back-end web development is actually what makes an application on the web work

2. These languages are translated by web browser.

Web browsers like Firefox and Chrome, translate these three languages into a visual webpage. Without a browser these languages are just words on a page. Sometimes because of this, websites look slightly different on Chrome, Firefox, and definitely look different on Internet Explorer. Because all these browsers translate a little differently.

3. These code languages evolve over time.

HTML CSS and JavaScript are constantly evolving. It’s just like any language. These languages have a history. They have been around for many years now. Right now, the standard procedures for HTML CSS and JavaScript are called “HTML5”.

There is even a body and a society online that manages the rules and best practices of how to build for front end web development.

So, in the beginning you actually had HTML controlling a lot visual aspects. You used “<b>” tag to make text bold. You used the “<center>” tag to make your text centered. But over time, after 90s you actually had “CSS” making up most of that.

In the beginning JavaScript was mostly for popups and now it animates most of our websites.

So, whatever you see on the “world wide web”, you have “The Three Friends” to thank for it.

Learning HTML CSS and JavaScript is not that hard as it is described often. You can easily learn HTML CSS and JavaScript even without any prior knowledge in web development.

You can Learn HTML CSS and JavaScript from W3Schools for free.

Sharing is Caring : )

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on tumblr
Share on reddit
Share on whatsapp
Share on facebook

Related articles

Leave a Reply

Your email address will not be published. Required fields are marked *