The $27 DIY Coding Bootcamp

This is a guide for anyone who would like to learn to code on their own, but is struggling to navigate the overwhelming number of resources available today.

It is not a list of links to random learn-to-code courses, but a structured, six-stage curriculum of specific resources to be followed in order, roughly equivalent to what you would cover in a real bootcamp.

If you are interested, you can read a more thorough introduction to this guide, why I created it, and what it covers.

Complete beginners should start at the beginning, but feel free to jump ahead at any point if you find yourself covering something you already know.

You will need:

  • A computer with an internet connection
  • The motivation to learn to code on your own

Pro tip: The best developers don't know everything, but they do know how to how to get themselves unstuck. Whenever you encounter a problem, error message, or something you don't understand, get used to Googling it—Stack Overflow is your friend.

Table of contents

Phase 1: Using your computer like a developer

Many people today are fairly proficient at using computers for everyday things, like social media, watching Netflix or buying things online. But not many use them to write software, or understand how the programs they use actually work.

Let's start with a few key differences in how you'll be learning to use your computer.

Text editors

One thing you will need as a developer is a text editor.

A text editor is program that allows you to open, view, and edit plain text files. Developers use text editors to write their code. Unlike word processors, text editors do not add formatting to text, but they can add colors to code to make it easier to read, which is called syntax highlighting. This is part of what gives code its distinctive, colorful, monospaced look.

Ruby code in a text editor

There are many options (on Mac, the TextEdit program is actually a text editor) but the most popular choice among JavaScript developers today is Visual Studio Code. Head over to the website and download a copy now (it's free).

Visual Studio Code (or VS Code) has many features, but you don't need to worry about any of them for now; you just need to be able to open files in it.

The Command Line Interface (CLI)

The command line (or CLI) is what developers use to interact with their computers. You may recognize it as the kind of black window hackers use in movies.

It's a text-based application for viewing, handling, and manipulating files, as well as running programs or issuing other 'commands' to your computer. Other names for the command line are: cmd, prompt, console or terminal.

On Mac, Terminal is the application you will use to access the command line.

Let's learn the basics with your first course:

Pro tip: Use the command line to create yourself a new directory called projects. Then, as you build projects while you're learning, create a new directory inside it for each one. This will help you stay organized and allow you to find all your code easily.

Git & GitHub

Version control systems are tools developers use to save the history of their work. This means that if you mess up or delete something by mistake, you can go easily go back to a previous point in your project where everything was working correctly.

Git is the name of a popular version control system, and it used by most software companies today. You can just use Git to keep track of projects on your own computer, but you'll eventually need to collaborate on projects with others as well.

GitHub is a website where you can upload projects you're tracking with Git. Once your projects are on your GitHub profile, you'll have an easy way to share your code with other people. This is great for showing off projects to potential employers, and also lets anyone else you might be collaborating with grab a copy of your projects, so they can contribute to them as well.

There are two resources I would recommend for learning Git:

This book covers all the same material plus more advanced concepts, so I would suggest bookmarking it for later (chapters 1-4 will be enough for junior developers):

  • Book: Pro Git
  • Cost: FREE to read online, paid version available on Amazon

Finally, create yourself a GitHub account.

Phase 2: Introduction to web applications

The internet

Most people today use the internet, but as a developer, you'll need to learn a little more about how it actually works:

What is a web application?

A web application (or web app) is a computer program that uses web browsers and web technology to perform tasks over the internet.

You probably use many web applications in your day to day activities. If you do things like read email, shop online, watch TV, or edit documents through a web browser, you'll be using a web app. Examples would be Gmail, Amazon, Netflix or Google Docs.

Services like these are very complex by this point, but simple web apps (like the ones you'll be building soon) usually consist of the same core parts: a front end (the client), a back end (the server), and a database.

Let's define those terms:

  • Front end: the portion of web app code that runs in the browser or 'on the client', which would include HTML, CSS and client-side JavaScript. This is the interface of your application; the part users actually see and interact with.
  • Back end: any code that runs on a server, which would instead be written in server-side languages like Node.js, Ruby, Python, Java or PHP. The server's job is to handle requests from the client, and interact with the database as needed.
  • Database: a storage mechanism for data related to your app. For example, you would want to store details of any users that created an account somewhere you could easily retrieve their information again. Some popular databases are MySQL, PostgreSQL and MongoDB.

Phase 3: HTML & CSS

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are languages used to define the structure, layout and visual styles of web pages. They are not considered programming languages, but are important skills to learn for front-end or full-stack developers, or anyone who wants to build user interfaces (UIs) in in web browsers.

HTML & CSS basics

One of my favorite introductions to HTML and CSS is this book:

It is a paid resource, but is a beautiful and very accessible introduction to web development, even for people coming from completely non-technical backgrounds.

I would recommend stopping to read this book before you continue, but if you can't get a copy, a free alternative would be Udacity's Intro to HTML and CSS course.

Chrome DevTools

All browsers come with built in tools which developers can use to make working on the front end of applications easier.

Once you're ready to actually write some HTML and CSS and render it in a browser (I would recommend developing in Chrome to start with), you'll want to use the developer tools. They allow you to inspect the various HTML elements you have created, and any CSS styles you have applied to them.

To learn how, the official documentation is a good resource:

The elements panel will be all you need for now, but save the main link for future reference.

Responsive web design

A few years ago, it was enough to just design and build web apps for laptops and desktops. But now, more and more users are accessing the web on their phones. This means that as developers, we need to make sure our apps render nicely on screens of any size. How do we do this? Responsive design.

Project: build a web page

Using HTML and CSS, build and style a responsive web page (it should work on mobile as well as desktop browsers). You can use the small projects you've worked on so far for reference, but you should start this project from scratch.

Some ideas for what you could build:

  • A portfolio to show off your work (you could add projects to it as you learn)
  • A website for a friend or family member, perhaps for a wedding or small business
  • A page dedicated to something you love: a pet, a hobby, a favorite food, a cause you care about...

Pro tip: if you're not skilled at or don't enjoy design, Google "website mockup examples" and find a design you like. Try to recreate it as closely as you can using HTML and CSS.

Phase 4: JavaScript

JavaScript (or JS) is the programming language you'll be learning and using throughout this DIY bootcamp:

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior, and all major web browsers have a dedicated JavaScript engine to execute it.

But it's not just for browsers. Thanks to Node.js, we can also run JavaScript on servers. Node.js is a JavaScript runtime environment (basically everything you need to run a program) that executes JavaScript code outside a web browser.

JavaScript and Node.js basics

The next book will give you a good introduction to programming, JavaScript and also some Node.js:

When you've finished the book (or while you're working through it), bookmark these resources for reference:

Testing

When you're writing JavaScript (or any programming language), it's important to make sure your code works, and does what you expect it to. You could test it manually, but when you have large, complex web applications, this becomes too much work. You would have to check every feature of an application manually, every time you wanted to make a change to it.

So how do we deal with this in the real world? We write code to test that our applications do what we expect. We can then run this code to automatically test that everything is working (and that we didn't break any existing features).

React

You can just use plain JavaScript to make web pages interactive. But for anything beyond very simple applications, you start having to make decisions about how to structure your code, or risk it becoming very difficult to work with. Libraries and frameworks attempt to solve this problem, and most applications use them, for the following reasons:

  • They help keep code organized and easier to maintain, which is vital for complex applications
  • They provide nicer ways to interact with native browser functionality
  • They prescribe patterns for performing common tasks, which makes it easier for developers to move between different projects and understand what is going on relatively quickly

React (there is no .js or JS at the end) is a popular JavaScript library for building user interfaces for web applications.

There are many, many courses on React, but it's under very active development, with new features being added frequently. This means it's easy for courses to become out of date. For this reason, I like to recommend their getting started guide as a place to learn the basics:

It links to an official tutorial, plus a few other resources. You can choose where to start based on your background and how you like to learn.

Try building a few web pages with React until you feel you have an understanding of what it's for and how to use it.

APIs

By now, you know how to build web pages with HTML and CSS, you've done some programming with JavaScript, and you've learned how to make your pages dynamic and interactive by rendering them with React.

But in web apps, we often want to use data from external sources. For example, say you were making an app to show the weather for different locations around the world, or wanted to list the latest prices for a collection of stock ticker symbols. Where would you get this information from? It changes rapidly, so you couldn't just put static data in your code. Well, you could use an API.


As you start to build more complex apps, you'll want to use APIs to add functionality, and make them more interesting.

Project: build a React app that fetches and displays data from an external API

Using the skills you've learned so far, create a React app. If you haven't discovered it already, you can use Create React App to get started with this project. It's a tool that will generate a basic React project for you, so you can just start writing code without having to worry about creating files and setting up a project first.

This app should fetch some data from an external API, and then display it in some way in the browser. What and how is up to you! Here are some fun ideas for APIs you could use (pick one of these, or Google for other ideas until you find one you like):

Node.js & Express

You already covered the basics of Node.js in Eloquent JavaScript, but feel free to go back for a refresher if you need to.

We're now going to look at a couple more technologies you'll want to learn to use in combination with Node.js before you build your first truly full-stack application.

Remember how React is a library for JavaScript? Well, Express is a popular framework for use with Node.js.

From the official site:

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

I think the best way to learn about frameworks is often through practice, so you'll get a chance to use Express and see how it works in the next video.

Databases

We've already defined briefly what a database is, but to summarize again:

A database is an organized collection of data, generally stored and accessed electronically from a computer system.

There are several different types of databases commonly used with web applications. One distinction it's particularly important to make is between relational (SQL) and non-relational (NoSQL) databases. Both store data, and both are used professionally, but there are some key differences.

Language

You interact with SQL databases using structured query language (SQL). SQL is versatile, widely used and reliable, especially for complex queries.

NoSQL databases on the other hand, do not follow a standard regarding query language. This means different databases use different languages, and most NoSQL databases support programmatic querying through their own custom APIs.

Structure

SQL databases store data in tables using a row-and-column format (similar to how you might store information in a spreadsheet). This makes them a good option for applications that require multi-row operations. However, they require you to write schemas to define the structure of your data before you work with it. This can mean significant design work up front, and makes any future structural changes a challenge.

In NoSQL databases, the data structure can be document-oriented, column-oriented, graph-based or organized as a key-value store. They have dynamic schemas, which means that documents can be created without having to define a schema first, and you can easily make structural changes if you need to.

Some examples of SQL databases include PostgreSQL, MySQL, Oracle and Microsoft SQL Server. NoSQL database examples include Redis, Cassandra, MongoDB, BigTable, HBase, Neo4j and CouchDB.

MongoDB is a free, open source document database that stores JSON-like objects. It has a JavaScript interface, making it a popular choice among JavaScript developers. It's also what you'll be using during this bootcamp. In fact, the stack you're using is so popular that it has a nickname: the MERN stack (MongoDB, Express, React and Node.js).

It's now time to pool all your back-end knowledge, and see how these technologies can work together to build a RESTful API:


Project: build a full-stack web app

For this project, you will create another app, but this time it should have a Node.js and Express back end, and a MongoDB database, as well as a React front end. First, you'll want to learn how to set up a front end and back end to work together.

Once you have a basic client and server running, here is the basic idea of how the pieces should fit together:

  • Your UI will need some way for the user to enter data, probably through a form
  • You will write a REST API with different endpoints on the back end, like the example in the video above
  • When the user submits the form, your front end should POST the data to the back end (via your API)
  • The back end should write (or persist) it to the database
  • Your API should include a GET endpoint which reads data from the database, and returns it to your front end in JSON format
  • When you load the app, the front end should fetch data from the back end via this endpoint, and display it

Here are some ideas for what your app could be:

  • A chore list: enter chores, save them, and then display the list (with a done/not done state)
  • A recipe planner: enter a recipe for each day of the week, and a list of ingredients you will need to buy (don't forget to add update or delete functionality so you can replace the recipes with new ones next week!)
  • A workout journal: record information about your workouts, like when and what you did, plus any progress stats for motivation
  • A budget planner: enter income and expenses (you could also assign each expense a category) and use it to calculate your monthly budget

Phase 5: Advanced topics

Now that you've covered the basics of full-stack web development, there are some more advanced concepts you should learn about. You can get started without knowing these things, as they will not prevent you from getting a working web app up and running for practice. However, you won't be able to build secure, accessible applications—or pass many job interviews—without them.

Security

Web security is a huge area. And while modern frameworks tend to be designed to help developers get security right, you still need to have an understanding of the major topics so you can be aware of the kind of attacks that exist, and avoid exposing your applications to vulnerabilities by mistake.

This article is exactly as its title describes:

This is a longer and more in-depth introduction, but it's still written in an accessible way:

User authentication

One thing that all real web apps (at least those with the concept of separate users) need to have is a login mechanism. You may have noticed that you were building an application without this functionality in the last project. You would of course need to add it if you wanted anyone else to use your app.

This article covers the basic idea of how you could add it:

Performance

Have you ever used a website that just felt... slow? Maybe requests took forever to load, or animations stuttered and didn't feel smooth. You likely haven't encountered performance problems with the relatively simple projects you've built so far, but as applications get more complex, this is something you'll want to know about.

Accessibility

If you don't have any issues accessing the web, you may not have even thought about accessibility. But the reality is—whether it's keyboard navigation for motor control issues, strong color contrast for partial sight, or a screen reader instead of sight—many users do rely on good accessibility to be able to access information.

Project: integrate some (or all) of these advanced topics

Using the web app you created in the last project, add some more features. You could:

  • Hide it behind a login page, so users have to sign up and log in
  • Profile its performance. Are there any improvements you could make?
  • Check it for accessibility. Can you make it more accessible?

Hosting & deployment

If you've reached this point, you've come a long way! You now know how to create secure, performant, accessible full-stack web applications, that can store data in a database and communicate with external APIs. But that's not a lot of use if you don't know how to get them live—or deploy them—on the internet (also known as the 'production' environment).

To do this, you need to host your application somewhere. This basically means putting your code on a server that is optimized to run your application, and make sure it's available at all times.

While you could host it on a physical machine you own, most people don't do this as it's not reliable (if the machine switches off or restarts, your application will go down) or scalable (if your application gets a lot of visitors, your single machine has a limit to the amount of traffic it can handle, so exceeding this capacity would also cause your application to become unavailable).

Cloud computing

The more common industry approach is to instead use cloud-based services. This doesn't have anything to do with actual clouds; essentially "the cloud" means servers owned by a cloud provider (e.g. Amazon Web Services, Microsoft Azure or Google Cloud Platform) and accessed over the internet. These servers are located in data centers all over the world, so you never see the physical server hosting your application, but you can configure it remotely to do what you need.

With cloud computing, you don't have to worry about maintaining hardware and physical servers, and you can easily increase capacity at any time, just by configuring your settings with the cloud provider.

There are several different approaches to cloud-based services, each aimed at different use cases:

Don't worry if you don't understand everything mentioned on those pages, but hopefully you grasped the general idea that IaaS is the most involved—or low level—option, with serverless being the most hands-off, and PaaS somewhere in between.

Heroku is one of the longest-running cloud-based PaaS services. I recommend it as a good choice for beginners because:

  • It has a free tier (limited functionality, but fine for most small personal projects)
  • It's easy to get started because it takes care of most of the details of web infrastructure for you, and you can just configure what you need to through its beginner-friendly UI
  • It has good documentation and a lot of community support (so when you're stuck and Googling for help, there's a good chance you'll find the solution to your problem)

Deploying full-stack web apps

There are three separate parts to a MERN-stack application that need to be deployed:

  • React front end
  • Node.js/Express back end
  • MongoDB database

For client-side React code, you'll create a production build (a generated bundle of your code, optimized to be as small as possible). This—along with images and CSS files—can then be served as a static asset (a file that doesn't change). You can either serve static files from the same machine as your server, or from another static hosting provider (professional applications often use a CDN).

For Node.js code, you need a server that is configured to run Node.js applications. Heroku has first-class support for Node.js, which makes getting up and running reasonably straightforward.

For the database, the easiest option for beginners is to use a cloud-based hosting provider. mLab is a good option because it has a free tier, and a Heroku add-on.

Project: deploy your app

If you followed the tutorial to build your full-stack app, you may have noticed that it linked to instructions on how to deploy to Heroku. You can now follow those instructions (after creating your production build, also covered here):

After that, you'll need to deploy your database. You should be able to do that by following the official documentation from this point:

Phase 6: Computer science

You've now gained a solid foundation in the practical side of full-stack web development. But to move beyond the basics, and tackle more complex programming projects (as well as pass technical interviews), you will also need to learn some computer science fundamentals.

Don't worry, it isn't as scary as it sounds. This fun and engaging course is a great introduction for complete beginners:

You might have noticed CS50 uses some different languages to teach the CS concepts. Don't worry too much about that; you can still use JavaScript to code classic algorithms and data structures.

The final course I recommend will show you how to do just that. It's a clear and easy-to-follow video course that will teach you how to code data structures in JavaScript from scratch (which also happens to be great interview prep!):

Congratulations!

You are now a self-taught web developer.

But you're probably wondering: what next?

You've covered a lot of material, but you'll need to practice your new coding skills so you don't forget what you've learned. Keep building projects—big, small, fun, serious—it doesn't matter, as long as you're learning new things and getting better as time goes on.

You might also like:

Succeed in tech

Get actionable tips on coding, getting hired and working as a developer.

I won't spam you. Unsubscribe any time.