Code Self Study Forum

JavaScript Study Plan

Learning Resources and Study Groups
#1

Many people come to the meetups and ask how to learn JavaScript. I thought we could brainstorm some ideas here.

Here is one possible recommendation:

If you want to learn a frontend JS framework, I usually recommend starting with Vue.js, because it’s a bit easier to learn than React but similar enough so that what you learn in Vue will be applicable to React. The quickest way to get an idea about how it works is to work through the getting started guide. For React, check out Gatsby.js.

For ES6, check out Mozilla’s ES6 articles and YDKJS’ ES.Next and Beyond.

Leave a comment below if you have additional tips or questions. :slight_smile:

Old Version (before May 2019 update)

The original post contained Codecademy, YDKJS, and then to practice by building many projects like 180 websites in 180 days, but I’ve updated in in May 2019.

5 Likes
#3

I started out with Codeacademy’s course. I finished about 75% of the course but got bored.
Next I read Simpson’s “You Don’t Know JS” which I found to be excellent. I read up to the fifth book Async and Performance. I completed up to generators, async, and await.

The Codeacademy course is good. I really like You Don’t Know JS.
I’d also recommend:

  1. JavaScript 30 by Wes Bos. It’s free and you actually build stuff with JavaScript, HTML, and CSS. I briefly watched a few videos. He has a good teaching style.
  2. Eloquent Javascript by Marijn Haverbeke. The chapter on higher order functions and callbacks was challenging, but excellent. In hindsight, I recommend watching the first four videos of Functional programming in JavaScript series by “Fun Fun Function” before tackling the Haverbeke material on higher order functions.
4 Likes
#4

At the meetup tomorrow I’m hoping to start creating a series of exercises that people can use to learn web development. If anyone wants to contribute we could start it in a Google Doc.

Edit: I got pulled away by other projects and haven’t had enough free time to build that section out. If anyone wants to help with it, let me know at a meetup.

#5

I’m still working on it. Here’s a sample page with a quick draft:
https://projects.codeselfstudy.com/deploy-an-html-page-to-netlify-using-the/

To start, I’m picturing 100-300 very small exercises that people could work through to learn the basics of HTML5 and JavaScript. It will focus on deploying finished results to the WWW in order to make it second nature.

It would be nice to create a simple API in Python that checks for errors. So the user could paste in a URL from their deployed exercise, and the scraper would fetch the page and run tests on it. If anyone wants to practice Python scraping/testing (or writing the instructions for more projects), let me know. :slight_smile:

1 Like
#6

The pages are just quick drafts, but I’ll fix them soon. They also need to be ordered correctly, or it won’t make sense. I have about a dozen more in the drafts folder.

https://projects.codeselfstudy.com/

#8

I’ve updated the top post in this thread with some newer suggestions. Leave a comment if you have other ideas about how to get started with JavaScript. :slight_smile:

1 Like
#9

Wow. I just have to say that this post was TREMENDOUSLY helpful for me. I signed up for an Udemy course and I’m very happy with the teacher and approach(on sale for $12)! Thank you for putting the time and care into creating this resource. I’m going to start “You Don’t Know JavaScript books” soon :slight_smile:

1 Like
#11

For the beginner, I would suggest avoiding React for the first three months since it adds some complexity and frustration that might put you off the coding career path. I think I would also mention that there is an old/new style of JavaScript which can also be strange if you didn’t know about it:

Old

var OctoPrint = require('octo-client');

OctoPrint.printerState(function(response){
  console.log(response);
});

New

var OctoPrint = require('octo-client');

OctoPrint.printerState(response => {
  console.log(response);
});

So it’s good to know that these are equivalent. You’ll find many examples of each type and it’s important to recognize which one you have when you’ve brought in some new example code.

2 Likes
#12

Related to the 180 websites in 180 days site (mentioned in the top post), I just saw a 100 projects in 100 days write-up here:

#13

I loved this from back in the day. 180 days. https://jenniferdewalt.com/

1 Like
#14

Just saw that it was referenced above LOL. :slight_smile:

1 Like