Intro

I have had great success taking young untested but highly motivated and intelligent people with very little if any training in web development and have trained them up to become proficient junior developers in a very short time. This isn't to say that eventually they couldn't become senior developers or even reach a web app architect level, that just takes a lot more time and experience.

This post is intended to guide a user from zero coding, just knowing how to browse the internet and use a text editor, to basic proficiency in the MEAN stack.

Important Update 10/3/15:

Hey everyone great news! If you are looking to learn the MEAN Stack in a more structured setting and explore the world you might want to check out the new code school me and some friends started called Nodmaic Code School.

What if I already know a language?

That is great, then just use this guide to fill in the gaps to learn mean. I made the switch a couple of years ago to NodeJS and there is a learning curve mainly because most of the barriers that are imposed on you from other languages are suddenly lifted but its not difficult at all to overcome. Dig in and have some fun.

The M.E.A.N. stack:

The MEAN Stack is a combination of web languages and frameworks both server side and browser side that, when put together, allow developers to rapidly build and scale the web applications you use everyday.

Mongo Database:

A NoSQL or non relational database. The syntax for interacting with MongoDB is similar to JavaScript.

ExpressJS:

Express is a web server framework that runs on NodeJS. Its a highly customizable server side(sometimes referred to as "Backend" framework.

Angular JS:

Angular is a browser side or "frontend" framework for building interactive applications that have advanced functionality that runs in the browser.

Node JS:

NodeJS is an extremely flexible

This is kind of redundant being as you need NodeJS to run express but I guess 'M.E.A. stack' does not have the same ring to it

TownSquare:

(Currently branded 100x)
TownSquare is a community management tool. We help various collaborative communities, such as coworking spaces, bring their members together, collaborate on projects, find work, and have fun.

About this guide:

Index over Memorization:

This guide aims to guide you to learn some fundamentals programming techniques and then expose you to a huge variety of situation specific knowledge. Do I expect you to memorize everything in this guide? Hell no! You are not doing brain surgery and this sure as hell isn’t a bullshit high school exam. You have a time to Google answers. I want you to know where to look for and how to find answers. The tech moves so fast it is almost impossible to memorize all of this. Just know how to find the right answer and apply it.

Cross Functional Skills:

It is important to have a solid cross functional skill set. In my book Ship Or Get Off The Pot I stress breaking down silos and working in cross functional teams. You DO NOT need to be an expert in everything I am teaching here. You will most likely discover a passion and aptitude for a specific part of building the web app as a whole, but it is essential you have a fundamental understanding of how everything works and fits together so you can be an effective part of a larger team(if you are going to work with me. If you are on your own then you might want to become a one man army).

What this guide is NOT:

This guide will not make you a top notch senior developer, but no guide will. It takes a long time and a lot of hacking away to really learn these skills. Learning the subtle nuances will take a long time.

I started to program in the 6th grade and have been coding, hacking, and architecting systems ever since and I still learn new things everyday.

Why I started with HTML:

Though a lot of what I will guide you towards is JavaScript based I started with HTML. T
he reason is because most of you are familiar with web pages.
Web pages are built with HTML then made interactive with JavaScript.
Some of the concepts in programming are highly intangible and difficult to explain.
Starting with HTML should give you a good frame of reference to start out with.

Step 1 - Setting up:

Open a text editor on your computer. You can use the default but I recommend one of the following:

NOTE: I use WebStorm but that is a bit advanced for this early in the learning process

On your desktop create a file called index.html

Copy and paste the following into index.html

<html>  
   <head>
       <title>My test web app</title>

   </head>
   <body>
       <h1>Hello World</h1>
   </body>
</html>

Save the file then open the file in your browser of choice.

I strongly recomend Chrome

What is HTML:

A long time ago when the internet was first starting out and no one ever dreamed we would have fancy realtime updating applications like Facebook, Youtube, and Twitter developers just wanted a way to create and share documents through the browser.

They took an existing language [XML or EXtensible Markup Language](http://www.w3schools.com/xml/
) and created a specialized version of it to run in these ne# learn-mean-stackw things called browsers. That specialized form of XML was HTML or Hypertext Markup Language.

XML:

XML is merely a syntax. Computers are not incredibly smart so you have to give it very specific directions.

I would NOT bother to go through the tutorials on W3 but I would make it a point to understand how XML works.

HTML:

There is acuatlly a pretty good graphic of how HTML is pretty much laid out from a programatical standpoint later on in the Document Object Model Section

The DOM - A living breathing thing
HTML is just a blueprint

Notes on "paths":

Say for example you are editing the following web page: http://mywebsite.com/dir1/dir2/page.html

<img src="image.jpg"> Would open http://mywebsite.com/dir1/dir2/page.html

<img src="/image.jpg"> Would open http://mywebsite.com/page.html

<img src="/dir3/image.jpg"> Would open http://mywebsite.com/dir3/page.html

<img src="http://otherwebiste.com/image.jpg"> Would open http://otherwebiste.com/image.jpg

Now assuming you are on an https <img src="//otherwebiste.com/image.jpg"> Would open https//otherwebiste.com/image.jpg . It will look at the protocol that the currently loaded web page is on and use that.

Step 2 - Basic HTML:

Since I am not going to even try and compete with the sheer amount of free tutorials on the web and I often use the exact same tutorials as a reference as I build my projects I will now refer you to a series of web tutorials.

Warning:

You might be tempted to get side tracked learning everything these tutorials recomend, that is fine and all but remember I crafted this list to get you to a specific destination, those sites may not have the same destination in mind.

I suggest you start by familarizing your self(NOT MEMORIZING) the [W3 Schools](http://www.w3schools.com/html/]

Stop when you hit the section on HTML Tables and return to guide for the next steps, Anything past that is not essential to moving toward the goal of this guide so skip it for now but feel free to come back and study later.

Step 3 - JavaScript:

HTML by nature does not have much brains behind it, its purpose is primarily to look display information in a pretty way.
Originally HTML was not really intended to perform logical calculations or be interactive beyond linking to other pages.
Modern HTML/HTML5 has a little but is still limited.

This is where JavaScript comes into play. Javascript allows you to create interactive websites

Check out the W3Schools JavaScript

JavaScript Fundamentals:

There are a couple of interesting things that make JavaScript as a language unique. If you don’t know anything about programming this will be a difficult thing to wrap your head around. You will have the advantage of not learning it one way and now needing to relearn it. I would say just skip this for now and come back once you have a more advanced knowledge of the language. If you have used other scripting languages then you will want to read up on the following:

Scope/Closures:

Scope Closures

Non-Blocking/Async:

Here is a decent post on Non Blocking Javascript

JavaScript in the browser:

Once you are familiar with Javascript fundamentals

Javascript and the Browser's DOM

Subsection:

If you haven't used git yet now is the time to get started. Sign up for a free GitHub and start learning. Git is a version control language. It is like Google Docs for Code but a little more complex.

One of the big services on the web is GitHub which is an amazing tool.

IMPORTANT NOTE:

I typically don’t hire any devs that have not published at least something on GitHub. GitHub is like LinkedIn on steroids to developers(at least us open source types. Post anything and everything you are working on, I myself have a huge list of repos on GitHub.

Step 4 - Basic Frameworks:

The next step is to get familiar with one of the tools that can be used to make development easier.
So far in this guide you have been working with basic js.
Almost every major web application uses these Frameworks to make development easier.
Each framework does something different. The first framework I will show you is Twitter Bootstrap

Bootstrap:

As a hardcore hacker type Bootstrap is far from the coolest framework I use on the frontend, Angular is much more interesting.
But because of its graphic nature and their for easier to wrap your head around.

Bootstrap was developed to make building Responsive Web Pages. This means a page that will easily resize and fit in smaller browsers like mobile and tablets.
It is primarily a graphical framework though it does have some functional additions and new components that are not available in basic HTML.

Their getting started page is overly complex. To keep from getting overwhelmed I would follow these steps:

Step 5 - Advanced Frameworks:

Now it is time to learn a bad ass framework, AngularJS. Angular is a next generation browser based framework for building really interactive web applications.
It is quite powerful.

I suggest you start by following the free tutorial on The Angular homepage.

I am surprised by how sad Angulars default tutorials are so I will try and give you some bullet points of what you will need to learn to become proficient.

Modules Basic app setup - <html ng-app=’yourAppsModuleName’>
HTML binding Directives - These are crazy powerful snipits of html Controllers Services - Specifically the all important ngResource for calling out to the server

There is a lot more to angular but that is the basics. There are lots of tutorials, most of which were not around when I was learning Angular. I am actually looking to you to help me find some good ones. Send me any recommendations.

Step 6 - NodeJS:

Enter NodeJS:

NodeJS allows you to write non-browser based applications in JavaScript. What kind of applications:

Quick Exercise:

Start by clicking the install link on the site

Got through the install procedure then create a file called node_cli_test.js on your desktop.

Copy and paste the following code on to your desktop:

var fs = require('fs');  
console.log("About to create a file");  
var file_loc = __dirname + '/node_test_file.txt';  
fs.writeFileSync(file_loc, 'This is a test');  
console.log("Successfully created a new file:", file_loc);

Open up your terminal and navigatd: 10/1/15 2:31PMe to your desktop then type the following:

node ./node_cli_test.js

This should execute the code and create a file on your desktop.

Using NPM:

NPM stands for Node Package Manager.
A "Package" is like an angular module. Its library of code to help you complete a task.
All of the 3rd party packages for NodeJS are managed on https://www.npmjs.com/.

You will need to know how to install various packages using NPM. It is pretty simple, just type npm install package_name.
For example:

npm install underscore

Tutorials:

I don't have a lot of tutorials on NodeJS that I recomend but if you want to play around check out http://nodeschool.io/#workshoppers

Step 7 - Express JS:

Express JS is a framework for quickly building Sever Side Web Applications using node:

Start out by Installing express and continuing through their Getting Started and Guide section.

Their guide section is fairly robust starting with Routing and Using Middleware and going through advanced topics.

Common Middleware:

Check out the common 3rd party middleware

Not included in this list but vital to workng with our team is Passport JS

Step 8 - MongoDB:

Saving Data with MongoDB. MongoDB is a NoSQL or non relational database. It makes SQL and most traditional databases look like an excel spreadsheet. You can store complex objects in Mongodb. Those of you that never worked with old school SQL cannot appreciate it but it is huge advantage
Start by going over the [in browser demo for mongo](http:

Step 7 - Express JS:

Express JS is a framework for quickly building Sever Side Web Applications using node:

Start out by Installing express and continuing through their Getting Started and Guide section.

Their guide section is fairly robust starting with Routing and Using Middleware and going through advanced topics.

Common Middleware:

Check out the common 3rd party middleware

Not included in this list but vital to working with our team is Passport JS
//try.mongodb.org/?_ga=1.263434828.1335229757.1422827841).

Once you feel comfortable you will want to install MongoDB locally and play around locally.

Finally start playing around with Mongoose.js, the NodeJS package that we will use to talk to the MongoDB Database. Most of the basics can be covered in their Getting Started Guide.

Step 9 - Advanced Topics:

I won’t cover this in detail now but this is far from the end of what you can/should learn. Here are some other things I suggest you start to learn when you get a chance.

Hosting/Infrastructure:

I use Amazon Web Services or AWS because I have working with them for the better half of a decade. I even started to build my own informational product around AWS. There are plenty of other good ones to learn but AWS is pretty amazing once you get your head wrapped around it.

Mobile:

For mobile unless you are a purist or your building some fancy 3d graphic processing tool I strongly suggest using modern rapid prototyping tools such as The Ionic Framework (Shout out to Max and Ben at Drifty). Ionic allows you to write your web app in HTML and JavaScript then run them in a Browser window inside of a running app on both iOS and Android(they did support other devices now I am not so sure).

This is possible with the Cordova framework. It makes writing these a lot easier.

PhoneGap takes it a step further by automating a number of the build and deployment processes that you need to do manually with Cordova. Of course they charge a little bit.

Conclusion:

This little guide was just to get you started on your journey. Go out there and get your hands dirty, play around, come see me about a job, or just have some fun. MEAN Stack developers are in demand right now. I know we are hiring so once you have a couple things on your GitHub shoot me an email and lets chat.

PS - Want to return the favor:

Did you get something out of this post? Would you like to give a little back in return? Feel free to donate as much as you like in return. Every little bit is appreciated. Thanks! ~Matt

    •
Tags

Tech

About the author