JavaScript 001: Hello! 👋

Welcome to Code101 and JavaScript 001, our miniature course on learning how to code using JavaScript, plus with HTML and CSS.

In this beginner lesson, you will learn the basics of how coding works, and have a go at making your very first JavaScript game.

This course is intended to be combined with a free discovery and free training call with one of our expert coders and career coaches.

If you have not already booked your first call, you can do so by clicking here. Otherwise, enjoy! 🙂

Programming (or coding for short) is simply the act of solving problems using logic.

It’s about taking an idea, breaking it into smaller parts, and coming up with ways to make those parts become something real and exciting.

In this lesson, you will learn the basics of how to code by making a simple quiz. To do this, you’re going to use JavaScript, HTML, and CSS.

alert("Hello World! I'm learning with JS! ❤️")

Challenge

Before we start, it’s important to take our idea and break it down into smaller parts.

Take a moment to think about your goal: an interactive quiz game that tests a user’s knowledge on one or more subjects.

What are the five fundamental features that make up any online quiz?

There are five primary features of any good quiz that are critical to allowing the user to play. These features are as follows:

We could instead have an open text box for the quizzer to answer freely. We could also add extra features, like a timer to add jeopardy.

However, it’s important at this stage to set the scope of our project. Therefore, we shall stick to the features bulleted to keep things simple.

Challenge

Below this section is our online code editing space. Use this to write, copy/paste, and run JavaScript, HTML, and Python code.

Have a go at making a pop up alert in your browser using JavaScript. You can use the code example above for reference.

If you get an error on your first few tries, don’t panic! Have another go, and refer back to our example. Errors are there to help you!

Helpful Hint

Pay attention to HOW the code example above is written, in particular the use of brackets and speech marks to denote each part of your code.

Now that you have an outline of what to make, you can turn these smaller chunks into simple code that can perform each task.

To start, how can you make your question read to the screen? One way is the example we’ve already shown you – by using a pop up prompt:

prompt("What is the capital of Peru? 🤔")


The difference between prompt versus alert is that a prompt asks for a user input that can be saved to memory, and used later.

These keywords plus more JavaScript features are available via the official JavaScript docs by Mozilla. Don’t worry if you don’t understand the guides fully yet – they’re very technical!

Challenge

Have a go at making your own quiz question with the prompt keyword. Remember to pay attention to how you write your code, as anything outside of the requirements of JavaScript can lead to errors.

This approach poses a slight problem. You can only use prompt for text inputs, and you won’t be able to provide multiple answers.

One way to combat this is to provide the answers in the prompt text with the question:

prompt(`What is the capital of Peru? 🤔
Abancay, Huaraz, Lima, or Tumbes`)
prompt("What is the capital of Peru? 🤔\nAbancay, Huaraz, Lima, or Tumbes")

While this works, it means the user can type anything into the input box, including answers outside of scope.

Helpful Hint

Backticks allow you to span text over multiple lines, so the computer doesn’t confuse it for code instructions.

Newlines instead allow you to keep text within regular speech marks as one line.

To provide multiple answers, you need to use more than JavaScript. You now need to learn basic HTML to create answer buttons.

HTML is the language of the web. If JavaScript is the engine that drives our computer programs, then HTML is the skeleton that allows websites to be designed with structure. Like before, you can reference official HTML docs via Mozilla.

Use our online code editor to switch to HTML. When you execute code using our editor, a new tab will open containing the following structure:

<!DOCTYPE html>
<html>
<head> ... insert title, styling here ...</head>
<body> ... insert elements, scripts here ... </body>
</html>

We call our inner structure the document of the webpage. This is how we write directly to HTML, and will be something we expand on to create HTML elements, like our text and buttons.

Helpful Hint

If you’re using a laptop, you can inspect the structure of a webpage by using devtools. Press Ctrl+Shift+I, or go to your browser settings to open and use devtools.

If you are using mobile, don’t worry – this isn’t necessary, just an extra lesson.

You can now combine HTML with JavaScript to create any design you want. But before that, you need to learn how elements work.

HTML documents all follow the same basic structure. They include:

The <head> must always come before the body, but the <script> and <style> tags can come anywhere inside the <head> or <body>.

In this lesson, you are going to write directly inside the <body> of a new HTML document, allowing you to do things like this:

<body>
  <h1>What is the capital of Peru?</h1>
  <p>Abancay, Huaraz, Lima, or Tumbes</p>
</body>

Note the use of <h1> and <p>. These are tags to create a header and a paragraph, allowing you to create logical structure on your webpage.

Challenge

The <h1> tag isn’t the only header tag you can use to manipulate your HTML webpage. Have a go at making different size headers.

Helpful Hint

Think about the <h1> tag logically. If there’s a one, maybe that means there’s a two, and so on. P.S. Be open to making mistakes.

You can adjust paragraphs using <b> and <i> tags for bold or italic formatting. You can also add <u> underlines to text to focus attention.

<body>
  <h2>What is the capital of <i>Peru?</i></h2>
  <p><b>Abancay, Huaraz, Lima, or Tumbes</b></p>
</body>

You can also add elements that make or attach
images, tables, forms, shapes and sections. You can then combine this with CSS, a language that allows you to enhance the styling of elements.

Note that some elements require extra content. For instance, you need to include an src to represent an image’s source (i.e. it’s hyperlink).

To make the button element we discussed earlier, you need to use the <button> tag.

Additionally, you need to give each button a unique name so you can set instructions that trigger when the user clicks on the button:

<button id="hello">Hello world!</button>
<button class="hello">Hello world!</button>

Challenge

Take what you’ve learned and try to show an image in your webpage. Make sure to find an online image you can link to using src.

Next, have a go at making a quiz question using buttons. Give each button an ID of either correct or incorrect.

You’re almost ready to test your first question. You’re now going to add JavaScript that tells the user if they’re right or wrong.

Take a moment to think about what the logic for a quiz might look like. You don’t need any code to start – you can write it out in plain English.

Hopefully, your method looks something like this:

WHEN USER CLICKS RIGHT ANSWER:
    PRINT "CORRECT!"

WHEN USER CLICKS WRONG ANSWER:
    PRINT "INCORRECT!"

Simple. And your code shouldn’t be more complicated than this. Here’s a quick example of how you can achieve this in JavaScript:

<button id="hello">Click me!</button>
<script>
  document.getElementById("hello").addEventListener("click", () => {
    alert("Hello world!")
  })
</script>

This example uses an event listener to actively wait for the button to be clicked. Once clicked, your program can do anything you want it to.

The code works in three steps:

By taking time to think about your problem and breaking them into smaller chunks like this, you can design and build pretty much anything.

Helpful Hint

This example is specific to using a webpage. If we were solely working within a JavaScript program, we could instead use something called an if-statement.

You can now add your own CSS code for styling. Like JavaScript, CSS is able to extend HTML using its designated <style> tag.

All you need to do is specify what element you want to modify using its ID, and give instructions for the changes you want to make to default:

<style>
  #hello {
    color: white;
    background-color: green;
    font-weight: bold;
  }
</style>

In this example, we reference our ID using the hashtag selector (#) for the identifier.

The example modifies three settings: the colour of the button text, the background colour of the button, and the font’s weight (or boldness).

Once again, you can use Mozilla’s official docs to discover CSS settings to modify.

Challenge

Take everything you’ve learned so far and try to make a quiz question that combines JavaScript code, HTML, and CSS.

There are several ways to make sequential questions and sections for your quiz. One way is to hide elements when they’re not needed:

hello.style.display = "none"

In this example, the code hides the answered question on button press, and displays the next question for the user to answer.

In a pure JavaScript program, there are no HTML elements to hide, meaning you’ll need to take a different approach to solve the problem.

One method would be to combine functions with loops, allowing you to display questions after each corresponding function/loop ends.

Challenge

Make five questions with corresponding answer buttons. Make sure to give each element its own unique ID (e.g. question1 for question one, question2 for question two).

Once you have your set of questions, try to hide and show the correct questions and buttons using JavaScript button events.

By the way, this course acts as a sample of what you can expect with full access to our courses. If your dream is a career in tech, we can help.

We provide complete courses in JavaScript from beginner to pro, with 50+ challenges and coding projects to complete.

You also get personalised training and career coaching by our tech experts to maximise your learning and streamline your journey.

At the end of this course, you’ll be able to register for full access to every course on our platform, including updates, plus three 1-hour live training sessions for £999 just £355.

When you register, you also get 24/7 email support to help you learn, solve any challenges, get career advice, and resolve any tech issues.

We’ll also add you to our newsletter, where we share tips and challenges to help you maximise your learning and stay informed of tech trends.

When you’re ready, register below and we will contact you to discuss your first training call.

The final requirement of your program is to inform the user of their final score. Thankfully, this is probably the easiest lesson to learn.

You can store and adjust the quiz score into computer memory by using a variable:

score = 0
score = score + 1

Variables are simply named sections of memory you can use to store data, like text and numbers.

You can give a variable any name you want, so long as it starts with a letter (ideally a lowercase letter), underscore (_), or dollar sign ($).

For each correct answer, you can iterate the quiz score like above. Finally, you can show the score as part of a hidden end-of-quiz message.

Challenge

Combine what you’ve learned to make a complete game of “Who Wants to Be a Millionaire”, the classic quiz game where the higher you climb, the more you win.

As an added bonus, can you go beyond this lesson and figure out how to add lifelines?

Congratulations! You should now have your very own, fully functioning JavaScript, HTML, and CSS version of the classic TV quiz game.

alert("Thank you for learning with Code101 We hope you enjoyed! ❤️")

Make sure to save your code so you can play with others, or show to friends and colleagues.

If you’d like to continue, a reminder that you can get full access to every course on our platform, including updates, plus three 1-hour live training sessions for £999 just £355.

When you register, you also get 24/7 email support to help you learn, solve any challenges, get career advice, and resolve any tech issues.

We’ll also add you to our newsletter, where we share tips and challenges to help you maximise your learning and stay informed of tech trends.

Our mission is to help people like you learn the skills you need to get into your dream career.

If you’re ready to grab your dream tech career with both hands, we’re here to help.

Register below and we will contact you to discuss your first training call: