30 Days Of JavaScript

30 days of JavaScript cover image

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.

Rules

If you want to be successful in this course then there are three rules to live by:

1️⃣ Every day spend up to one hour on this course, working through day by day, lesson by lesson. If you hit the hour and need to spread the days out, that's totally fine. There's no competition here.

2️⃣ Every day post your progress on social media. Any is fine, Twitter, LinkedIn, Instagram, TikTok - wherever, it doesn’t matter, just tell someone you did a day! Every day will have one of these buttons to share to Twitter to make it easy to stick to this and keep up that accountability.

🚀 Share on Twitter

In fact, give that one a click and tell the world you're getting started right now 🚀

3️⃣ Tag me in that post, I'm on every platform 😊

I want to dive back to rule 1 for a second. 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.

Pro Upgrade

The content of this course is freely accessible, there is a Pro upgrade to the course. It's a one off payment of just $25 that gives you access to:

  • Saved progress each time you complete a lesson
  • End of day multiple choice quiz
  • Certificate of completion. Many employers will let you claim back the course of a course if you show a completion certificate, ask your manager if you're unsure.

Extra Detail

Orangey coloured boxes like this represent an extra for that lesson. Usually it's just a deeper dive on a topic or just some extra information I think would be useful for you to know. These are not usually required reading so if your brain is already spinning from the new information then come back to it later.

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.

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!

Outline

Go Pro?

Upgrade to Pro for quizzes, tracked progress and a completion certificate for just $25 🚀

Want more developer tips, tricks and tools?
Then follow me:
FREE Coding Career Quick Start Guide 🚀
Discover the best way to learn to code, how to land a job and valuable resources to help your journey in this free 15 page value packed guide.
Looking to email me? You can get me on my first name at allthecode.co