DEV Community

loading...

What You Can Achieve with 30 Days of JavaScript30 Challenge

liaowow profile image Annie Liao ・3 min read

JS30 cover

There is more to vanilla JavaScript than meets the eye.

At least that's what I discovered after completing Wes Bos' JavaScript30 Challenge 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

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.

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
JS30 demo2
JS30 demo3

4. Create Console Magic

Remember my previous post 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():

┌─────────┬─────────────┬───────────────┬──────┬────────┐
 (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  
└─────────┴─────────────┴───────────────┴──────┴────────┘
Enter fullscreen mode Exit fullscreen mode

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

6. Witness the Power of Window Object

Sure, you can browse through the documentation 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. It was also interesting to see how others used different approaches to the same challenge.

JS30 repo


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!

Discussion (0)

pic
Editor guide