What You Can Achieve with 30 Days of JavaScript30 Challenge
Tags: javascript, webdev, css
Published: 2020-10-10 17:27:46

![JS30 cover](https://dev-to-uploads.s3.amazonaws.com/i/ibunvefphkr79qsx6gef.png)

There is more to vanilla JavaScript than meets the eye. 

At least that's what I discovered after completing Wes Bos' [JavaScript30 Challenge](https://javascript30.com/) in 30 days.

If you have not heard of JavaScript30 Challenge, it is a **FREE** video tutorial consisting of 30 coding exercises/challenges, each of which focuses on a specific JavaScript feature.

So, what can you achieve by completing these challenges? Here are 7 key takeaways from my own rewarding experience:

### 1. Save Time and Money

Did I mention this tutorial is **100% free**? Also, most videos are less than 20 minutes long -- you can even build a cool-looking feature within 5 minutes of code-along! 

![JS30 course list](https://dev-to-uploads.s3.amazonaws.com/i/m6e4isilb4lezhzzmlaz.png)

### 2. Laugh Along with Wes Bos

Laughter is contagious. Couple that with Wes Bos' enthusiastic tone throughout the tutorials, you are bound to have an enjoyable coding journey.

As a side note, it was through this tutorial that I found out about the ["BADASS" CSS colors](http://bada55.io/).

### 3. Build on Top of Beautiful Design

Speaking of CSS, every course comes with unique pre-built CSS styling, which makes each feature already visually appealing before you start coding.

This is an irresistible bonus for visual learners out there.

![JS30 demo1](https://dev-to-uploads.s3.amazonaws.com/i/m6qc8ov6wj70d0bny5yu.png)
![JS30 demo2](https://dev-to-uploads.s3.amazonaws.com/i/2l05n6yjb3ue5uf7qd7y.png)
![JS30 demo3](https://dev-to-uploads.s3.amazonaws.com/i/kt2znnqa34pur4lxr17e.png)

### 4. Create Console Magic

Remember [my previous post](https://dev.to/liaowow/beyond-console-log-3-ways-to-format-console-outputs-in-javascript-236p) on multiple ways to format console outputs beyond `console.log`? Well, I wouldn't have known about all that were it not for JavaScript30 tutorials. 

Here's a quick demo of `console.table()`:
```js
┌─────────┬─────────────┬───────────────┬──────┬────────┐
│ (index) │    first    │     last      │ year │ passed │
├─────────┼─────────────┼───────────────┼──────┼────────┤
│    0    │  'Albert'   │  'Einstein'   │ 1879 │  1955  │
│    1    │   'Isaac'   │   'Newton'    │ 1643 │  1727  │
│    2    │  'Galileo'  │   'Galilei'   │ 1564 │  1642  │
│    3    │   'Marie'   │    'Curie'    │ 1867 │  1934  │
│    4    │ 'Johannes'  │   'Kepler'    │ 1571 │  1630  │
│    5    │ 'Nicolaus'  │ 'Copernicus'  │ 1473 │  1543  │
│    6    │    'Max'    │   'Planck'    │ 1858 │  1947  │
│    7    │ 'Katherine' │  'Blodgett'   │ 1898 │  1979  │
│    8    │    'Ada'    │  'Lovelace'   │ 1815 │  1852  │
│    9    │ 'Sarah E.'  │    'Goode'    │ 1855 │  1905  │
│   10    │   'Lise'    │   'Meitner'   │ 1878 │  1968  │
│   11    │   'Hanna'   │ 'Hammarström' │ 1829 │  1909  │
└─────────┴─────────────┴───────────────┴──────┴────────┘
```

### 5. Move beyond Keyboard and Mouse Clicks

Did you know that you can create a selfie maker, a webcam camera booth, or a voice changer using plain-old vanilla JavaScript?

![JS30 webcam fun](https://dev-to-uploads.s3.amazonaws.com/i/864irnnfs4q2hicot6kd.png)

### 6. Witness the Power of Window Object

Sure, you can browse through [the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window) on this powerful Web API. But nothing beats putting those objects and properties in practical use and watching them shine.

### 7. Explore Journeys of Coders around the World

Born and raised in Taiwan, I was delighted to see some Taiwanese flags🇹🇼 among the [list of contributors/fellow learners](https://github.com/wesbos/JavaScript30). It was also interesting to see how others used different approaches to the same challenge.

![JS30 repo](https://dev-to-uploads.s3.amazonaws.com/i/cpaum4caz2oq6xjmaxhz.png)

<hr>

As someone who sped through JavaScript fundamentals and hopped on the fancy world of JavaScript frameworks, the 30-day challenge has truly made me appreciate the power of vanilla JavaScript.

Most importantly, it gave me a pleasant change of scenery after weeks of grokking algorithms and data structures.

A big shout-out to Wes Bos and those who share their journeys as featured in the [JavaScript30 GitHub repo](https://github.com/wesbos/JavaScript30)!