How it works

Welcome to 30 days of JavaScript! This is a 30 day challenge to learn JavaScript, it’s aimed squarely at beginners who want to start their journey into the exciting and rewarding world of web development ... you’ve heard about the salaries right?

If you've tried to learn to code before or have some existing knowledge from another language then this course is still for you. If might be tempting to skip the first few days - I strongly suggest you don't! Going over concepts again never hurts and it will give you an easier ramp in to the course.

One Hour A Day Limit

Every day spend UP TO one hour on this course, working through day by day, lesson by lesson. If you hit the hour and haven't completed the day then spread the days out, that's totally fine. There's no competition here.

Why limit yourself to 1 hour a day? I see many people fail to learn to code simply because they over commit and burn out. The aim is to build a daily coding habit, not to build Rome in a day. So I tell people to aim for 30 minutes to an hour a day. Maybe you can fit in more but if you do 2 hours on Monday and then are too burnt out to do any more until Friday then you're slowing yourself down.

Day Structure

Each day is broken down in to:

• A short introduction on the days topic.
• A series of short lessons with explanations and examples.
• Wrap up.

Extra Detail

Code

Code will be in boxes like this, I've chosen light mode for all code snippets as it is more accessible than dark mode. It's not as /cool/ but for those with sight difficulties it's easier to read. Each line has its number but you can highlight the text and copy it without the line numbers coming with it 😊

1const variableName = "hello";

HOWEVER, while you can copy the code out of these boxes I would encourage you to type the code out into your editor to get used to typing JavaScript. This is more of a concern later in the course when we are making projects and working in a local code editor as in the first part of the course we will be using ...

Interactive Playgrounds

This course includes in browser playgrounds for you to test code and learn by doing. Here's an example below for you to have a play with now. Each time you make a change to the code the console with update.

<h1>Hello World<h1>

    h1 {
      color: red;
    }
  

console.log('hello');

Sometimes the code editor won't execute the code when the page loads, if you think that is the case then place your cursor at the end of the editing area and press return/enter. This will force the code to re run.

Some tips on using this code playground.

1️⃣ The Console will show you a persistent log of everything that the JavaScript code logs with console.log() (don't worry, we will cover this properly soon)

2️⃣ All playgrounds start with working code. As you change the code if you have an error in your code the Playground Console will not show an error, you have three options to work out what's wrong:

1. Click the Result tab next to Console and see if there is an error message in red there.
2. Open your browser developer tools and see if you can find a good error message in there - in Chrome you can open developer tools by going to View > Developer > Developer Tools and then selecting Console in the panel that appears.
3. Simply reset the code with the reset code icon in the top right corner (the one to the left clears the console) and start again.

3️⃣ Having an interactive playground gives you the option to play with real code in the browser, take that opportunity! Don't just passively accept the code and whizz past it. Make sure you read it, change something and get a feel for what the code we are looking at does.

Playground Alternatives

If you would prefer more space for coding then you have a couple of options:

1️⃣ Jump ahead to day 15 where I show you how to set up a local coding environment

2️⃣ Use one of the many online coding sandboxes such as Codepen, replit or Code Sandbox.

Let's go 🚀

Right, enough with the intro, let's get going!