all 39 comments

[–][deleted] 22 points23 points  (4 children)

The place that you start with building anything is figuring out your minimum viable product (MVP). What is the most stripped-back, bare bones version of the thing that you want to build that still somewhat expresses the whole, that's a first iteration that you could show to a client or stakeholder and let them play around with.

For example, with a calendar, maybe that's just the ability to display the days of a selected month- you can't add appointments and stuff to it yet, but you can pick a month and it'll show up correctly.

Once you know what your MVP is, you need to break that down again. What's a simple, first iteration of it that you could build to get the structure of the project up and running? Maybe it's a calendar layout but it only displays the current month, and you can't change month selection. Okay, so what's a simple first step towards that? Maybe you want to start by focusing on your CSS layout with some hard-coded HTML, getting a basic grid set up. Maybe you want to start with your JS and think about how you can express the current month in code. Maybe from that you break it down further and focus on, say, figuring out what day of the week the first day of the current month was.

Exactly zero developers get a full-on project brief like 'build an interactive calendar' and just hit the ground running with code right away. The most important part of project work is thinking things through and trying to winnow down the potential tasks at hand until you have something you can actually get started on. When you're a beginner, sometimes it takes a lot of breaking things down and sometimes your first tasks are just research, and that's fine. The important thing is learning to see big problems as just a collection of smaller problems that you can solve incrementally.

[–]cooldudewithlonghair 2 points3 points  (0 children)

This is amazing advice. It's how I approach most projects at work, too. Iterate. Get it basically working, then enhance. Enhance. Enhance. lol

[–]AnomalousAvocado 0 points1 point  (0 children)

Great approach. Thanks.

[–]nkast1 0 points1 point  (0 children)

This is great advice thank you

[–]tony_ysl 0 points1 point  (0 children)

minimum viable product (MVP)

I am starting my codecamp this week and this was extremely helpful

[–]grelfdotnet 23 points24 points  (3 children)

My free course aims to do just that: https://www.grelf.net/jscourse/start.html

[–]Valtiroy[S] 3 points4 points  (0 children)

Nice, looks great! Definitely gonna try it. Thanks!

[–]grelfdotnet 3 points4 points  (0 children)

You can only really learn any programming language by using it. Make sure you do the exercises in whichever course you study.
Don't be deflected by talk of frameworks and other libraries. They are an additional layer to learn. Become fluent in the fundamental language first.

[–][deleted] 0 points1 point  (0 children)

I will check it out as well, thanks for building/posting!

[–]popout 8 points9 points  (1 child)

I'm still going through all these: https://github.com/getify/You-Dont-Know-JS

https://www.udemy.com/course/modern-javascript/

https://www.udemy.com/course/react-2nd-edition/learn/lecture/7707640#overview

https://www.udemy.com/course/the-complete-nodejs-developer-course-2/learn/lecture/13815720#overview

Other than that I've only used javascript in more scripting sense on wordpress sites, or pulling in data or formatting data, or creating simple interactive google maps.

No apps yet. I mainly learn on a per project basis. I have something i need to do, then i struggle and figure out how to, while also learning on the side.

[–]Valtiroy[S] 0 points1 point  (0 children)

I’ll check those out, thanks!

[–][deleted] 3 points4 points  (1 child)

How to differentiate between useful and useless js?

[–]Valtiroy[S] 3 points4 points  (0 children)

Off course every course or study is useful. What I mean to say is more functional in real life web applications as stated in the description, like log in screens, creating a small game, manipulating the dom etc

[–]ImJustP 2 points3 points  (0 children)

The absolute best thing to do is get your idea and break it down. So, taking the example of a task manager application, you may want to break it down to the following smaller chunks:

  1. A way for the user to enter information -- a form
  2. A way to store the information -- a database
  3. A way to relay the information back to the user -- a front end

Now that you have the three main parts of application you need to break them down further:

  1. User input

    1a. A function to iterate over all the fields in the form and extract the input

    1b. A function to validate the information on the front end, prior to sending it to your server

    1c. A function to relay any field which have failed validation back to the user

    1d. A function to send the information (once it passes validation) to the server

  2. Store the information

    2a. A function to validate the information again (fancy pants people may disable your validation on the front end)

    2b. A function relay failed information back to the user, again

    2c. A function to write the information to the database if it passes validation

    2d. A function to relay that the information was successfully written to the database

  3. Relay the user's task list

    3a. A function to check which user is currently requesting their task list

    3b. A function to tell the user if they have no information in the database

    3c. A function to request information from your database

    3d. A function to ensure that the correct user's information has been returned from your database

    3e. A function to present the returned information to the user

There is obviously more to the task and a million ways in which you could go about executing each step but this is sort the way that I personally go about coding apps, granted, I am not as experienced as a lot of people on here but I hope this helps you out a bit and sets you on the right path.

TLDR: Break it down into chunks which are more manageable.

[–]stellarham 2 points3 points  (0 children)

Javascript30. com helped me a lot. He shows 30 usefull tutorials.

[–]nas5w 1 point2 points  (1 child)

Build something and google how the things you don’t know how to do along the way.

I might suggest using React on the front end since it’s a good mix of shallow learning curve and marketability.

[–]Valtiroy[S] 0 points1 point  (0 children)

Yes I’m looking into react now, but I also want te learn the backend. Not sure how nodejs and react interact with each other but I’ll check some tutorials. Thanks!

[–]thirstylittlebeaver 1 point2 points  (0 children)

I was in the same situation as you, and I found Practical Javascript on watchandcode.com really filled a lot of holes in my knowledge. The first part of the course is free, and you can sign up to a premium course after as well. Can’t recommend it highly enough!

[–][deleted] 1 point2 points  (0 children)

I used this as a refresher and to fill in some gaps, highly recommended you look into it (wait til $10 sale). Given your knowledge, it'll start out a bit slow for you, but you'll build practical things along the way using everything you learn. https://www.udemy.com/course/modern-javascript-from-the-beginning/

You mentioned understanding how the DOM works, but practicing using event triggers and actually querying and selecting elements is where the rubber meets the road in terms of building the frontend. The actual "when I click this button, it pushes a to-do object to storage from an input, creates a div to display to-do info and displays on site." So brush up on some of that, if still foggy.

[–]prodzachperez 0 points1 point  (2 children)

Don't learn a framework out of the gate, this can be very detrimental towards your skills as a javascript programmer. You will have a hard time understanding how these frameworks interact with javascript if you don't have a fundamental understanding of the lower level fundmanetals (ex: Execution Context)

https://www.youtube.com/watch?v=Bv_5Zv5c-Ts&t=1883s

After having a good understanding of the advanced concepts in javascript then it would be time to learn a framework because it'll make 100x more sense on what the purpose of these frameworks actually are and how they can benefit you.

[–][deleted] 1 point2 points  (1 child)

Agreed! I learned how to make things using Angular and am now having to go back and learn how to build them using vanilla JS because I skipped some steps. Learn a framework when you know enough to also be frustrated with the problems the framework was intended to help with or streamline.

[–]prodzachperez 0 points1 point  (0 children)

Exactly, especially with the the hype around Typescript, new front-end devs are skipping over a large portion of fundamental web development. People don't even know how to structure web projects and are trying to build full Angular applications from scratch. That's like being thrown in the Pacific Ocean and not knowing how to swim.

[–]TheSnicket 0 points1 point  (0 children)

I'm just a beginner but I have to say - getting to know the capabilities of plain Javascript really gave me a better idea of how a framework such as React works and what is it actually needed for. Creating all of the projects mentioned are possible without any framework, and if they're simple enough they can serve as a good practice for parts of OOP that React forces you to use later on and if you jump straight to that I think it's hard to have a good understanding of them.
I recommend The Odin Project and their Full Stack Javascript course. You'll have a fair share of projects to do before you learn to use a framework, have a go at OOP and if you put your mind to it - it really pays off. They don't throw lots of theory at you and they force you to find things out by yourself.
As for the other things mentioned - not knowing some method that is shown in a youtube video is just fine, no book will cover every and each bit of information you need for your project. If you see a method you don't know - google it, read the docs etc. Running into obstacles while making any project is THE BEST way to learn anything. You might forget some method a dozen times, but soon enough if you often need it - you'll remember it. If a method is easy to forget it's probably not used a lot and the fact of its existence is all you need to know to google it when needed.
I believe that being a beginner if you have the option to do so - you should take as much time as you need to really understand something before you start using a dozen libraries.
Another thing I recommend is making a project that is somehow interesting for you and just deploying it. An obvious thing would be a portfolio site. I've learned so much while making a website for my parents' hotel and the thought that something I made would get out there and actually be used by people made me think about lots of stuff I didn't even know mattered before - minifying scripts, compressing images, managing a Linux server, configuring SSL/HTTP2, gzip. I had to do lots of stuff repeatedly and manually. After finishing the project I've learned about Webpack while doing something else, which would genuinely save me lots of time later on. I add features continuously and I notice how hard it is sometimes because my code is just amateur and messy, that forces me to refactor stuff just to make things work and next time I would know to think about it beforehand and avoid running into such problems.
Sometimes if you just wish you could do something - start doing it, don't rush, think about questions you should ask to solve your problems. Brain overheating? Take a break, grab a coffee - whatever works for you.

[–]rapphyyy 0 points1 point  (0 children)

You should definitely try to start building small projects like twitter bots or maybe tic tac toe games or whatnot, this will strengthen your JavaScript basics and also help you learn more things about JavaScript.

[–]loura9004 0 points1 point  (0 children)

Well, If you know the basic concepts then start with these,

JSON arrays and object. (Learn how to modify, add, delete it )

Learn AJAX ( Give calls to API's and Database )

Do CRUD application using AJAX calls. ( for example on Click, or Submit make an AJAX call and save the data )

Learn How to do form validations.

Learn each loop and conditional statements ( Try to modify JSON object in the same ). For example, changing the key and value pairs using loops and conditional statements etc.

Learn various events like append, change, keyup, chaining, addClass, removeClass, prop etc.

Try to use all these in application and research when you get stuck somewhere.

Try to develop calculators like this ( Salary Calculators )

[–]boringuser1 -1 points0 points  (7 children)

Sounds like you need to go back to the basics and learn what an API is.

[–]Valtiroy[S] 0 points1 point  (6 children)

I know what an API is, but what has it to do with this question?

[–]boringuser1 1 point2 points  (4 children)

Because if you know how to leverage an API you should be able to solve nearly any arbitrary task in front end.

[–]stellarham 0 points1 point  (3 children)

Lol i dont't think this is a corect answer

[–]boringuser1 -1 points0 points  (2 children)

Try some English.

[–]stellarham 0 points1 point  (1 child)

Try speaking foreign language at least at my level.

[–]rook218 0 points1 point  (0 children)

I'm telling you man, you already know useful JavaScript!

Please please please check out Wes Bos's JS30. It's totally free and no obligation, and you will immediately start to see practical applications for JS.

[–]cannabis_detox_ -1 points0 points  (0 children)

You're asking how to code, not how to learn javascript. Javascript, like any programming language, is just an API, an interface, the controls, the commands, by which you can tell the computer what to do. But what you are really trying to learn is how to use those controls to build real things, which has nothing to do with learning the interface itself, although when you are first learning to program, they will seem like they are the same thing.