I'll be honest, the last few weeks have made writing weekly particularly hard. Finding the time to prioritize researching, thinking, and writing a weekly newsletter issue has been a challenge. Personal stuff got in the way, and... yeah.
This week was no exception. I've been trying to find more ways to teach you how to be exceptional, but the well is drying up. I don't really have a good article-like story-filled email for you this week 😔
SO INSTEAD I SAID SCREW IT, LET'S REVAMP THE ROADMAP.SH FRONTEND ROADMAP!
Instead of working hard with words, I decided to work hard with diagrams! I will never allow the well to dry up. If it does, I'll just continue drilling deeper 😎
HAVE FUN:
Now, I know what you're thinking... Why the heck revamp the roadmap at all?
Roadmap.sh is a wonderful resource for any developer. It gives you a terrific map of the things you could learn in the future and helps you understand where in the learning journey you probably are.
I only have one problem with it.
While it's great for showing you the recommended order in which to learn each big topic of front-end development, it's missing an overall structure of how these topics relate to one another.
The roadmap, as it is, is basically a diagrammed, ordered list. First, learn HTML, then CSS, then JavaScript, then Git, then... ad infinitum.
As a complete beginner, I have a massive amount of knowledge to learn. I don't know what anything is. I don't have a mental model of how these topics work together.
"What's Git? How does it relate to code? Why are there so many frameworks? How does OAuth work in the front end? Does that have to do with SSR? What is SSR? I'm so confused!"
With the roadmap as it is, I learn a new topic and then have to do all the hard work of understanding how this new knowledge integrates with all my previously learned knowledge. But it doesn't have to be like that.
So, I want to kindly challenge the current roadmap, give a new perspective on learning you could pick up as an exceptional frontend developer, and offer an alternative change to the roadmap:
What if we kept the order in which we learn things as is in the roadmap, but then rearranged the physical locations of the topics and gave them a dotted "bounding box", which shows how they relate to each other?
Suddenly, you look at the roadmap and something magical happens.
I'm not learning 24 different topics that I have to later understand how they relate to one another. I'm understanding that the front end could be divided into these "islands" that host a wide variety of topics. These islands can be called:
- Fundamentals
- Collaboration and workflow
- Frameworks and Architecture
- Security
- Advanced CS
- Type Safety
- Other advanced stuff
And look! I can see categories and their topics at a glance now. I can quickly understand that Git, build tools, linters, and package managers are tools related to collaboration and workflow. TypeScript is for JavaScript type-safety. Frameworks and SSR are heavily related to architecture. As a beginner, would I know how that exactly happens? Nope, but it doesn't matter! I know that those are tightly linked topics at a high level.
That's not even the best part! The new roadmap still respects the original order roadmap.sh has. It's just that now each topic has a number attached to it, which shows what order to tackle each one.
Notice that it's not sequential. If you were to follow the new roadmap, you'd still be jumping around to different islands. You'd first start with fundamentals, learn a few topics of collaboration and workflow, but then fall into picking a framework, and then go all the way back to learn more advanced things about CSS.
This benefits you because it creates a physical map of the topics instead of an ordered one. Which helps because even though learning is sequential, knowledge is relational.
With this type of map, you get the best of both!
Now don't get me wrong – I love and have complete and mad respect for the wonderful people at roadmap.sh, who have helped me and thousands of devs guide our learning and how to level up!
I just think it would be fun to rock the boat a bit, offer an alternative for roadmapping your developer journey, and (hopefully) find a nice way of rethinking how to make learning easier.
Let me know what you think!
And as always, have a wonderful weekend ❤️
This was an article from my newsletter "Exceptional Frontend"
Sign up today and get one story-packed email a week to help you stand out, get noticed, and grow by being intentional with how you're seen.
Top comments (2)
That's a very clever way to reframe it and give it more context. I do the same when working on cars or anything else with "puzzle piece" learning. The kind of thing where a skill might be totally new on its own but it does relate to several other things in tandem.
Aww thank you! I'm happy to hear you use it in other learning situations.
If I ever decide to get into working with cars, I'll definitely use the same learning method 😄