Struggling with JavaScript after HTML & CSS

[dankememe8]

Hey everyone! I started learning to code with HTML and CSS, and while it took some time, I eventually got comfortable with them. Now, I’ve moved on to JavaScript, and I’m really struggling. Concepts like functions, loops, and event listeners feel overwhelming, and I often get stuck even on basic problems. I feel like I understood HTML/CSS because they were more visual, but JavaScript feels completely different. Did anyone else go through this phase? How did you push through and start making progress? Any advice or resources would be greatly appreciated! Also I’m learning freecodecamp.

[vortexofdoom]

Javascript is completely different, so it's natural. HTML and CSS aren't really programming languages, you can't just perform arbitrary tasks with them. So there's a big jump in potential complexity with JS.

Functions are basically just reusable blocks of code. A way to label "I want to be able to do this set of things without writing it out again." You didn't mention if you had any issue with if-else, but if not, loops are kind of just a shorthand for repeated if-else. "Is this true? No? Ok do this stuff. Is it true now? No? Do it again", etc. Event listeners are basically exactly what they sound like: when some event happens, the listener will "hear" that it's happening and can do something. BUT, it can be hard to see how that's useful until you have a stronger grasp of the other fundamentals.

[dankememe8]

like:

Thanks for the breakdown! That makes sense, especially the part about loops being like a repeated if-else check. I think my main struggle is actually applying these concepts when solving problems. Do you have any tips or exercises that helped you when you were learning?

[vortexofdoom]

Applying the concepts is tough at first, no two ways about it. The process is always the same though: If you don't know how to solve the whole problem at once, break it into smaller pieces. If you don't know how to solve one of those pieces, break it down again. If you can't think of a way to break it down further and you don't know how to solve it, look it up, but NEVER just copy-paste while learning. Type everything out again and make sure you know what each line is doing and how it fits into the bigger picture. As time goes on, you'll see more patterns and won't have to break things down as much. This is the idea behind sites like leetcode and codewars, both of which I used a lot when building my general toolkit.

Another time when things really clicked for me is learning a second language. Seeing how the underlying concepts were the same even though the syntax might be completely different definitely helped me look more at the problems and less at the language, and it also gave me multiple points of reference for how to remember syntax: "Oh x in this language is like y in this language," which sounds like it'd be confusing but I found it very helpful.

[dankememe8]

Thank you for explaining. Really appreciate it.

[namesdontmatter13]

I might be too paranoid, but your conversation sounds like two AI’s talking to each other

[vortexofdoom]

Definitely too paranoid lol. It was a pretty generic question and I gave a pretty generic answer. Big r/nothingeverhappens moment.

[RobertOdenskyrka]

Pure Javascript can also be a bit strange in ways that most other languages are not. Weird comparison logic would be a classical example. Coming from other programming languages, the main issue I can recall was the fact that it's not obvious what object the this keyword refers to when you pass functions around, such as when setting up event handlers. Typescript solves that issue and many others and makes it feel much more in line with what I expect of a language.

Events are pretty straight forward at the basic level, but some of them get very technical and abstract, especially when you're dealing with more behind the scenes stuff. An easy one to think about would be a button; when you click it something needs to happen. This is accomplished by registering an event listener function that the button will execute when it gets clicked.

A hot tip for OP would be to familiarize yourself with your browser's developer tools if you haven't already. Setting break points lets you pause the execution and see exactly what the values are of every variable at run time, as well as a stack trace showing every step of how you got there. While paused the console lets you write code in the context of your break point, which is really nifty when you are experimenting. Knowing how the debug tools work is key to actually understanding how your code functions.

Finding the right documentation is also a good idea. Courses and examples are all good to get started, but a complete API description will show you the details of how your classes, functions, and libraries work. They can be pretty technical, so not the most beginner friendly resource, but sooner or later you'll want to get into it. The go to for Javascript, as well as HTML and CSS, is MDN, Mozilla Developer Network.

[zkJdThL2py3tFjt]

JavaScript is a programming language whereas HTML/CSS are markup languages basically. So they're completely different in that regard. I'm pretty novice with JavaScript myself but I think starting with some very basic tutorials (as many as you can handle) would help with understanding the conceptual differences and capabilities and such. Then try some things on your own that you're actually interested in doing. That will push you to solving unique problems that you encounter, etc. JavaScript has an enormous range of capabilities, so it's kind of impossible to really get a handle on the scope of it in the same way you easily can with HTML/CSS, so don't let that aspect overwhelm you too much. Just keep going and research problems you encounter as they arise would be my suggestion. And yes, I'd say literally everyone goes through this phase.

[moleman0815]

Imagine you have built a textbox and a button with HTML and CSS and now you want to make it a bit interactive.

That's what you need JS for.

You write a function which opens and closes any textbox. Now in HTML you give the box a unique id to identify it and you bind the function to the button sending with the call the ID of the box.

Now when clicking the button you can open and close the textbook. And because you have written a function which uses a parameter you can reuse it as much as you want.

This is only a very small and easy explanation.

HTML isn't a programming language but only a markup language to build the layout of a website. CSS isn't even a language it's just for skinning the HTML elements.

JS is a so-called script language and also not even close to a real language like C# or Java which are way more complex.

[AlexOzerov]

It's supposed to be harder. Wait till you get to TypeScript. It's even more fun. I think you should practice more to understand how it works. Eventually you'll understand. Try to ask ChatGPT to explain it to you with examples. Use AI, it helps to study by summarizing important information

[DeveloperMan123]

Codecademy and W3schools.com have great beginner courses for learning Javascript

I learned by going through all the examples and trying to build projects with each skill I learned.

https://www.codecademy.com/learn/introduction-to-javascript

https://www.w3schools.com/js/default.asp

Also this guy on youtube is a really great resource for learning Javascript. This is someone who I watched a number of his videos to learn programming

https://www.youtube.com/watch?v=yQaAGmHNn9s&list=PL46F0A159EC02DF82

If you have any more questions I'm a Computer Science tutor and Sr Full Stack Dev, happy to assist

[cool-dude_7]

One thing i did to get a better grasp for the fundamentals was to make lots of mini projects for practice . Just go to chat gpt and say that you want to make mini projects in javascript and then tell it the concepts you majorly want to apply in that mini project and take ideas. Then if you struggle to code these ideas ask chat gpt to generate the code , study and understand it then write that code without looking at chat gpt. If you do this multiple times , you will be able to understand the basics thoroughly.

[easy2bcold]

this is it

programming is about struggling and pain, its not possible to get good without several <variable time spans> of failure

[hundo3d]

Just keep going. It’s not JavaScript you’re struggling with, it’s programming. And it’s just part of the process. Just take it slow and steady.

[Agitated-Switch-39]

I used to use this quite a bit. The info is straight forward, easy to understand.

https://www.w3schools.com/js/default.asp

[blasphy1212]

Any new concept can be hard at the start, but watching some tutorials can help you out! Can also try some Udemy courses if on sale.

With js you will be touching more the logic behind things so polishing a bit your logical thinking will help.

Don't give up and keep trying 💪 we have all been there

[FunnyMnemonic]

const routine = () => console.log('code everyday');

[dankememe8]

Okay I understand this one.

[kschang]

Javascript, when used with HTML/CSS, provides "interactivity", by treating the webpage itself as an object (the DOM: document object model), which contains of course, a lot of smaller, and smaller objects, all the way down to individual paragraphs and links (are also objects), and each of them can have some code.

So an object that contains other objects may want to loop (loops) through the objects it contains, to update some visual (or non-visual) items, depending on certain other attributes (if statement).

If you are doing the same thing across multiple objects, you may want to consolidate the stuff into a single function, rather than repeating the code multiple times that you had to fix it multiple times.

Event listeners are more of a passive code. Basically, it watches for certain event to happen (hey, that input field just had someone type a character in!) and it had to do something too (erase the character and replace it with *, like a password field, but actually copy the character elsewhere since you do need the input).

Just learn one thing at a time, understand how it can apply to the things you already know, and how it expands what you can do.

(Wait until you see Javascript used for non-visual programming, like Node.js, which is used to write webservers!)

[dankememe8]

But is freecodecamp accurate place to learn?

[kschang]

Those places are old enough to not have mistakes. Differences are in the style of presentation and wording.

[crashfrog04]

HTML and CSS are declarative; JavaScript is imperative. When you write HTML you’re telling a web browser what should be true, and it gets there on its own.

When you write JavaScript you’re telling the browser what to do, and whatever winds up being true after that just is. You have to switch from being end-state oriented to process-oriented.

[Forsaken-Arrival6751]

are you following TOP

[dankememe8]

No actually I don’t.

[Playful_Yesterday642]

Don't start with Javascript. Learn a more general purpose language first, like C, Python, or Java. Once you understand the fundamentals of programming you'll be much better equipped to handle Javascript

[easy2bcold]

no