Over the last year I've had the privilege to work with a bunch of software engineers I'd describe as "learners"; those who are at the start of their web development journey. I've noticed that these learners, despite varying learning styles and backgrounds, all required a similar thing - a stack that works without them having to make decisions about what to use or why.

Limit choices to aid learning

This is The guiding principle of this article. The web is blessed with a plethora of open-source libraries, tools, packages and solutions to various problems. This is brilliant if you know how to evaluate these options but to do that you need (you guessed it) experience. Which you don't have when you're just starting out.

No one can learn everything at once, so having an opinioned set of tools that work well together so you can pick up the basics is critical. This is something Ember.js has always done well at, a "batteries included" model.

So onto the point. I'm going to give you opinions to use as your basis. In time you'll develop your own opinions; "I can't believe Alex likes library A - I much prefer library B". And that's great! But until then, you can borrow mine to help with your development journey...

The "learner" stack

What the learner stack is comprised of depends on where you are in your journey. Some tools "Just work" and you can learn more about them later. Others are foundational and without those building blocks, the next set of tools won't make sense.

There are a few tools common to all the stacks that we'll need to have:

• node - cross-platform JavaScript runtime that allows us to run javascript from the terminal (don't worry about installing this - nvm will manage that for us)

• nvm - a version manager for node, that lets us swap between versions easily, follow the installation steps here.

• npm - node package manager - the JavaScript open-source ecosystem is rich and (almost) all of the tools we'll be using we can install using npm. We'll get this automatically when we install node!

With that done, let's create the rest of the stack. See the options below, and pick the one that you feel applies to you (I'd strongly recommend you attempt them in order). Try writing/building something and, once you feel comfortable, come back and try the next stage!

I want to be able to write basic websites using JavaScript, HTML and CSS

• JavaScript

• HTML

• CSS

• Serve

You can find a working example to get you started here.

I want to be able to build an app in React

• Webpack

• Babel

• React/React DOM

Strangely, this setup is probably the most complex to do and as such, I've put together another working example that you can get started with here.

I want to be able to use React meta-frameworks to load data and Server Side Render

• Next.js - This provides all the build tooling out of the box with create-next-app, so I won't go into too much detail here.

Starting with the basics mean's that you will have the foundations

It's easy to be tempted to jump to the all-singing, all-dancing Next.js solution, but I strongly advise that you follow the other steps if you haven't covered them before. Getting the foundations nailed will make it much easier to understand and debug issues with these frameworks down the line. After all - next uses react and react uses the same API 's you'll have used in the basic HTML website.

Take heart - Getting stuck is a key part of the process!

With these working examples, try to build something where you can't just copy and paste from a solution because getting stuck and figuring out the problem will help cement it in your brain and make sure you retain the information that much better!

The journey doesn't stop here...

If you've worked your way through all these examples - congratulations! You might now be thinking "what's next?". I'd encourage you to keep exploring web technologies, and start developing some budding opinions of your own!