How Web Development Roadmaps Help You Learn to Code

The show opens with a song sung by two mothers, asking if anyone has a map.

Does anybody have a map?
Anybody maybe happen to know how the hell to do this?
I don’t know if you can tell
But this is me just pretending to know

Maps are pretty amazing pieces of technology. They provide a way to get an overview of what you know and what you don’t know.

As tools for navigation, they allow us to be able to plot and plan routes. You can see which parts of the journey are going to be more challenging and which you don’t know enough about.

As tools for discussion, they help reduce confusion and increase clarity. Which hill are you talking about exactly? How far away is that? How long will it take to get there?

As tools for discovery, they help show where more investigation is needed. In ancient times, dragons or sea monsters were often drawn on the parts that were unknown. Our satellite imagery is more accurate but can also make us think we know everything.

The moms in the song wanted some way to navigate through parenting, to identify smooth paths and rough terrain.

So how does this relate to web development?

The FreeCodeCamp Curriculum

The freeCodeCamp curriculum is pretty great. It traces an outline of the most important aspects of web development today.

The way I’ve placed each of the certifications in the image above suggests they are separate and distinct. In fact, they overlap and use core pieces of knowledge throughout.

Read through the lesson titles and headings. They draw out the high notes – frontend, backend, algorithms, data, HTML, CSS, JavaScript, Python and more. Seen together, these draw a map of the space.

There are other maps around. The web-developer roadmaps that Kamran Ahmed has been keeping updated are pretty epic. These have the advantage that they look a bit more like maps, but they can feel overwhelming.

What’s the Purpose of a Map?

I saw earlier versions of Kamran’s roadmaps a few years ago and they made me feel a bit overwhelmed. There was so much I needed to know to become a developer. At least, that was how it felt.

Over time, though, I’ve begun comparing it to flicking through an atlas or Google maps. I love seeing how countries change as you cross a river or mountain range. I enjoy tracing rivers over whole continents and imagine walking the mountain ranges.

I don’t feel inadequate that I haven’t visited all of these countries or that I can’t remember every country or every capital. Instead, I feel empowered and excited by knowing roughly where countries are and how they fit together.

I live in Brighton, and if I want to meet a friend for coffee, then a street map is going to be much more useful.

But, it we were going for a walk in the countryside, tracing a river for example, then yet another type of map is needed.

I find that this is the same for any learning project. For web development, you can use a map that already exists (like the freeCodeCamp curriculum or Kamran’s map) or you can begin to develop your own.

Like looking at countries, you can zoom out and see how the main pieces hold together. At this level, you can see how things fit together.

Here we have large and encompassing topics like “front-end” or “quality assurance”. We don’t need to know everything to about these topics but we can see how they relate to others.

Like looking at cities, you can zoom in to see how a particular technology works. How does JavaScript work? What is the syntax? What are the rules and patterns?

And like tracing rivers, you can see how a practice or convention is handled in the front-end, back-end and everywhere in between.

Here we might think about how data flows between the different parts of a web application. We can imagine the journey of the data from the user, to the front-end, to the database and back out again.

How to Become a Well-equipped Explorer

I’m a largely self-taught developer. Early in my learning career, I would hear whispers of an interesting, cool or new technology and dive in. I’d read books, do tutorials and build small example projects. However, they didn’t connect together in my mind.

To continue with the mapping metaphor, I was being teleported randomly into a city, exploring and then leaving again. Over years, I had ideas about lots of cities and no idea how they fit into countries and how the rivers and landscapes linked them together.

It was only when I had a map of the space that I understood how the knowledge I had fit together. I could see where the gaps in my understanding were and direct my efforts in the right direction.

I realised that I didn’t need to explore the whole world but I could have an awareness of what was out there.

What about you?

What maps are you using to help you with your development journey? Have you drawn a dragon over back-end technologies and decided you don’t want to go near them? Or maybe there is a sea monster hovering over CSS or algorithms?

Excellent developers are always learning. They are studying their maps and deciding where they’d like to explore next.

You don’t have to know the whole world but knowing what you know (and what you don’t) can help take your skills to the next level.