Introduction

This series of blog posts is meant to get you started in applying the first bits of JavaScript that you have acquired from other sources like freecodecamp.org or MDN.

In this series I will give you some exercises that may be hard for your current level. So don't be afraid to search online for anything that might help you. Even the full solution. Googling is an important skill for any developer.

What Are We Going To Cover

In this blog post series I do not intend to teach you any new JavaScript concepts for now. The idea is to apply the concepts practically to deepen your knowledge and give you a feel for how programming works. A huge part of being a developer is having an intuition on how to approach problems. This can only be achieved by solving a whole bunch of them.

This series tries to focus on HTML DOM manipulation. Basically we are going to change the content of an HTML page. This is what you usually need to do the most as a typical JavaScript developer. Usually with modern web development you will have a library or framework (basically a whole bunch of code written by other people) to help you with that. Nonetheless, it is important to understand how it works and on top of that it is an easy way to get started.

What should I do when I'm stuck?

It's also important to learn how you can dig yourself out if you're stuck. Googling your problem is most often the solution, but you can also explain your problem to someone you know or a rubber duck. Just the process of explaining your code and your problem might help.

On top of that If you can't find an answer or if my tutorial is not clear, I am willing to help you out. Just write me an email to jan (at) jan-herlyn.dev

Prerequisites

To get started with these exercises you should have a code editor or IDE installed on your system. I suggest Visual Studio Code since it is free and easy to install.

On top of that you should know the basics of HTML and the following JavaScript concepts:

primitive values (strings, numbers)
objects (just the basics)
arrays
variables
functions

If you have any doubts or don't know what these are, I encourage you to read the MDN JavaScript beginners guide.

Basic Setup

After installing VS Code, please create a new directory on your computer and paste the following code into a file called index.html.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Learning JavaScript</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="" />
    <script type="application/javascript" src="index.js"></script>
</head>

<body>
    <main id="content">
    </main>
</body>

</html>

Then create another file called index.js and paste the following code.

function init() {
    let element = document.getElementById('content')
    element.innerText = 'Hello World'
}

window.addEventListener('load', init)

The JavaScript code above will execute the function init as soon as the HTML is loaded completely.

When you open the file index.html in your browser you should be greeted with the words "Hello World".

This will be the basis from which we will do all the exercises. For your own web page you don't need much more.

Exercise 0

Just to get your feet wet, your first job is to make the text appear in a heading WITHOUT modifying the HTML.

So after the init function has run, the resulting HTML should look like this:


<!DOCTYPE html>
<html lang="en">

<head>
    <title>Learning JavaScript</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="" />
    <script type="application/javascript" src="index.js"></script>
</head>

<body>
    <main id="content">
        <h1>Hello World</h1>
    </main>
</body>

</html>

You can verify this by the fact that the text will be much larger and bigger or by opening the developer tools in your browser (F12 in Firefox and Chrome in Linux and Windows)

Epilogue

Now that you have gotten started you may finally have an idea on how to create a website in its most basic form locally. Although this is not within the scope of this tutorial, it might motivate you to upload your web page so that you can show it to your friends or your grandma. One simple way to do that is to upload it to github pages, netlify or vercel (phone number required).

To continue learning, head over to the next article.