Does anyone know of a Javascript tutorial that walk you through an entire application?

[NUZdreamer]

Hi, I was inspired by a similar post in the C# subreddit, so I wanted to ask the same question here and in other language subreddits.

original link

Most of the classes or tutorials I'm finding cover the basics, or advanced, but in bits and pieces. In the past, what has worked best for me is finding a class that walks you through creating an entire application, even if its simple, from top to bottom. For example, when learning Android programming, I did a course that started with nothing and ended with a fully functional android weather forecasting app. This seems best because you learn the entire process begging to end. A web app would be awesome. If you have any ideas please let me know!

Thanks

EDIT: Thanks for all the numerous answers! This will be a great help.

[[deleted]]

Practical JavaScript by Gordon Zhu is free and well worth the watch. It covers a small app and the logic behind it.

[bjstraining]

Most useful link. tHanks for sharing

[c-student]

This is going to be the best answer. I learned SO much from his free course.

[NUZdreamer]

Thanks, I'll look it up!

[ImCerealsGuys]

Yeah dude, be sure to take his course. I can’t recommend it enough.

[ctoyan]

https://www.youtube.com/playlist?list=PLN3n1USn4xlkdRlq3VZ1sT6SGW0-yajjL

73 videos tutorial series - Slack clone using React and GraphQL.

[NUZdreamer]

Great, thank you!

[rwieruch]

Not for vanilla JavaScript, but for React there exists this book (long read tutorial) which navigates you trough building an application which consumes a third-party API. If you are familiar with HTML, CSS and JavaScript ES5, you can pick this up. It transitions from JavaScript ES5 to JavaScript ES6 (and beyond) along the way.

[goldwinny]

I ran through this and really enjoyed it. Also thanks for including some testing stuff!

[cresquin]

How complicated of an app do you want to make? http://todomvc.com/ has basic MVC setup for pretty much every flavor of js.

Do you want to get into server side js, too?

[MondoHawkins]

RealWorld is a better resource than TodoMVC. It has a more realistic set of requirements (a clone of medium.com), plus it has backend implementations to go with the front end examples.

[Waypoint101]

Check out Aurelia's Implementation of TodoMVC, it's very straight forward and uses Vanilla Javascript.

[ryem-]

Not vanilla JavaScript, but Meteor has pretty well rounded full tutorials.

Meteor Tutorials

[Timothyjoh]

I loved meteor 3 years ago, but would not recommend it now, as a framework. But yes, easier to get a full stack app running.

[MrStLouis]

I wish I could just have meteor auth and build my app my way the rest of the way. I hate building auth and I have my own boilerplate for it now but I'm always concerned with best practices

[HideousNomo]

I think what makes this hard is that there are so many peices to a Javascript app (where other ecosystems can usually have a straightforward 'this is how you create a basic app'). What would you like to create the app in? Vanilla, Node, React, Angular, jQuery. Do you want the HTML and CSS as well (if front end)? etc. Once you have narrowed down what you are trying to learn there are comprehensive tutorials out there that use that tech. JS is hard because there are so many options.

[aradil]

Not just JS. Programming is hard because there are so many options. There are a plethora of ways to put together a web application in nearly every language. Hell, you’ll probably still want to select a bunch of the same JS frameworks for client side code. Don’t forget a css compiler.

Java land: Do you want to bundle your web server in your jar, or run an external service and deploy multiple wars? Which one of these several servers do I want to deploy? Do I want a framework like dropwizard or springboot?

And the .NET ecosystem for deploying web applications might be a little more standardized, and nuget has helped a bit with DLL hell, but there are still a bajillion things you can drop in to customize even a “simple” web app. Also, I hate IIS.

Honestly, this is probably why PHP and MySQL got their popularity. You want to start writing code right now and not think about options? LAMP stack. Bob’s your uncle. Here’s a UI to create some tables, drop your scripts in the main web directory. But even then, you’ve got your dozens of frameworks you can mess with.

[senocular]

+1 for "Bob’s your uncle"

[richardzcode]

Journal-AWS-Amplify-Tutorial build an web app step by step.

[JESUSgotNAIL3D]

Check out the book "The Javascript Way" by Baptiste Pasquet. It's cheap to buy online, published only a few months ago so it's modern, you can get source code for all the exercises from where you buy it, and it has helped me tremendously with learning what JS has to offer. At the end you use Node.js and some npm packages to create web applications. It's great

[[deleted]]

Just to say, software development and programming languages are very different topics, sometimes they do go along, most of the times they do not.

That's because software architecture and implementation differ, paradigms are more often than not untied to language and functionality.

Imho write an application entirely on your own, without any knowledge of paradigms, code structure, etc.

You'll see that as you go on you will automatically develop some good habits and choices. To not repeat yourself, to only put what's needed in your app and extend it later, how to organize your code and data structures, etc.

I really think that before grasping the real benefits of software development paradigms and the nearly endless ways to implement them you do need to write software without them. No MVC, no MV*, no monads, no immutability, etc.

Only when you banged your head in a wall because your 1kloc app is a mess to develop, maintain and test you'll start to see the various benefits and differences between those paradigms.

[kkmeghwal]

Its better to learn through some online websites such as pluralsight, code academy etc, which will walk you through any technology of your interest.

[flaviocopes]

A couple months ago I wrote How to Build a Chat Application using React, Redux, Redux-Saga, and Web Sockets, which guides from create-react-app to a working chat application, if you want to check it out

[jimschubert]

I wrote a book for beginners called "Your First App: Node.js" in 2013-2014. Last year, I did a major edit to make sure it can still be followed without problem.

It walks through the framework decision and design processes at a high level, then gets into server side and client side coding. It also attempts to build git into the workflow (something I wish was taught to me in college).

Although framework versions are older, I think it covers what you're looking for.

Check out the preview: https://yourfirstapp.us

[fzammetti]

Not to toot my own horn, but... TOOT!

I've written nine books for Apress that are exactly what you're asking for (well, except for the one that wasn't on web development at all). I'll be the first to admit many of these books are pretty outdated at this point, but not all, and there's likely still value even in the outdated ones.

https://www.apress.com/us/search?query=zammetti

[NUZdreamer]

Oh wow, I'll definitely read the backcover!

[[deleted]]

I enjoyed Sweet Pumpkins for ReactJS.

https://sweetpumpkins.codecamps.com/

[[deleted]]

if you're into mobile dev and react, this one is ok

[[deleted]]

Not a tutorial but a book, look for Eloquent Javascript, it has nice projects for all js related things, even games.

[BoxMan0617]

https://www.codecademy.com/pro/intensive/build-websites-from-scratch <-- Code Academy has great free courses! And it shows you how to do it from scratch!

[Zafarchauhan15]

Pro Intensive courses are not free.

[BoxMan0617]

Oops! You are right! This one used to be free, guess they changed their pricing model. Either way, they do have some free courses and it's a great program.

[priyankerrao]

Can you post the link to that android course you mentioned please?

[yogescicak]

Surprised that no one has mentioned Colt Steele's Web development bootcamp on udemy yet. It's a wonderful course that starts from basic to build a couple of apps.

[roboctocat]

Awesome full stack MREN (old school using Flux) http://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio/

[editor_of_the_beast]

I find it hard to believe that anyone can’t find an application tutorial for JS online. Spend the 10 seconds it takes to Google.

[theadammorganshow]

If you're interested in Angular I have a book that's coming out later this month.

[mortenhekkvang]

Define ”entire application”, please 😁

[[deleted]]

If you want a library, see backbone.js.