What I learned from dissecting The Web Developer Roadmap
The benefits of learning with the goal of teaching others
Hey freeCodeCampers and others!
I’m Nicole, one of your fellow newbie web developers.
I’m active in the freeCodeCamp community as organizer of the MetroWest MA freeCodeCamp Meetup, and host of the La Vie en Code Podcast. I was just recently awarded 2018 Top Contributor status by Quincy, which basically made my entire year. 😍
I love giving back and sharing whatever I can … which is actually what this article is about!
A little of my story
Like I said above, I’m a self-taught web developer like you may be. I’m not even fantastic at programming or anything. I totally own that. I’ll probably be a newbie forever, and that’s totally okay.
We’re all awful at things when we first try them. We might as well just enjoy the process of learning to code, because stressing it doesn’t make it any easier—and it’s not like you’re getting hurt or anything, right?
I’ve definitely had myself in tears laughing when I expect one thing and get crap output that doesn’t help me at all, or the whole thing just blows up.
It’s part of the process, and it’s fun. Or at least, I think it should be!
So, I’ve been fiddling around in the industry since 2015, when I decided to change careers from Customer Service, and learn to build for the web. I had started out as a Computer Science major in undergrad, but ultimately changed majors after I was discouraged from continuing due to poor performance—perhaps unintentionally, but the damage was still done.
When I began learning to code in 2015, I also started a blog called La Vie en Code. I wrote about a little of this and that, what I was learning, and random thoughts about web development that I figured could help others.
I began coding in Portland, Oregon, then traveled cross-country in early 2016 to be closer to family. While there, I got my first web developer job at a tiny little shop on Cape Cod, MA, which I have an entire podcast episode on because it was… unique. 😂
Today, I’m still living in Massachusetts, and I’ve been through a job, freelancing, and am currently beginning to develop my own courses. It’s been a wild ride, because I had to grow a lot in the process of becoming a name in the industry, and I’m by no means there yet.
I have actually taken the La Vie en Code “brand” to some new heights, though it’s really just me. I started the La Vie en Code Podcast in 2016, dedicated to self-educated web development students.
My interests are pretty deeply rooted in this intersection of technology, psychology, education, and gaming. I talk about a variety of topics, including:
- The experience of learning to code
- The science of learning—and specifically, how to effectively learn the information you encounter
- Games and gamification
- Theories of educational technology
- How to start your own blog
- e-Learning platforms like Treehouse and freeCodeCamp
- Interviews with other self-taught web dev students
- Mental illness and health
(I actually have a pretty inspiring story there, to be honest) - Some simplified concepts, like JavaScript and the DOM
This podcast is my heart and soul. I’ve struggled to get episodes out consistently due to health issues—but I always come back to it, because I love it. You may even identify with that feeling when it comes to web development.
So, let’s talk about this challenge I gave myself back in April.
What is this “challenge” I speak of?
In short: I challenged myself to build a project that expanded on existing information out there for self-taught web developers. In other words, I would take a resource, “dissect” it, and build off of each part to help students better understand the content itself.
Working this way took the pressure off of me to create something entirely new, and learn in the process. The project would be an audio-format walk-through of a resource that I felt could be explained on a more “simplified” level.
Being able to communicate ideas that I have learned is important to me. I rely on others to be able to communicate ideas to me, and I have differences in my learning.
(This is primarily because—plot twist!—I am also on the Autism Spectrum. Learning has been hell for me, so I’m determined to help make it easier for others. I hadn’t yet been diagnosed when I recorded my second episode, How I Learned How I Learn, and I’ve learned so much more about myself even since then.)
Basically, this was as much an exercise in learning and understanding as it was web development. And I knew that going into it. It made me want to do it even more.
So, what was I going to build off of? As a resource, I chose a flowchart created by fellow developer Kamran Ahmed. The resource was called The Web Developer Roadmap… and it was absolutely perfect for my project. I had referenced it several times throughout my education.
What is the Web Developer Road-map?
Kamran Ahmed basically created this flowchart envisioning an “ideal” path to follow in order to learn web development.
It includes:
- Basics/“Required for any path”: The concepts you need to know regardless of where you end up in web development
- Front-end: The concepts and technologies required to build for the Front-End (client-side)
- Back-end: The concepts and technologies required to build for the Back-End (server-side)
- And Dev Ops, which I decided to give myself a pass on trying to cover myself—that’s for a future guest episode, if anyone wants to come on the podcast and teach us! Just hit me up on Twitter.
(Instead of Dev Ops, I rounded out the series with a 4th episode on build tools: task runners, package managers, and module loaders. I’ll explain what they do, and how they can make our developer lives easier!)
What specific topics are on the Road-map?
There are lots of topics across just the Basics/”Required for any path”, Front-end and Back-end sections alone. So, I was really proud of myself when I managed to get each section down to just an hour!
Here are the topics, broken down by path:
The Basics/Required for any path
- Version Control: Git & GitHub
- SSH (Secure Shell)
- HTTP/HTTPS (and protocols in general)
- APIs
- Basic Terminal Usage
- Learning to Research
(Critical for self-taught students) - Data Structures and Algorithms
- Character Encodings
- Design Patterns
- Testing
- Build Tools
Front-end
- HTML Basics
- CSS Basics
- JavaScript Basics
- jQuery
- Mobile Responsiveness
- Package Managers and Dependencies
- CSS Preprocessors/Frameworks/Architecture
- Progressive Web Apps
- Type Checkers
- Server-Side Rendering
Back-end
- Server-Side Langages
- Relational Databases
- Non-Relational (NoSQL) Databases
- Graph Databases
- Caching
- RESTful APIs
- Authentication & Authorization Methodologies
- Message Brokers
- Search Engines
- Containers/Docker
- Web Servers
- Websockets
- GraphQL
This was a lot of stuff. I had to do a lot of researching, as I expected I would. But I was also surprised at how much I knew, honestly.
I included the resources I used in the show notes. Some of the videos I used had less than 5,000 views on YouTube, but I really felt like they really explained the concept well.
What did I learn from the experience?
So Much!
I would highly recommend that everyone challenge themselves to explain topics to others as simply as possible. It’s much more difficult than it would seem!
There’s one particularly important lesson here:
I was not 100% sure, or anywhere close to it, that I would be explaining these concepts correctly. They were all going to be filtered through my own perception, and nobody’s perception is the same. I did bounce many of my explanations and contextualization off of developer friends on Twitter and got a majority thumbs-up before recording.
But beyond that, I just had to trust that I knew enough through my research to be able to speak on the topic, and help others.
I had done a technical topic on the podcast before: JavaScript and the DOM. But that was nothing compared to covering an entire “roadmap” of web development topics.
I had to put on my big girl pants, be open to critique and criticism, and put out whatever I could to meet my own challenge.
And this was a big deal for me, because I never felt like I “knew enough” all throughout school. Like I said, I had to do a lot of growing in order to become an emotionally intelligent entrepreneur! 😊
Specific to the sections, here’s what I learned:
The Basics/Required for any path
I wasn’t really surprised to find that some of these “basics” were not so basic to me. I’m glad I went in with that expectation, so I wasn’t discouraged. I had previously worked with all of these topics in some capacity, so I felt pretty confident researching and speaking on them.
I tried to focus in on some little details and anecdotes, like MacOS Roman when discussing Character Encoding. I learn best when there are small details to remember and associate with the topic.
I was so happy to see that Kamran Ahmed included Learning to Research on the Roadmap. This is an absolutely critical skill that makes or breaks new web developers—we need to know how to learn confidently and effectively from resources, and from each other. I could talk on this topic all day.
Probably the most surprising thing I learned on this part of the Roadmap is that Design Patterns—and on a larger scope, Standards and Best Practices—really play a major role in the code we write.
We basically toddle around at first, just trying to get things to work. But I had never truly realized how much of the guesswork is taken out of problem solving when you just follow these design patterns as early on as possible.
You begin to think in terms of patterns, and patterns are crack to me. Patterns are the glue of the universe.
The Front-end
I’m a Front-end developer, but don’t think for a second that this was a cakewalk. I’ve been totally transparent about the fact that I haven’t built as many projects as I’d like over the course of my own education.
In light of this: it became very obvious very quickly where I hadn’t yet contextualized these topics and tools I hadn’t yet used.
In the Front-end and Back-end portions, the Roadmap begins breaking each concept into a “step”, which I went through one-by-one. I see it as a journey of sorts. It was very helpful to me to see the suggested flow of learning, because each topic really had an opportunity to build off the previous one.
Perhaps the best part of the Roadmap’s configuration is the spacing of project time, or “practicals”, which I always struggled with.
When do you build projects? How much should you know on a topic before you attempt to build something with it? Looking back (and forward) in my own education, I see where these practicals would have helped me use the skills I was learning far sooner than I believed I could.
This is a common theme in my self-education: I always assumed that I needed to know more than I did. It held me up big time. Don’t do this.
But by the end of covering this section, I really felt like I had a new appreciation for the Front-end. I could see its importance once again, and felt proud to know concepts like semantic HTML and modular CSS.
The Front-end really is beautiful. ❤️
The Back-end
I think I broke out in a sweat recording this (LOL). Nah, it wasn’t that bad, and I learned a LOT… but it was definitely an exercise in self-education!
I’ve learned PHP and some NodeJS, mostly out of necessity. I love WordPress and run the La Vie en Code website on it, so I kind of inadvertently became a novice PHP developer as well. Say what you will, I think PHP is a great scripting language.
What you come to realize is that every language has its clunkiness. You really can’t avoid it. As long as technology is consistently being improved upon, I prefer to focus on what it does well, and use a language for those types of projects.
I love seeing testing on both the Front-end and Back-end portions of the Roadmap, because the principles of testing really do apply everywhere. We need to know at every step that our apps are working as expected—on the client-side and the server-side. I think that a lot of new web developers think that testing is just for Back-end development, and I hope to teach them otherwise.
For me, databases were the most fun part of this portion of the Roadmap to dissect. I have only used relational databases, and knew loosely about the differences between relational and non-relational (NoSQL) databases. I had no idea graph databases even existed, so if I sound like I do, it’s because I learned it so I could teach you. 😂
Okay, are you going to share this project or what?
Yes! Context is important, and I think that understanding the story behind it will enhance your experience listening to the podcast.
You can listen to the episodes in order here:
I created this landing page for the podcast episodes, so they’re easy to go through in order. Don’t mind how basic it is — it’s just a home for the episodes.
You can also subscribe to the La Vie en Code Podcast on iTunes, Google Play, SoundCloud, and Stitcher. And I have a dope weekly newsletter, Life in Code, if you’re interested in useful resources, news, and corny dev jokes:
I hope this helps!
I’d love to hear your thoughts on Twitter! If it helped you, if I missed the mark on a topic, if you have additional thoughts… I wanna hear ’em.
