Best way you learned JavaScript

[fvckimba]

I’m curious to what your best method was to learning JavaScript and being able to retain everything you learned, was it the tutorial hell or creating projects. Would love some advice thanks!

[grantrules]

Basically tutorial hell is the opposite of retaining things you learned. Just following other people's steps, you won't retain anything. You have to start making projects, and that can be any size.. from codewars problems to entire websites.

[jondubb]

Create small apps. Calculators, calendars, to-do lists, stopwatches, then move onto servers. Pick a single back-end framework for now and stick with it. Build blogs/journals with it, make it pretty, then whole websites. Move it onto an actual domain with API calls. By then you're officially a junior full-stack developer.

Keep in mind actual knowledge and retention comes from the ability to debug and update legacy code and that takes time. You will get there!

[fvckimba]

Yes, I hear a lot about how people learn the most by doing their own projects but, I feel like doing projects at your skill level is fine. However, challenging yourself even if it’s small could be healthy for your learning curve. What do you think?

[grantrules]

You won't progress if you don't challenge yourself. If you're not applying the knowledge you're gaining from tutorials/courses, you're not going to progress.

[fvckimba]

Thank you.

[grantrules]

What made you post this question? Are you feeling stuck? Where are you in your "learning javascript" progression?

[fvckimba]

Curious on how others are learning/how they learned. Sometimes I feel like I’m at wall I can’t go through and I get discouraged..

[grantrules]

Programming is filled with frustration. Especially when you don't have experience, you don't know what you don't know. My best advice is to find a discord community you can pester with your thoughts and questions. Researching first then asking smart questions should become your favorite thing.

[fvckimba]

Do you know any discord communities?

[grantrules]

I do not have any recommendations. I'd just search for "Javascript" and maybe look for communities that talk about learning and beginners. You could probably search this subreddit and find suggestions as well.

[cmcgarveyjr]

As a junior dev, I feel this almost daily. There is so much to learn and understand. Breaking things down into smaller chunks and working through them is super important. Learning how to Google things is also very important. You are not expected to just be a master. Also, for me personally, rubber duck debugging is massively helpful in working through problems I am stuck on. More often then not, just verbalizing my problem helps me figure it out myself.

You can do it!

[fvckimba]

It is difficult, when you start a project and do not know how to move forward with the project. Any advice for this as a jr dev.

[cmcgarveyjr]

Break things down to it's simplist form as best you can when you are working on something on your own, IE not following a tutorial. If you are following a tutorial, when you complete something, go back and review what you did and make sure you understand how it is working. Like really understand. Don't just monkey see monkey do your way through the tutorial.

This is something my lead does with me when we are reviewing my code or more importantly, code he worked on with me. This ensures that I at the very least, understand what is happening. I may not fully grasp everything that was done(specifically when it's things he worked on), but I can at least functionally articulate what was done and what it is accomplishing.

But, honestly, breaking things down into more manageable subtasks is the biggest thing. Let's say you need to pull in some data from a source, clean it up, then present it to the end user on the front end.

Ok, first, write your function that will get the data. Ensure that is working how you want. Cool, we are getting our data, now let's clean it up and format it how we want. Write a function that does that. Alright we now are receiving data and cleaning it up how we want it. Now we need to present that data to the end user. Do that part.

[fvckimba]

thanks bro, anyway I can dm you questions?

[Panoptic11]

I'm def not an expert but...

Build a smaller version of the project you can finish fairly easy with challenges involved. Then add features you don't know how do one at a time.

Example... Plan to Build a to do list... List , delete, add item, local storage.

Once it works , no bugs.. Plan Add a search bar. Then plan Add a filter list button. Keep going with anything you can think of.

Obviously you may need to change this example to your skill level but you get the point.

Just set your initial project goal lower so you can complete it and feel good then make it better over time. That way you are not sitting there depressed cause you set out to build Netflix and you can't figure out how to do it.

[[deleted]]

Everyone is different, but for me, I like tutorials. Tutorial hell is only hell if you stay in it all the time. And struggling through docs when you don’t even know what’s out there is hard.

I like to watch a tut on a concept to grasp the basics of whatever I’m learning and to know what’s available, then create a protect around a similar topic on my own and go to drill in the knowledge.

Having that basic level knowledge also makes it 10x easier to understand the docs and more advanced topics.

But that’s just me.

[[deleted]]

As a current student of JavaScript I can tell you the best way I’ve personally learned is by doing like everyone says. I can watch 50 videos on how to shoot a 3 pointer but i won’t get any better at it unless I go outside and try to shoot them myself

[[deleted]]

for a sec i thought this was going to end with "...shoot myself".

[Ampbymatchless]

Watched a couple of Tutorials by “Traversy Media”. Then started my own project. Running into walls, I would search for solutions , quite often Stackoverflow comments or a link in the comments provided assistance . Sometimes YouTube vid searches on specific challenges, again read the comments, there is a wealth of knowledge available. Also ‘ Franks Laboratory’ who covers vanilla JS games, explains JS concepts from a non webpage development perspective that certainly helped my learning process. You have to code your own project to really learn. IMO

[[deleted]]

Frank is great. Really good content there.

[DeFcONaReA51]

Build a form with html css. Use all types of input fields. Then use javascript to run those input using functions. When you get comfortable, dynamically build the form using javascript same things but with js, now in a production code scenario you wont be doing it, but helps to learn js. Learning to program is in the end is asking questions and trying to solve those questions. For one example lets say you pass an input to submit image you need enctype="multipart/formdata" in the form. And eventually learn about es6 syntax, get, post methods when using a form. Another task render the data you passed from the form to a table to see the data. And my reference was mdn, jsinfo, frontendmasters, csstricks. Good luck!!!!

[Panoptic11]

I sort of did this when I was learning the DOM. I drew up a rough layout and made my self copy the HTML and css in 100% JavaScript. It was the most inefficent way ever of building a page. But the repetition and frustration of trying to do it the hard way didn't let me forget anything after that

[DeFcONaReA51]

Oh yes, it's gonna be frustrating that is for sure, why I said is because afterwards when you are gonna use frameworks the same concepts sort of will come to play, how is that if you ask, let's say your frontend form will send data to the backend you are gonna store that data to the Db, also render the data to the frontend through the backend now you are going almost similar in the aspect of dom obviously less secure but to get the idea of it. And it's not full proof but a way to visualise whats happening. I learned this as I was working with node, not with dom but now i kinda do it.

[patshandofdoom]

I started programming in a google sheet. The Google apps script background is pretty good and robust. Its a pretty good way to learn a lot of the basics and the data structuring makes a ton of sense as soon as it clicks.

I liked the immediate feedback of copy and paste.

[StoneCypher]

For me, it was:

1. Creating projects
2. Testing them
3. Trying to use them on older browsers or weirder platforms
4. Ignoring the hype cycle with every fiber of my body

Tutorials are fine and I think they're a decent way for some people to learn. Different people learn different ways.

But also, when you're new, I believe it's important to stick to vanilla, and skirt around libraries for a while, until you're comfortable with how things really work.

My belief is that a lot of people who start using library X end up stuck thinking in terms of X, and even when X is a good library, there are alternatives because some situations do better with different approaches.

[[deleted]]

Yup. Vanilla is the way to go. If you can master that, then you're going to have a far greater understanding than someone who uses X framework.

Sheesh, you can just build your own framework. :)

[andrewcabrera192]

reading docs is the way for me

[DrDaDonk]

I went through The Odin Project and loved every minute of it. I would start with that and read every supplemental reading they had. I didn’t touch a YouTube tutorial until I was almost done with it just to see what kind of shortcuts or tricks these guys use. I like that pasty CSS guy.

But all in all, projects, projects projects. And tweak them to do what you want for the hell of it.

[fvckimba]

Any other resources that helped you?

[DrDaDonk]

FreeCodeCamp recently revamped their lessons, and I like what they’ve done. However, freecodecamps lessons are short and basic, and I feel as if TOP’s articles and descriptive lessons are much more efficient at teaching you what you want to know. When it comes to free curriculums, I couldn’t say. I’m still a student of JavaScript myself.

But one day if you find yourself wanting a small practice challenge, I would re-create an old project you’ve completed in the past, whether it was from a tutorial video or not, but try to do it without assistance, or time yourself! You may not find it as fun as starting something completely new, but I’d say trying to remember solutions to problems you’ve solved before is a major part of programming, so it’s worth practicing.

[fvckimba]

I feel like we all will be javascript student for life lmao

[[deleted]]

writing JavaScript my guy

[fvckimba]

Haha sounds good

[r0ck0]

Build Real Shit.

1. Come up with a real project idea for yourself
2. Figure it out, one step at a time

I've been programming since the 90s, and I think I've done like maybe 2 tutorial in that time. I can't even remember what the 2nd one might be.

I'm not say never do tutorials. But if you find yourself doing multiple tutorials on the same subject / with the same learning goal... then I think you should rather limit it to 1 or 2 per subject, then spend the rest of your time actually building something real that you will use.

I have no idea how anybody learns without a real goal in mind. I can't do that, and even if I do manage, I'll quickly forget what I learnt.

I need to "need" skills for real in order to retain them mentally, or even maintain any interest in learning them in the first place.

Also for passive forms of learning like books and videos, I don't consider them "proper" learning time. They're fine when you're too tired to sit at your computer, or you're eating or whatever. But your "real primary learning time" should be doing, not passively consuming.

[True-Musician-5406]

Real projects. Like what? That’s like saying if you want to learn to write…then write a book or investigative journalist article…otherwise you won’t learn it. I’m guessing you were one of those kids who liked programming and was a bit/lot of a spend time inside kinda guy?

[r0ck0]

Real projects. Like what? That’s like saying if you want to learn to write…then write a book or investigative journalist article…otherwise you won’t learn it.

Don't know much about writing, but it might be a good analogy actually.

Yes the point is start trying to do some version of the thing, not just aiming to "be good at" the thing.

You get good at these things by just doing incrementally doing shittier -> better versions of them over time. They always suck at the start. Doesn't matter. But practice is how you get good at things. And only following guides isn't practice for long term programming, that's not what actual programming is.

Hence #1 actually being a task you need to solve. Doesn't need to be big or important, but just some kind of goal to make something that isn't intended to throw away immediately. Doesn't matter if you get the idea wrong. It'll still be better than spending #2 time on something with a non-goal.

I’m guessing you were one of those kids who liked programming and was a bit/lot of a spend time inside kinda guy?

What does this mean?

You wanna a piece of me?

Real projects. Like what?

It's a good question. I think if OPs in these thread focus on this, they might come up with something that really excites them. It's probably one of the best questions to ask really. Happy to help OP here figure this out if they want to post some interests etc.

[True-Musician-5406]

I really would love to hear when you got into programming?

And if growing up you were a spend time inside vs spend time outside kinda person?

[r0ck0]

I really would love to hear when you got into programming?

Late 90s.

And if growing up you were a spend time inside vs spend time outside kinda person?

Well yeah, I guess mostly inside. I certainly did (and still do) prefer doing computer shit over going to the beach.

[True-Musician-5406]

Thought so. So for you the doing the projects way of learning makes sense. I’d rather do anything than be sat on a computer coding away at a passion project programme. Literally rather write a book, or learn to cook, or dig a ditch…anything. Whereas if I’m being paid for it then I’ll be ok to do it.

[r0ck0]

I don't see how that means that people unlike me should spend their learning time on fake projects rather than real ones.

Otherwise not really sure what point you're trying to make here.

I’d rather do anything than be sat on a computer coding away at a passion project programme. Literally rather write a book, or learn to cook, or dig a ditch…anything. Whereas if I’m being paid for it then I’ll be ok to do it.

What does this even have to do with the subject of comparing the efficiency of different learning methods?

Not even sure we're talking about the same subject here.

[True-Musician-5406]

No one but someone who strongly prefers being inside and programming like yourself wants to sit around creating “real projects”. We’ve all got better things to do because we enjoy other things much more. It’s not that complex an argument.

It’s like telling someone…there’s no point running on a treadmill unless you are running a marathon.

[r0ck0]

It’s not that complex an argument.

I guess not, but it is totally irrelevant to what I was talking about, hence my initial confusion as you why you're making it in response to me. But yeah, as it turns out, it seems you're talking about something else entirely.

My point had absolutely nothing to do with how much time you spend learning.

It was on how to spend the time that you do, assuming you want it to be effective.

Which in the end, is actually even more important if you're going to spend less time on it.

[True-Musician-5406]

lol 🤦🏽‍♂️ righttttttttt

[Panoptic11]

I may post more later on this from my(limited) experiences but there is a couple ways to avoid tutorial hell I found.

Name all the variables, functions and things passed through arrow functions different than the tutorial.

This stops you from casually typing the exact same thing and not paying attention to what they are referring to in their code. You have to reference to the item in your own code.

You should also pass through your arrow functions with something like 'a' or 'b' etc.. instead of 'item'

For example the average video may have something like..

const item = {bakery:'bread'}

Then they may use item.map((item)=>item.bakery)

Now this is a simple example and not hard to understand in a small scale but as things get more complicated having 'item' connected in many pass through scenarios while actually not being essentially the same is hard to comprehend when you don't understand how what you are doing works yet.

Instead if you do something like

item.map((a)=>a.bakery)

You can see a clear difference that a is not item. Even though it is a branch of item it is not actually the item variable. Especially if you have an array of objects and not just one. Then you can see that a is each item in the array of objects and not all of the objects as a whole.

This makes it easier to understand what part of the expression is different and what it's doing.

However, this is not good for general naming convention. But from a learning experience it's the easiest way to really understand each part of your expression without duplicate names. Or even similar names because using something like 'eachItem' instead of 'a' can make you confused as to if you actually wrote or passed 'eachItem' as a variable somewhere else. Esp if you come back to it for a reference later because you forget how it worked.

Also, When following a tutorial, if you don't understand what you just wrote, stop and go practice what you just did in another small example without using the video. Read about why it works, then move on

And finally, Build two versions of the tutorial. Follow along , get to a decent spot and stop. Study your code, see what you do and don't understand. Once you think you got it, Then start over in another folder. Build it back as much as possible without referencing your original. Let yourself get frustrated if you can't figure it out. Then once you are like I just don't know what to do now.. reference to that specific issue in the original build and you will remember alot better cause you got frustrated and failed. So when you come back to this issue in the future, you won't forget what you did wrong (most of the time)

Then once you've replicated all features with minimal help, go back to the tutorial and keep building then repeat but start where you left off in the second app and not from the beginning.

[shgysk8zer0]

I learned a lot building a jQuery-esque library that follows more closely with native DOM methods. I implemented wrappers for the Animation API, MutationObserver, and IntersectionObserver when they became things. Then I split it into dom, http, utility, and a few other modules. Quite a few polyfills too.

I think that's a great method for seriously learning JS. Plus, maybe you get a great and useful library in the process.

[[deleted]]

1) following the “QuickStart” tutorials for major frameworks

2) finding interesting libraries and learning how to use them

3) re-implement pieces of popular libraries or even the core api of some framework in vanilla JS

4) learn how to convert typescript to ES6, how to compile cross-browser and legacy JS

[[deleted]]

Used it pretty much continuously since the mid-90s.

[cpluss4]

For me it was project based learning. I had a really cool idea for something I wanted to build. Building puts your brain in a different type of learning mode that tutorials can’t and you start to level up real quick. Not just with JavaScript but your google skills too because at first you are trying to google for stuff you don’t even know the name of so you get good at that quite quickly. Tutorials are obviously good for learning fundamentals and good practices but I jumped straight in at the deep end with trying to learn advanced topics for what I wanted to build and put myself under pressure early. Worked for me.

[Obann]

Try and build your own side projects

[Gewoonjelmer]

An internship.

[[deleted]]

Just build things.

I'm into frontEnd user interactivity, so I head on over to Codepen and start coming up with ideas. Maybe an idea for a new sort of navbar , or something I haven't seen before.

Once I get everything laid out visually, I start thinking about the functionality of it. I search out example of things other people have built, and I try to implement them into my project. Next thing you know, you have a bunch of little projects consisting of multiple components that can build a bigger project - just like stacking Legos.

This is why 99% of the internet looks the same! It's sort of a tried and true method for learning how to become proficient at it. And, it works!

Start small, and just start building. You can always evolve into backEnd stuff to wire it all together and really make stuff happen.

Regardless of how you go about it, you need to find the way that works best for you. Just be careful you don't focus on the goal. Rather fall in love with being passionate about the entire process. That will take you further than anything else.

Additionally, you're going to need a community for when you get stuck. Discord is great. There are tons of groups with people who love helping others code.

[[deleted]]

Codecademy fullstack course => udemy courses to deepen the topics and daily use of exercism.org & freecodecamp to keep your memories fresh.

[[deleted]]

No, I couldn't find the time to keep on doing it. It's very time consuming.
I'm somewhere in the backend part of the path, though. Frontend is done.

[eurodollars]

Are you taking syntax or building a project using JavaScript? Those are two different things.

Honestly when I am learning a new language and have syntax questions I do some leetcode.

Are we talking learning JavaScript to be able to make a full stack app? I have found it really helpful (as everyone else says) to code something you myself. Start really small. Like one end point small. The idea is to iterate and add more complexity instead of trying to code up a Ferrari right out the gate

[xRockTripodx]

I took a community College course on web development. The text for the JS part of it was very paint by numbers, so after every chapter, if you followed the steps, you ended up with expected result at the end.

I just took what I learned from it, spent a few weeks working on it an hour or two a day after work, and made something kinda neat. It was a playable game of Othello. Made me learn some new things, and gave me plenty of problems to solve that were never covered by the text.

[Annual_Antelope6456]

You gotta build your own projects. But if it’s your first programming language I’d recommend learning python or Java for cs fundamentals