HTML, CSS and JavaScript Explained For Beginners

In this post, I explain what HTML, CSS, and JavaScript is and why do you need all three of them to create a web application.

As I scrolled through some web development forums, I noticed that more people than one have the following question (or a variation of it):

Why do I need to learn three languages –HTML, CSS, JavaScript– to build a web application?

Each language plays its own part and is there for its own specific use-case. I’ll try to answer it as clearly as possible and explain what each of the languages does.

I won’t go into detail about how to write code for each language, because the in this post is only to understand why web developers need to know that many languages in order to program a website.

HTML

HTML (short for Hypertext Markup Language) is the skeleton of a website and is the very first thing being loaded in the web browser.

Here the developer defines what elements should the website have: Buttons, Images, Text, Links, etc.

Here’s an example of a simple HTML site:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML Site Demo</title>
    </head>
    <body>
        <h1 id="hello">Hello world ๐Ÿ‘‹</h1>
        <p>Welcome to your first HTML site.</p>
        <div>
            <button>Click this button!</button>
        </div>
    </body>
</html>

It only defines a title (will be displayed in the browser tab), a big text, a little text, and a button.

Now, this website looks pretty ugly. The fonts being used, font sizes and colors are all defaults provided by your web browser automatically.

CSS

In order to give the ugly site above some design, we need to add CSS (Cascading Style Sheets) code to the HTML site.

This could be done either in the same HTML file or can be loaded from the .css file. However, it’s not good practice to write CSS inside the HTML. You should always have an external file (or more files) for that.

h1 {
    color: tomato;
    font-size: 70px;
    font-family: sans-serif;
    text-decoration: underline;
    text-align: center;
}

p {
    font-family: sans-serif;
    color: darkgray;
}

button {
    background-color: orangered;
    color: white;
    border: 0;
    padding: 20px;
}

Each definition applies to a group of elements from our HTML site. For example in the first block, we change how the big text looks. We give it another color and font, make it bigger, give it an underline and make it centered on the screen.

The site looks now a little better. But there are hundreds of CSS properties that can be set for all the different HTML tags. This makes it hard to master this language, and not everybody is great at it. But it’s easy to learn the basics and get something decent with a little practice.

Also, there are many CSS libraries out there that gives you the ability to style your site nicely without knowing too much CSS code. A frequently used one is Bootstrap. You can access their code to create beautiful forms, buttons, texts, and other elements.

JavaScript

Our site has now a structure and styling but is missing functionality. For example loading data from another website when clicking a button, changing the text on the website, pretty much anything you can imagine can be done with JavaScript.

It is an real programming language where you have functions, variables, arrays and many other programming tools to create “logic” within your site.

You use JavaScript if you want to add some sort of functionality.

function changeText() {
    let headerTitle = document.getElementById('hello');
    headerTitle.textContent = 'Hello you ๐Ÿ‘';
}

This code snippet is only an extremely simple function that changes the header title to another text.

Learning JavaScript will take up most of your web development time because it has many things to know and virtually unlimited possibilities of stuff you can do with it.

That’s why it is so vastly popular in recent years. There are millions of JavaScript libraries that other people made that you can use in your own project.

For example in this blog, there is a library called Prism that analyzes the code snippets I write in my posts and adds syntax highlighting (making it easier to read for developers) to it.

To make it even more complicated: You can also use JavaScript to write server-side code (or code running locally on your computer), not only in the browser. That’s what is called Node.js.

You have probably heard of JavaScript frameworks such as Vue, React, Angular which are in very high demand right now. They are libraries that help you build applications faster and easier. But it’s not recommended that you start off by learning a framework. It makes more sense to know the basics first.

All three parts work together

You need to know all three languages because they work together.

In HTML you can define elements that have classes or IDs, which you can manipulate with CSS or JavaScript.

You can also change styling from JavaScript with the help of CSS. You could change CSS classes while the website is running from JavaScript.

Bonus: JSON

This is not a programming language, but it’s something important you need to know. It is a format, used to exchange information on the Internet.

Let’s say you write a website that displays today’s weather. For that, you can access a weather API (application programming interface) from a service which offers API access, such as DarkSky. You send an HTTP request to that site and get a response that is not a website, but only “JSON formatted” text.

{
    "now": {
        "temperature": 29.68,
        "apparentTemperature": 29.68,
        "humidity": 0.24,
        "pressure": 1021.44
    },
    "tomorrow": {
        "minTemperature": 19,
        "maxTemperature": 33
    }
}

That format is easily readable by a computer, but for humans, it needs to be prepared so it makes sense to look at. And that’s your job as a web developer.

Summary ๐Ÿ™Œ

If you’re serious about becoming a web developer: Yes, you need to learn these three languages and more. If you want to write code that runs on a server you’ll probably need to learn one or the other language to make it happen (Ruby, PHP, Python, …)

But if you take it one step at a time, there is no reason to be worried.

To summarize:

  • HTML is the skeleton
  • CSS is to make it beautiful (put clothes and makeup on the skeleton)
  • JavaScript adds functionality (add movement to the skeleton)
  • JavaScript kicks ass at the moment ๐Ÿ˜Ž
SHARE ON
HTML, CSS and JavaScript Explained For Beginners

You May Also Like

Leave a Reply

Your email address will not be published.