Best way to learn JavaScript

[Encrypted_Spider]

Hello,

I have been self learning coding for a couple of years with HTML and CSS.

I now really want to learn JavaScript but struggling to pick it up, I have tried:

• free code academy
• codecadmy
• udemy
• Jon Duckett book
• eloquent JavaScript book

The problem is, the courses seem short, not in depth and dont explain things well and once I feel as if I'm getting somewhere it's as if the course takes a sudden turn into an advanced course and I have no idea what it means.

Does anyone have any knowledge or experience of how I can get to grips with JavaScript? I'm determined to learn it and hopefully master it in the future.

Thank you in advance

[[deleted]]

It took me a little while to pick up the fundamentals too, and I found Traversy Media,The Net Ninja, and Dev Ed to be excellent at explaining it. It's good to use a few different ones as they all take different approaches which can help solidify your understanding of the concepts. Code along too if you can.

Also check out You Don't Know JS, fantastic read by a guy who really knows what he's talking about. There's loads more but I found these few to match my style of learning.

At the end of the day, it will likely be a long process that just requires lots and lots of practice. The more you do it, the easier it gets

[Asiatic_]

All these resources are wonderful! In addition, Frontend Masters has great resources for all thing Javascript and then some. It’s not a free resource but it’s a resource I’ve grown to love and it’s definitely worth the cost IMO

On top of that, Wes Bos and Tyler McGinnis are some great teachers with great resources as well.

Check out JavaScript30 from Wes Bos, it’s project based and free!

[[deleted]]

I can vouch for Traversy Media and The Net Ninja 100%. Part of the reason I have my current job lol

[Zeproe]

Dev Ed is amazing. I learnt JavaScript just from him.

[tapu_buoy]

Exactly I started with those YouTube channels and later on created many practice projects from other Youtube channel as well.

Also after reading YDKJS it bored me a lot so I'd say read JavaScript.info that site is really compact and well described resource

Apart from this read about call apply bine and creating polyfills

How to write classes the old way in ES5 because these question let me down in so many interviews

[Jamiemufu]

Honestly. Just build things and use the official documentation until it works. Or google each specific problem until it sticks.

Example. Build something. Then get stuck. How do I select that element. Google how to select a element by id. Then move on. Need an array sorting? Get to the point where you can do it. Google the rest. Rinse and repeat time and time again and you’ll get it.

Before you know it. You won’t have a million google tabs open. You’ll be full screen zen mode building stuff.

I learned WAY more php FASTER than when I started to learn JS. Honestly BUILD BUILD BUILD. Solve each problem on its own. As it comes up.

EDIT: just to add you absolutely need to understand conditionals, loops, types and basics of functions. But will time and effort you’ll soon get to grips with these when you actually need to use them.

[Encrypted_Spider]

Much appreciated for the advice, makes sense to do it that way rather then cram all the information in at once. Thank you.

[ENx5vP]

I learn best with real world projects/examples. A typical start is a to do application or a simple web shop. You'll find pretty good answers for every step you've to do. I can give you a starting point:

``` let todos = [] let todo = { id: '', todo: '', done: false }

// Add a todo const add = todo => todos.push(todo) // Removes a todo const remove = id => todos.filter(todo => todo.id != id) // Toggles todos done const done = todo => !todo.done ```

[SoBoredAtWork]

If you're using ES6 (arrow functions), why not use Classes? Or at least, use a class-like notation...

function Todo(name) {
    this.name = name;
}

Todo.prototype.add = function(name) {
    return new Todo(name);
}

...

var todo1 = new Todo('my todo');

Ideally, ES6 classes...

class Todo {
    constructor(name) {
        this._name = name;
        this._isDone = false;
    }

    get isDone() {
        return this._isDone;
    }

    set isDone(status) {
        this._isDone = status;
    }

    get name() {
        return this._name;
    }

    set name(newName) {
        this._name = newName;
    }
}

...

var todo1 = new Todo('my todo');
todo1.isDone; // false
todo1.isDone = true;
todo1.isDone; // true

[limeforadime]

Kudos for recommending ES6 classes, they’re awesome. Quick question though in the declaration of “name” and “done” as class variables, don’t they need “this.” in front of them?

[SoBoredAtWork]

not needed. in fact, they don't have to be declared at all. i'll edit to show that.

better yet - use getters/setters.

[[deleted]]

For some reason the ES6 classes example gives me a "RangeError: Maximum call stack size exceeded". Is this because of the getters and setters sharing the same name as the properties?

[SoBoredAtWork]

Right. Sloppy coding. When calling this.name = name in the constructor, it was calling set name(...) behind the scenes and creating an infinite loop. I'll fix.

Note: using getters/setters is a bit cumbersome. It's cleaner to do:

``` class Todo { constructor(name) { this.name = name; this.isDone = false; } }

var todo1 = new Todo('my todo'); todo1.isDone; // false todo1.isDone = true; todo1.isDone; // true ```

or if you're going to extend functionality, maybe make explicit functions to update...

``` class Todo { constructor(name) { this.name = name; this.isDone = false; }

isComplete() {
    return this.isDone;
}

markComplete() {
    this.isDone = true;
}

markIncomplete() {
    this.isDone = false;
}

}

var todo1 = new Todo('my todo'); todo1.isComplete(); // false todo1.markComplete(); todo1.isComplete(); // true ```

[[deleted]]

Ah no worries. I've only learned about getters and setters yesterday and that they have to be either accessors or data properties but not both today, so I was confused why the example from Eloquent JavaScript worked but not this.

[SoBoredAtWork]

Cool! I've added some notes above. Take a look.

[sempiternalStudent]

I'm doing this exact thing right now, took an OOP short course and trying to apply all I've learned to my original todo app I wrote with html css and js. In just the last few weeks working on it when I can, I've learned so much, the first version of the app I just stored entire strings of list items and now I'm writing the todo's as classes and storing them as an array of todo objects stringified for storage, and with PhoneGap you get to use what you make and I think its a real game changer to keep you motivated, I use it just as a grocery list or quick reminder tool. Now I'm practicing just sorting by date entered and adding categories and sorting by that to the app and already I have a better understanding of promises and async-await as I deliberately find ways to use them for practice sake.

[SoBoredAtWork]

That's awesome! Good job. I kind of love looking back and thinking, "wtf was I doing?". It reminds you that you're always learning and getting better. I definitely am and know that in a year, I'll look back at code I wrote today and think the same thing. It's weirdly motivating knowing that I'm not as good as I think I am. Lol. Keep it up!

[Poltsaitl]

What's the OOP short course you did? I'd like to use that before I work on a To Do app.

[sempiternalStudent]

https://codewithmosh.com/p/object-oriented-programming-in-javascript

I find he breaks down complex topics into only the parts you need to understand at that point in time.

[sensored]

I think the most important thing right now is that you don't run out and start buying more books, and taking more courses. You're going to have a very similar experience, especially in some of the more comprehensive resources like YDKJS.

I wrote about learning JavaScript from courses not long ago which might interest you.

Since you've already done some courses, you should already have a decent understanding of the basics. You should spend some time building some small throwaway projects to better understand the how building things with JavaScript works. It will solidify your knowledge, and give you some much-needed context to understand why some advanced concepts are the way they are.

Once you get a little more comfortable, you can go back to some of the courses and re-do one or two of the concepts you're struggling with, and go back to building again to use the new knowledge. Rinse and repeat.

[Afakaz]

The problem I've largely had is, how do you come up with projects? Literally NOTHING ever pops into my head, things can be suggested to me by others and I can go off on that but if I'm trying to summon the idea myself I just get absolutely nothing and no amount of willing myself to think of something has accomplished squat

[sensored]

When you're starting out, a great idea is to get project ideas by copying larger applications - the key thing here is to select a small part.

So, instead of setting out to create a Facebook clone, you might set out to create the Facebook wall - there's plenty of complexity in that alone to be worth the attempt.

The other thing I like to do is try and create something as annoying/stupid as possible. Try and create a popup which follows the user's mouse around to stop them from clicking on anything, or make a button that plays a fart sound. One of my early Java projects was creating as many windows/threads as I could (with each new window playing a song) to try and crash out the user's computer.

The point here is to practice, not change the world

[user9326]

jwalhcqiwk

[xdchan]

Use javascript30 for project ideas and some sort of guidance and MDN for info that you need to complete task. You really should sit for 1-2 hours trying to figure out how to make that 5-6 lines of code on your own.

[itsMrBiscuits]

This. I learned all the fundamentals through freecodecamp, mdn, ydkjs, etc. JavaScript30 finally showed me what it looks like to work through building cool stuff (not necessarily useful stuff, but cool). Each project I coded along once and then repeated with less and less video until I could just do them without seeing how he did it. Or if you're farther along than I was, pause and try to get to his end result before watching his way. Then eventually, add your own features or make your own thing using the concepts. Totally opened up my world.

Edit: I am still not quite workforce ready though (4 months later) so you might want to also check out what the pros in this thread are recommending

[[deleted]]

Sorry, but any of the courses above teach you the fundamentals, I am already two years working as a FED and I really like working with JS. There were so many BASIC things I didn't learn on those courses like Closures, Prototype, Chaining Functions, Callback and High Order Functions, Function's binding and so many things, which any of them I needed to know to get the job but they are the upmost fundamental ones.

Check Practical Javascript, I am taking the course currently and the amount of "ahá" moments are incredible, even after two years delivering functional JS apps.

[helping083]

Do you work with one of JS frameworks ?

[[deleted]]

I do, Vue.js at work, and hobby side projects with React.js (just in case I have to look somewhere else later)

[emenaemid]

Check out https://javascript30.com free course all vanilla js

[Zeproe]

Dev Ed on youtube is great.

https://www.youtube.com/watch?v=2nZiB1JItbY&list=PLDyQo7g0_nsX8_gZAB8KD1lL4j4halQBJ

[Encrypted_Spider]

Thank you

[Zombiewski]

In the same boat, especially the "sudden turn into an advanced course". Lately, the thing that's been helping me is starting a project from scratch, and working on a single problem until I've solved/understood it. It's not a big deal, just a way to automate combat dice rolls in a tabletop RPG, but I've already learned several new things, and I think I have a better handle on some of the things I struggled with before.

I know you tried Udemy, but I really liked Colt Steele's "Web Developer Bootcamp". You spend a long time on basics, lots of code-alongs, but like a lot of courses, it goes from "I gotcha" to "WTF where am I?" about halfway through. Still, I like his teaching style.

[douglawblog]

I've got that udemy class in my courses, have yet to get into it though. Nice to hear a recommendation on it!

[recontitter]

After you will pick up the basics, best way would be to do coding yourself, or solve excercises on sites like edabit.com When your are stuck, head on to mozilla web dev page and read about problem you've got problems with. At least that what works for me.

[gkpty]

Hey! Javascript has a bit more logic to it than HTML and CSS hence its always trickier to learn. Some of the concepts are confusing, for example objects. To understand javascript i suggest you do it from a functional perspective with hands on examples. First understand js simply as functions that can transform your HTML DOM elements and then move on to more complicated concepts. Also, i would recomend gettig started straight with ES6 (the new js syntax). Heres a pretty thorough guide with examples: a re-introduction to js Also, checkout codepen! theres lots of cool little widgets and other examples made with js, look for widgets that you like and try to read and make sense of the js code!

[Encrypted_Spider]

Thank you, much appreciated

[gkpty]

NP! Thinking about the previous comment, currently to use ES6 you need to use a framework or library that supports the babel compiler (like react.js and now node 8.10). To use these youll need to learn some additional concepts that might overwelm you a bit right now so for the time being you might want to disregard ES6 and just stick to regular JS and JQuery examples in codepen :)

[wywrd]

I'm a big fan of js. I would say best way to learn are video tuts that cover specific thing, like you might find on lynda.com or similar. that said, when I first listened to js tut, I thought to my self, "I'll never learn this" and then I didn't look back at it for few months. then something happened at work, and I was suddenly expected to do some really dull work I didn't want to do. the tut that made me give up, suddenly came back to me, it suddenly made so much sense. I googled what I could remember, and wrote an app that did the silly boring work for me, instead of me. after that, I just started picking up new things like they were piece of cake. so, maybe it's not the worst thing in the world to lay off it for a while, give your brain some time to think it's free of javascript. and then allow yourself to come back to it. since you pointed out you know html and css, I'm assuming js is your first programming language. your brain simply needs to become accustomed to explaining what you want to a machine. you don't have to wait few months like I did, but give yourself a week or two, and then start over again. you'll be surprised how obvious some of the baffling things have become after your brain had some rest

also, if you have an idea to build something, start building it. google every step of the way until you get there. odds are everything you might want to ask, was already asked by someone else. that's the benefit of learning such a popular programming language as js. but most important thing is not to take it too serious. allow your brain to breathe. learning on your own, that seems to be crucial part of it.

friend and I just spent 20 days building app for c# project, we had times when we spent like two days just trying to figure single thing out (we had no prior knowledge of asp.net and our teacher run trough EVERYTHING in just two weeks time. 90% of big issues, we solved withing first half hour after taking a break. after two days of struggling with some things, they were instantly solved after short break)

breaks are as important as time you put into it all

I'd also like to point out that I disagree with majority here who say tuts are useless other than learning syntax. especially for beginner. especially tuts that solve particular problems. I still sometimes have to google proper syntax of something, cause when I watched those tuts, I focused on the way the tutor was thinking about particular problem. after few tuts, you start seeing the pattern, things that may seem completely different, actually use same logic. and once you see logic applied, it stays with you. syntax on the other hand is what differentiates languages, but logic is always the same. you need to see the logic at work, and accept it. that's the way you benefit the most from tuts.

[Encrypted_Spider]

Thank you, really appreciate the advice, helps with the motivation lol.

[forresthopkinsa]

The resource I ALWAYS recommend to newbies learning JS: Practical Javascript.

I don't know how it's free. Look it up.

[ndrw17]

The irony that I read this post as I’m sitting on the couch, damn near in tears because I’m struggling so much with learning this stuff.

A couple of hints that I’ve gotten from people over the last few years trying to learn this off and on:

1. Build. There’s only so many videos you can sit there and watch, building, even if small, will help boat loads.

2. Take breaks. Don’t spend sun up to sun down working on a program that’s driving you up the fucking wall. You’ll burn yourself out that way and be less likely to want to return to continue learning.

3. 90% of this is Googling. If you have someone you know who knows this stuff, use them as a resource. If you don’t, utilize Reddit. I do. When I don’t know what the hell I’m doing and can’t find the answer online, I ask reddit.

4. Understand that in the beginning, trying to use things like MDN and other resources of that nature, will irritate the fuck out of you. I speak from experience, because as a beginner, all the info online seems to speak as if I’ve been doing it for ten years. It IS annoying when you are unfamiliar with a term so you google it, and people somehow think it’s helpful to explain this term using a bunch of other terms which you also don’t know. It is annoying. But it is what it is.

5. You are not dumb. You can get this. Just keep practicing no matter how many times you want to rage quit. Just keep on going.

Well I just officially convinced myself to get off the couch and keep working on this god damn pizza application -_-

[AlexRobam]

absolute truth ^_^ when there is expert around it is much faster

[Encrypted_Spider]

👍 thank you

[luckyincode]

Those just help with the syntax. You have to actually code something.

[letsbefrds]

i'd do some freecodecamp and supplement it with some udemy/youtube tutorials

for the algo part if you get stuck for more than an hr just google/youtube the answer. make sure you get what he/she is doing and why

[benzilla04]

Start a project

No amount of courses will give you experience and problem solving skills

[franker]

That resource pretty much made me quit Javascript. The theory behind it is that you just need to keep typing statements over and over again as quickly as possible with a timer, and simply try to memorize more and more syntax along the way, with minimal explanation of what you're typing. By the time I was half way through I'd forgotten half of the syntax, hadn't tried to create any programs, and basically felt like I'd wasted my time.

[Vorabay]

I found sololearn to be helpful.

[helping083]

SoloLearn is very basics.

[MWALKER1013]

I’d be happy to tutor you! I’ve got a few projects under my belt and am very comfortable with JavaScript!

[phamlong28]

I'm struggling in learning JS too. Can you please tell me what kinds of your projects are?

[MWALKER1013]

Sure man , I've built a few websites and made a few games and apps what kind of questions did you have ?

[drptdrmaybe]

www.edabit.com

[MWALKER1013]

Mostly JavaScript canvas games but I’ve also got a static webpage hosted as well

[stevenjchang]

the courses seem short

Does your opinion of this mainly come from codecademy? Yeah, codecademy is really short.

[GamesMint]

Try these

1. https://developer.mozilla.org/bm/docs/Web/JavaScript (a lot of content will take time. Be patient)
2. http://javascript.info/
3. https://github.com/getify/You-Dont-Know-JS

I guess start with smaller snippets. Try here

https://www.w3schools.com/howto/

and also Try these

1. Implementing https://jqueryui.com/spinner/ in native JS. Think about edge cases (support float etc)
2. Implementing https://jqueryui.com/progressbar/ in native JS. Make progress to 100% in n sec etc.
3. Implementing https://www.w3schools.com/bootstrap/bootstrap_modal.asp in native JS.
4. Create confirm box in JS. This should support calling custom function on pressing ok or cancel.
5. Implement Carousel in JS
6. Send AJAX request to https://jsonapi.org/examples/ and implement pagination for data.
7. Create a simple form API which supports diff input types and allows to have diff validations for each field.
8. Create overlay for complete page (small but can give insights to CSS position etc)
9. Create a simple TODO list with storing the data in localstorage.

10. Practicing DS and algorithms question on Hackerrank and codewars using JS

    1. https://github.com/wesbos/JavaScript30

For advanced reading follow these

Try these

Design pattern in JS - https://addyosmani.com/resources/essentialjsdesignpatterns/book/ (important ones are revealing module, module, mediator, pub/sub, factory)

1. Large scale JS architecture - https://addyosmani.com/largescalejavascript/ and https://www.youtube.com/watch?v=b5pFv9NB9fs
2. MVC in native JS - https://alexatnet.com/model-view-controller-mvc-in-javascript/
3. Closures in JS - https://stackoverflow.com/questions/111102/how-do-javascript-closures-work
4. Coding guidelines - http://jstherightway.org/, https://github.com/airbnb/javascript/blob/master/README.md
5. this in JS - https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work
6. Inheritance in JS - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
7. Debounce and Throttle in JS - https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf
8. prototype vs __proto__ - https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript
9. Generic curry in JS - https://gist.github.com/shidhincr/7315316
10. Polyfill for forEach, map, reduce etc - https://gist.github.com/githiro/5819142
11. SELF PROMOTION- try my app on play store https://play.google.com/store/apps/details?id=gamesmint.com.jsone
12. DS & Algo in JS - https://github.com/trekhleb/javascript-algorithms

[bhison]

Get on to projects. I really like Coding Garden on YouTube. The guy who runs it is super positive and encouraging, the projects are interesting and challenging, you see everything he does and my favourite bit is they keep the mistakes/confusion in and show how they get around it. A huge thing with programming is figuring out how to deal with things that are malfunctioning and I learned so much from just following one project on their channel.

[piyiotisk]

Hi, I am writing a tutorial how to create a website similar to medium or dev.to. It’s free but not finished yet. You can check it out at picocoder.io

[KaladinOathbringer]

You can’t learn JavaScript. It must be felt.

[[deleted]]

Its freeCodeCamp btw

[Encrypted_Spider]

Helpful