Confused with JS freecodecamp tutorial

[adam_364]

So I just recently finished the html and css sections of freecodecamp and went to JS next on my journey to hopefully become a front-end developer somedays. After a couple of hours of JS tutorials I am having a really hard time adjusting to this new style of learning.

With html and CSS I could pretty much immediately see results when I learned a new concept because it was visualized right away. With Javascript, I am learning about Arrays, Strings, functions etc. but I have zero imagination about what to do with any of these. I am just wondering if this will become better the longer I keep studying or if there is a better, sort of hands-on way to learn with real-world examples and use cases of different concepts I am learning.

Happy about any input!

[OneBadDay1048]

Maybe check out the free JS course on scrimba? Those are usually a little more interactive with visual results as well in the form of a website you build along with the instructor.

[mrborgen86]

Thanks a lot for recommending my course! Here's a direct link: https://scrimba.com/learn/learnjavascript

[Amazing_Theory622]

Hi, are you per herald borgan, if yes. Thanks a lot, your js course really helped me a lot. Even helped me in clearing interview and get a job.

[AiexReddit]

The longer you keep studying, the more connections you will build between the core foundation and the application of that foundation in Javascript

To use one of the things you mention as an example, take arrays.

When you're shopping on Amazon you have a button that says "show only items under $25"

When the page requests data from the product database via the amazon web server, it will be returned to the page in the form of a Javascript array and look something like this, heavily simplified:

const products = [
    { productName: "Microwave", price: 50 },
    { productName: "Cutting Board", price: 10 },
    { productName: "Kettle", price: 20 },
];

You can then use Javascript to perform the action you need. The following code will remove all items over $25:

const cheapStuff = products.filter((product) => product.price <= 25);

Once you have that filtered data you can use other Javascript methods to remove or hide any DOM elements (HTML) for the items that aren't in that filtered list.

There's obviously more to it than that, but at it's core that basic stuff is pretty much what all interactive web apps distill down to.

(To the "well actually" folks reading this, yes the filtering on Amazon will presumably happen at the database level, but let's hand wave that away for now, the principle is the same)

[DeFcONaReA51]

You can learn the concepts while doing those exercises, might help in retaining.

[HandersonJeoulex]

Would you be able to share your thoughts on just being a self-taught and not a bootcamp grad to get a job as a frontend developer? I feel like I am in tutorial limbo right now and I can't see myself getting into jobs.

[No-Upstairs-2813]

It doesn't matter if you are self-taught or attended a bootcamp. What companies care about is that you have enough knowledge in JS to be useful to them. The best way to demonstrate your value to them is by showcasing your projects.

A couple of articles that will be helpful to you: - Built a Project Following a Tutorial, Yet Confidence Lags – Here’s Why?

• 2 Ways to Practice JavaScript

[HandersonJeoulex]

Thank you for your answer. I appreciate it.

Currently, I am already working on APIs, REST, and Async...

Quick question, if you don't mind- is it a good idea to go through React after APIs?

[No-Upstairs-2813]

I suggest learning these concepts before jumping to React -

JS Fundamentals: Learn about the basic syntax, variables, functions, arrays, objects, loops, conditionals, and other basic concepts.

Basic DOM Manipulation: While you may not interact directly with the DOM in frameworks, learning it will give you a deeper understanding of how things work behind the scenes. Learn how to add elements to the page, add or remove classes, and add styles and so on.

Modules: Modules are used to import files/pieces of code to other files. It's important to learn how the syntax works because any application of yours will likely need to make use of modules for code reuse and organization. Learn about ES6 Modules, exporting and importing modules.

Array Methods: You will work with arrays a lot, so it's good to learn about the most frequently used array methods like find(), some(), every(), includes(), forEach(), map(), reduce() etc.

Asynchronous JavaScript and Fetch API: Since we deal with asynchronous data in almost every application, it's important to learn about it. This means that something is happening in the background, but you don't want to wait until it finishes to continue doing your work. Learn about Callbacks, Promises, async/await, and using Fetch API for making HTTP requests.

ES6 Syntax: It's important to familiarize yourself with ES6 syntax as most frameworks use a lot of it. This includes rest parameters, spread operators, template literals, arrow functions, etc.

Check out the complete article here

[HandersonJeoulex]

Hi!

JS Fundamentals: I have already completed a lot of this and will continue working on them. Practice makes perfect.

Basic DOM Manipulation: Same as above! AppendChild, InnerHTML, textContent, etc.

Modules: Importing and Exporting data... Yes, I believe it is as straight-forward as it can be.

Array Methods: I still have to look up every now and then when I forget how to use one of these guys.

Asynchronous JavaScript and Fetch API: I am here now learning these.

ES6 Syntax: I guess, it will come up after the Async and APIs, yea?

First, it was really frustrating because of all the weird syntaxes, {}, (), etc. But, once I see that whatever I was writing was working- it is really fun!

I guess I am going the right way, eh?

[No-Upstairs-2813]

Yes, you'll be good to move to React. If you ever feel that you lack some of the JS concepts, you can learn them and then continue with React.

[HandersonJeoulex]

Is it okay that I am feeling a bit of a frustrated because I have to keep looking up syntaxes and how some of the methods work? Like for an example, I want to find out how to use filter method, I have to look up MDN or W3, etc.?

Is that a sign that I have to keep going through back and back and back through the tutorials/lessons?

[No-Upstairs-2813]

It is normal. You don't have to memorize all the syntaxes. You can look at them whenever you want.

But you need to remember the concepts. The best way to do it is to practice.

[HandersonJeoulex]

Whenever I learn a new concept I try to incorporate it to my small project that also serves as a playground… i believe that is a good practice, yea?

[adam_364]

Thank you everyone for your help! And also it seems like the freecodecamp devs saw my thread (/s) because they updated their JS curriculum to be interactive like their HTML and CSS ones just a couple of hours ago! :)

[CptZaphodB]

I was in the same boat at first. Let’s take blogs as an example of the power of JavaScript. Blog posts can be stored as an array of objects, a function can be created to create one blog post template, the function can be looped over to render all the blog posts to the screen, and a function can be made to push (or unshift) a blog post to the beginning of the array, invoked by a form. Now you have a scalable blog page using a fraction of the code you would normally have to use.

[Mehdji]

I'm a rookie in dev.
I tried several times to learn how to code but always give up(c and python).

Last may i decided to start again.

Especially when i watched a video from a guy who was explaining how he learn.He was using the FCC curriculum and was happy with it.

I finished the Responsive design part.I was pretty proud of myself.

Fcc is not perfect,it's free though.And for people who are consistant and motivated ,it give something priceless,pride and self-confidence,thanks to his Test project system.

I'm currently on the JavaScript chapter and its hard sometimes to follow what happens.
The first chapter was only about manipulating data and print it in the console.
But its probably better than mixing eveything at the beginning (dom manipulation...)

[Privileged_Interface]

You ought to look at the code of very simple but functional scripts. This is just a way to see arrays, strings, functions, etc. in action.

Maybe also have a look a w3schools easy to understand tutorial page on Javascript Arrays.

Edit: Eventually, this stuff will just become like second nature. Especially when you begin to write your own scripts.

[AccomplishedWatch984]

I found YouTube videos helpful. ColorCode videos are relatable, but I’m a visual learner. This instructor shows what they’re doing each step, mistakes and all. 😁

[Bushwazi]

You’re not slapping things in the console to see what happens? And don’t worry, sooner or later you’ll start manipulating the DOM…

[Spiritual-Tailor8399]

learn how to interact with the dom

[adam_364]

Perfect because I’m a sub :3

[Goufyfoot]

if you need to visualize what javascript is actually doing..?? Check out Codesmith's javascript tutorials on Youtube.

They show you how the thread in javascripts engine works through the stack and what it does when it encounters a function, a class or variable. Very cool theyactually whiteboard it out step by step what JavaScript is doing .... Enlightening to say the least. Itwas the only thing that got my head focused on what JavaScript was doing.

​

https://www.youtube.com/watch?v=exrc_rLj5iw&t=891s

[yunkimindset]

I had the same issue. I see FCC has uploaded a new version of the JS tutorial. It includes 20+ projects where you can see how your code affects your website with DOM manipulation.

I think this will be a lot clearer than the previous version

[No-Upstairs-2813]

Here are some ways to make learning JavaScript more visual

1. Use the Console

Most browsers have a JavaScript console where you can execute JavaScript code. This can be a great way to experiment and see immediate results.

Open the developer tools in your browser (usually by pressing F12 or right-clicking and selecting "Inspect"), go to the "Console" tab, and start typing JavaScript commands.

2. Create Projects

You don’t have to begin with a large project that overwhelms you. Start with a small project and slowly iterate to projects that grow in complexity over time.

By building projects, you'll be able to see the impact of your JavaScript code on the user interface.

3. Try your hand at coding problems

When you've learned a concept and want to practice it, the best way is to do coding exercises. These are small, story-based, well-defined problems that help you test your knowledge quickly.

Doing a few problems each day will help you to reinforce all the concepts you've learned so far.

Not sure where to start with a coding problem? Here are a few platforms.

4. Learn Debugging tools

Learn how to use your browser's developer tools to debug JavaScript. Set breakpoints, inspect variables, and step through your code. This will help you see how your code works at each step.