When you just start of learning web programming, I believe you might have heard about HTML, CSS and JavaScript but never know what are they. In this tutorial, we will talk about what is HTML, CSS and JavaScript and what do they do.
An Overview of HTML, CSS & JavaScript
When I was a beginner, I always think the relationship between the HTML, CSS and JavaScript are just like Python and PHP that playing the same role. But soon I realize, the HTML, CSS and JavaScript each of them are playing a completely difference role and they work seamlessly together.
- HTML: A markup language that provides the basics structure of the site to be displayed in a web browser.
- CSS: A style sheet language that uses to control HTML styles including colors, font styles, layout and many more.
- JavaScript: A programming language that allows you dynamically control your HTML and CSS on your web page to make your site more interactive.
So what are they?
HTML
HTML stands for HyperText Markup Language. It’s the core markup language of every web page. With HTML, we use it to build the structure of the website block by block with HTML elements. This is all the web programmer start from and it’s super easy to learn.
Let me show you how it looks on my website with pure HTML code (without CSS and JavaScript).
It looks weird, right? In our site, we’ve use the CSS style sheet to hide the menu items on hamburger menu when browsing on a mobile page.
To show you how a pure HTML web page looks like and we removed the CSS code from our site and now the content inside the menu are automatically open up.
Now, what if we add the CSS code to the site?
CSS
The CSS stands for Cascading Style Sheets. Obviously, CSS is a style sheets, it’s able to control how the website looks like and how the website should appear at the front-end of the web page.
As we said, the HTML are building the structure of the site and now we are using the CSS to make the site looks great and better.
If HTML is a black and white cartoon character, then the CSS is to add color and decoration of it.
Let me show you how it looks after add CSS to my site.
From the picture above, you can see the color of the website title and we change breadcrumbs to the white color. It hides the menu inside the hamburger, and the appearance looks better. It feels like a plain text website now renovated with decorations.
But now, there are a few buttons on my site. When you click on the buttons, there did nothing yet. To make it more interactive, you need to add JavaScript.
JavaScript
When you’d like to make your site more interactive or add motion logics to your site. We use JavaScript to implement it. For example, you can display a pop-up window or dynamically change the HTML and CSS code with JavaScript.
I added the JavaScript code to my site. Before adding the JavaScript code, the site buttons are not clickable. Now, I can open the code snippet, one click copy and even run the code on my website. You can check out the demo video at below.
I hope this will help you understand more about HTML, CSS and JavaScript. If you have questions, please let me know!