Learn to Code: How to learn web development

[4 minute read]

Most people learn like this:

how people learn

I'm going to give you a way to circumvent these common pitfalls when learning how to code. This is especially important when learning how to code because it can be pretty complex.

All you need is a clear goal in mind, and a structured work plan:

  1. Cut your losses : Know what you're working towards and what else exists out there so you don't waste your own time.
  2. Build a priority pyramid : In your work plan, itemize a task list so you know what to do 1st, then 2nd, 3rd, etc. Steps happen one at a time for a reason.
  3. Act instead of dream: Stay focused on your goal to keep yourself motivated.
  4. Design your own path : Identifying, practising, and testing your own learning methods, rather than following the rest like a sheep.

You only get one chance to start your coding career the right way. So you need to make sure you know how to learn.

The Real Structure to learn web development

I’m going to give you a structure for you to use on your coding journey which will help you choose the right path for you.

What this structure will bring you is two things:

ONE - understand WHAT you are learning, and

TWO - WHY you are learning it.

I’ve made this structure in the form of a pyramid that gives you a top-level view of what you are actually learning when learning how to code.

Each part of the pyramid represents a piece of knowledge, and all this knowledge together gives you the capacity to create a fullstack application, e.g. your own Netflix, Spotify or social app.

Blog Article Figure

*This is intended to simplify the complexity of web development. There may be additional technologies between stages not shown here.

Doesn’t seem like much huh? Truth is, it isn’t.

The pyramid takes you through all the elements involved in learning how to code. That way, you always know what’s happening and why, which, believe me, in coding, is a BIG DEAL.

What’s important for now is to realize that if you can match your goals with respect to each element of the pyramid, your efforts will not only be more focused, you’ll also get a sense of purpose from your learning.

The Breakdown of the structure

Blog Article Figure

Example: Atom. How do I get started with coding?
What tools do I need to set up on my computer?

Blog Article Figure

Example: HTML, CSS, JavaScript. This is about making content
that your user (or yourself depending on how narcissistic you are)
can see and appreciate. So actually producing content and styling
it to enhance user experience.

Blog Article Figure

Example: Bootstrap. Libraries are like a huge encyclopedia containing information directly usable to actually do things. They’re a set of instructions for the small tasks needed to accomplish the bigger picture things you envision. Example: You want to create a nice animation for your website
that does this, this and this. Luckily, someone already made the
functionalities of those three particular things so you can just
use them instead of having to make it yourself.

Blog Article Figure

Example: Node.js. The Backend is the logic behind your product. It’s the behind-the-scenes action. Take your GPS for instance: the way it calculates the road you should take is not displayed, only the road to take is displayed. But to get to that road, the GPS had to run a bunch of clever algorithms. That is the backend. You don’t see it, but without it, your GPS wouldn’t work. Even when you look at a web form, there is backend involved. Saving the data
of the form and making it readily available to you when revisiting the
web form is all done within the backend.

Blog Article Figure

Example: Express.js. Just like libraries made our lives so much simpler, so do frameworks. Ever wondered why there are always steps to follow in almost everything? Like actual procedures, and an order in which to do things. It’s because we humans need structure to comprehend what is happening around us. And that’s what frameworks do for us. They take care of all
the boring parts of the procedure so we can
focus on building new exciting stuff.

Blog Article Figure

Example: MongoDB. We’re now starting to go deeper into the hidden secrets of coding, and more specifically the internet. A database in itself isn’t hard to understand, but its role in web development is often overlooked. You can
think of a database as just a humongous Excel sheet that contains all kinds
of data. But given the humongous amounts of data stored on the internet, there’s a lot more to databases than just a giant Excel sheet. Databases also offer services to quickly save new information and access any information
much faster than an Excel sheet could ever do. They allow you to merge,
split, and organize your data however you wish. If you have user
accounts, this is where your information would be stored.

Blog Article Figure

Example: NPM. You’ve now seen all these fancy tools that you need to know but how will you ever keep track of all of them? Even worse, how do you get started using them correctly without getting overwhelmed? This is where packaging systems come in. They’re a collection of code that people have shared for reuse by any other user. So, you can check out millions of other people’s codes and learn from them before piecing together your own project. Packaging systems are specific to one language so finding
code that seamlessly integrates in your project is very easy. For
example, logging in with facebook is a package that you
can just download and use for your product.

Blog Article Figure

Example: Heroku. This is how you get your product to your users. You’ve built a project and it’s time to piece together all the parts into one coherent
whole. So you use a deployment service that will handle that for
you and make your product visible to everyone.

That's it.

Follow this structure and you'll never be lost in your web development journey. You'll always know what does what and therefore why you are learning it.

In the next article, we'll explore the paths you have before you.

What should I learn to launch my startup?
What are the technologies I need to learn to get a high-paying job in web development?
What are the advantages of learning one technology over the other?

Subscribe now to find out what the 4 paths in web development are (BONUS: Everything will be in terms of the structure we just saw here)


Subscribe to our mailing list

* indicates required