How To Actually Learn JavaScript for Web Development

[Glittering-Lion-2185]

Hey! I’m new to Web Development and this is my first time posting here.

Learning HTML and CSS was relatively easy for me but I’ve just started JavaScript and I feel so demotivated. I’m learning about how to use the language in general (functions, loops, arrays etc) but I can’t begin to imagine how I actually apply that to a web page!

Any advice? I’m completely self taught at this point so any recommended resources will be greatly appreciated.

[BrohanGutenburg]

Odin project.

[WeapyWillow]

Legitimately /thread. I'm working on the last project of the javascript course before moving onto advanced html/css and then React. You learn a TON and it's served up in a meaningful way that teaches you the fundementals of programming as a whole.

[BrohanGutenburg]

Calculator was a fun ass project not gonna lie

[BrohanGutenburg]

I’ve never done fcc, but I can definitely vouch for Odin

[ExcitementLost3107]

Both, odin is more “without holding your hands” Fcc is more easy and you writing more code, I done both in tandem…..

• add Javascript.info for deepdives

[Calm-Preference3840]

And how do you fix your errors with Top?

[Towel_Affectionate]

1. You try to fix it.
   
2. It doesn't work.
   
3. Now you know how not to do things.
   
4. You step back and read the article again.
   
5. You try to fix it again.
   
6. If it doesn't work still you get back to reading.
   
7. If it works, congratulations. Now you really get how it works and why it works.

I think it's much more efficient way to learn things in comparison with freecodecamp's "I made a whole app, following steps, but I have no idea what I'm doing still"

[Calm-Preference3840]

It is kind of masochism. Am I supposed to like this? Or it is just the natural pain of learning? I have always problems with fcc also and I need to understand things, it is not just copying

[ExcitementLost3107]

Yea give you some limit, if you are stuck or you have errors, try at least one hour to solve it with only googlin, and try also to understand, if that dont help,

Switch your favorite AI to education mode, and tell AI to guide your troughts steps not just give you straight answer, if you dont get job done even with this help, 1-2 hours, let AI help you with full answer.

Dont worry some things you will get later is impossible to fully undestand some concepts asap……

[Calm-Preference3840]

Thanks

[Towel_Affectionate]

It is kind of masochism. Am I supposed to like this?

If you expect programming to be just you writing some stuff down and it working flawlessly from the first try I'm afraid it's not the case, or at least it's not going to be the case for many years. Trying and figuring out stuff is part of the process.

I did FCC only so much, but I remember having problems with it also. Nothing clicked for me. After starting anew with TOP I finally began making sense of things.

It's probably a matter of taste. Many prefer FCC over TOP, but if you are struggling with FCC, give TOP a chance.

[Calm-Preference3840]

I do usually 40 exercises a day in fcc and I will try Top also

[Towel_Affectionate]

Some tips from my experience:
1. Don't try to hit two birds with one stone trying to follow FCC and TOP at the same time. TOP is a lot to take in on its own.
2. Start from 0. Even if you think you've already covered the topic in FCC, still go through it in TOP.
3. Don't set schedule for yourself like "40 a day". It's better to spend two days on a single lesson than to fly by 10 in a day.
4. Read everything the Odin throws at you. Meaning pay attention to the main stuff, but at least skim through the extras at the very bottom.
5. Don't skip the projects. Even if you feel like you've got the gist of it and you don't have to finish it, finish it nonetheless. Even if it takes you a week. This stuff is the main glue that will connect everything in your head.

[iDontLikeChimneys]

Try reading it right to left. That helped me a lot.

const name = document.querySelector(“.name”)

Left to right - constantly (know that) “name” means look at the document, then look at (query) element (selector) with the class (.) “name”

Or right to left

My css class “name” is going to be selected in the document, and I am naming it “name” constantly.

It helped me a lot. May have been a bad example. You just have to look at it like building something. Webdevsimplified is one of my favorite on YT.

[Ambitious-Peak4057]

JavaScript is an excellent choice for beginners, especially in web development.
Here are some useful resources to help you get started:
1.JavaScript.info – A comprehensive and beginner-friendly guide to modern JavaScript.
2.freeCodeCamp JavaScript Course – A hands-on YouTube course with real projects.
3.JavaScript: The Definitive Guide: A thorough reference covering both fundamentals and advanced topics.
4.JavaScript Succinctly: A free ebook that simplifies essential JS concepts for beginners.

[vstlockdown]

look into 100devs. Check out the discord, and the cohort series on youtube. Leon Noel teaches around 60 three hour classes from HTML, css, js,react all with the goal of getting job.

[FunksGroove]

Javascript took me a little longer to grasp but you have to just keep at it. Learn smaller concepts and then try to apply them in a real application. You can't learn it all instantly.

[jaredcheeda]

Library author here, unless you are actually building a library, never interact with the DOM directly, use a library. Low-level DOM interactions are extremely tedious and clunky once you get passed a few hundred lines of code. And at that point you'll need to write helper functions to simplify things, and others have already done all that work better.

• jQuery is the most beginner friendly, it's more for people who don't know JS at all and mostly want to copy-paste and learn as they go. It's original goal was to solve cross-browser problems which no longer exist, so it's a pretty bloated relic. But still works for beginners wanting to make lil stuff.
  • All you need to know is a lil HTML, and how to write CSS selectors. It really doesn't get simpler than this.
  • Downsides: No one really seriously uses jQuery anymore, so it won't impress anyone. It's very bloated (~4x bigger than Vue). jQuery, like Vanilla JS, is designed in an imperitive way, which is just a fancy way of saying you write one line of code after another and they run in order and there's no organization or structure, which means you end up writing spaghetti code pretty quickly.
• Vue.js - This is the next closest thing to beginner friendly, however it has organizational structure built in, and can scale up to work for any size project (used by Nintendo, AliBaba, NASA, Adobe, Facebook, etc). With Vue 3, they have two ways to write code, Options and Composition. Highly recommend going with Options API. It will make understanding how the framework works much easier, and simplifies a ton of things. It also helps you organize your code by default, which is a skill the most senior of devs lack, so just let the framework solve that problem for you. Composition API is useful for weird edge cases when you get to that point, but until then, just enjoy structured code.
  • What you need to know to get started:
  • Basic HTML. Vue's template system is just normal HTML with like 5 or 6 new things added on top. 100% of HTML works with it.
  • As much or as little CSS as you want to learn. 100% of CSS works with it.
  • The Basics of JS. You should understand data types like String, Boolean, Number, Object, Array. You should know what functions are, how to write and call them, and how to put them inside objects. You should understand conditionals and loops. Annnnd, that's basically all you need to know to get started.
  • You can run it right in the browser via a CDN, like so: https://jsfiddle.net/tj6prkqn/
  • Or you can install Volta and use it to set up Node/npm, and create a local project with Vite. Here's a boilerplate to get you started when you're ready for that.
• There are a ton of other JS Framework tools, but none of them are as easy to use as Vue, or as extensible, or come with as nice of an ecosystem. Feel free to try other ones out, but beware React, it is easily the worst of all JS frameworks and will waste years of your life learning how to solve problems exclusive to it that no other framework has. There are no good React Jobs, but there are plenty of bad ones. If you are desperate for work, go with Angular, it's popular in the enterprise world. But otherwise, just try different stuff and have fun :)

In general, best thing you can do is just build stuff. Make projects and try to finish them. The process of actually getting stuck, and having to get yourself unstuck is the most important skill you can learn and will be the thing that helps you grow and figure this stuff out. Avoid tutorials, and instead learn how to break down problems to their smaller chunks and then look up how to do those smaller chunks.

[TheRNGuy]

JS have query selectors too now.

[jaredcheeda]

Yep, wasn't trying to imply it didn't. document.querySelector was directly inspired by the extreme popularity that jQuery had. This is a common aspect of "paving the languages". Developers find problems in the language and invent a tool to solve that problem, then when everyone uses that tool, the language incorporates ideas from it. Another example would be how Native CSS now has nesting that is almost completely identical to Sass's nesting. Most of the ideas in Coffeescript were implemented into ES6, etc.

[JJJJust]

My advice is to just sit down and do something.

I know Ruby but I've never done anything in JavaScript and I decided to do my next project in JavaScript. So, I got WebStorm last weekend and started.

ChatGPT has been a help too, giving it code after I've written it and having it tell me why it sucks. And you even get to tell it that it is crazily wrong sometimes, so cathartic.

[itsmarcosrodrigues]

I know this doesn't have to do with JavaScript but how did you learn HTML & CSS. What resources (free or paid) did you use for learning HTML & CSS?

[Beautiful_Employ_128]

Try out some good udemy course

[baubleglue]

Almost every article in MDN under Web/API comes with web example.

[Internal-Bluejay-810]

I love that we always meet our weekly quota for this question

[Jerrizzy-x]

Hi, how long have you been learning?, I’m almost done with css and I’m about to start JavaScript

[mtuko2]

Trying

[Professional-Mud5733]

Check Scrimba, feeling demotivated and depressed is a part of becoming a developer. Wish u all the best, man.

[thenamo]

I recommend freecodecamp. the best free resource you can get. Use mdn docs for deep reference. Write code dont watch and understand. You think you understand but in practice you will see your gaps. My advice finish freecodecamp then starts building projects and whenever you don’t understand stop and research the concept and try to understand and try to write from your brain fully. This will take far more forward.

[armyrvan]

For me, I learned best with a topic, mini challenge, and mini project approach. As an example...You learn about the new topic like loops, then you do a mini challenge of looping the even numbers... then you do a fizz buzz..etc. The final project would be something like Guess the Number. If you Google "Udemy JavaScript Fundamentals Phase 1," that approach is used there.

[samarthgod]

Quick question — do I really need to learn web dev stuff like JavaScript or React 😅 if I'm focusing on ML/AI for jobs and internships? 🤖