The Complete Path To Becoming an Excellent Web Developer
The full course from start to end to be the best web developer you can be
Hello fellow nerds! Welcome back to this new blog post. Previously in Learning to Code with John I remember this particular idea popping up:
While someone could tell you an exact path of what to learn to get to where you want to be (which is just fine) I thoroughly believe mindset is a huge part of the battle too.
This got me thinking: shouldn't I also give you guys an exact path of where I think you should go to become the best web developer you can be? After all, that probably is the million-dollar question you all want to know. In this blog post, I'll be answering just that from the perspective of someone who just landed their first web development internship. If topics like these interest you, consider subscribing to my newsletter or following me on Hashnode so you don't miss my future blog posts.
How this guide will work
This guide on the path to being the best developer you can be will be agnostic of a particular type of web development. In other words, this guide will have use for you whether you want to enter backend development, frontend development, or maybe even UI/UX design (although likely more for backend or frontend development because I can't design stuff to save my life). Despite this, I'll try to give my best insights into where you can go to improve or refine your skills in each particular path. Moreover, I'll also be agnostic of any tech stack and will leave you to choose whichever frameworks interest you in any way. This shouldn't matter all that much in the end because whichever framework you choose, these concepts should still apply.
In terms of format, this guide is separated into different steps in your learning as if you knew nothing about web development. The steps laid out will be listed roughly in chronological order. This doesn't mean that you won't be learning things from the previous step simultaneously at some points, but this should give you a rough outline of what to learn first. You might move on to one step but realize you still need to deepen your knowledge of concepts from another step. In programming, there are always new things to learn and you might discover things you didn't quite know you needed to know before. As well, it's worth noting that the parts on frontend and backend development are more or less mutually exclusive depending on where you want to specialize. However, as you'll see later on, I recommend having some knowledge of both sides.
As a final note before we begin, I want to remind you that this guide is more so about what to learn and when than how to learn this stuff. Ultimately, how well you learn these things is up to you, your strategies, your motivation, and your values (as are most things in life). If you want to learn more about how to learn things, check out my previous blog post on this subject
Learning HTML and CSS
If I was starting over again, I'd say that you can't go wrong with HTML and CSS as a starting point. For you absolute beginners to web development, HTML is the language for making the bare bone structure of your pages whereas CSS is for styling them. Any web developer, whether frontend or backend, should at least have a decent amount of skills in this area (though for frontend even more than decent). It's quite visual to use, can be fun to play around with, and not too difficult to get the hang of. In particular, I'd start with learning at least learn the following:
- The basic syntax of the languages
- The commonly used HTML components
- The commonly used CSS properties
- The Box model
- CSS animations
- Commonly used functions and objects
- Event listeners
- Browser storage
- Control structures (i.e. for loops, if statements)
- DOM manipulation
Frontend vs backend development
From here, I'd start thinking more about whether I want to be a frontend or backend web developer. At this point, you'd be much more familiar with frontend web development. However, in general, I would use the following criteria to pick between these two: if I am more interested in the design of pages and the immediate user interaction, then frontend web development is likely for me. If I am very interested in the underlying logic and data flow of an application then backend development is for me. Again, this is only generally true as I understand that the frontend can contain a lot of the application logic too. Explore your options here and see what you like. Whichever path you choose to specialize in, however, I would highly recommend having some understanding of its counterpart as well. That is, a frontend developer should have some understanding of backend development and vice versa. In my opinion, this helps you best understand the entire picture of how a full application would work. This way, you can work more effectively with other disciplines and become a better overall developer. At the same time, it doesn't hurt to be a little more versatile this way. Just don't go overboard and try to learn every concept to be learned and never become a master or even competent at one of them. Specializing in one tech stack should work well enough.
Frontend web development
- Responsive design
- Bootstrap and/or other UI frameworks
- CSS preprocessors
- UI/UX design with Figma or other tools (more so if you are interested in the design side of things)
- Cross-browser compatibility
Backend web development
Choosing a backend framework
What to learn as a backend developer
From my experience, these are the main topics to learn to get a solid grasp of backend development to build cool stuff (roughly in this order):
- The idea of HTTP and REST
- How to build simple REST endpoints in a backend framework using the language of your choice
- Writing automated tests with your backend framework/language (technically optional but HIGHLY recommended)
- Connecting to and using a database
- How to build a simple CRUD app
- Push notifications
- Hosting your backend
Data structures and algorithms
Now, we're starting to get into the concepts you need to become the very best rather than to get some footing. While you can code apps without a strong knowledge of data structures and algorithms (as I have), knowledge in this area can separate the mediocre from the very best. In case you don't know, data structures are different ways to store data, and algorithms are sets of instructions to perform a defined task (often involving data structures). With that being said, every programmer should at least have some knowledge in this area. Knowing the concepts in this field can teach you to optimize your code for better run time and less memory usage. Not only that but if you want to land an internship at one of the top tech companies, they will most certainly test you on these concepts. Overall, while this stuff may be pretty dry, it's more than worth the effort in learning (although I would suspect it's not necessary for you interested in UI/UX design). I would even say that you should learn a little bit about this subject while you are learning frontend and backend web development in the previous steps.
While I am no expert in this field by any means, I do know some of the fundamentals and will be learning more as I continue my journey. Here are the types of concepts I know you'll have to cover here:
- The various data structures that exist and their strengths and weaknesses
- The applications of different data structures
- Algorithmic analysis using Big-O notation
- Tail recursion and why it’s useful
- Known algorithms
Learning these concepts can deepen your toolbox as a developer giving you the tools to tackle complex problems you might have never solved before. Furthermore, as a couple of resources to practice or learn these skills, here's what I'd recommend:
- Cracking the Coding Interview by Gayle Laakmann. While I haven't read this book myself, this book is an absolute classic that everyone recommends for programmers to read.
- Leetcode. This is a very popular website for programmers to practice solving technical interview-type questions. It has easy to very difficult coding problems involving data structures and algorithms.
Writing clean and maintainable code
Let's face it, whether you like it or not, you will have to spend most of your time as a programmer debugging and maintaining existing code. Thus, being able to write clean and easily maintainable code in the first place is a highly valuable and sought-after skill. When I think about what separates a mediocre programmer from an excellent one, writing clean and maintainable code is at the top of that list. Believe it or not, writing clean code is often better these days than writing faster code. This is because many applications don't stress performance quite as much while hardware continues to get faster. Thus, being able to write good code that is not as vulnerable to bugs is perhaps the most valuable asset to have on a technical level. Mastering this field includes:
- Selecting good variable names
- Knowledge of software design patterns
- The SOLID object-oriented principles
- Avoiding code repetition
- Testing practices
- Knowledge of anti-patterns/code smells.
You might be wondering about that part about code smells. Did you just say my code stinks! Code smells are bad practices in software development that can often lead to hard-to-maintain systems. Here is one excellent resource my professor showed me on this topic. This resource goes through the types of bad programming practices, how to fix them, the benefits of fixing them, cases where you can ignore them, and more. Another resource on the topic of clean and maintainable code is the book Clean Code by Robert Martin. This is another classic book everyone recommends every programmer should read.
With that, you should have a clear picture of the full path I would recommend going as a new web developer. From my own experience going through this journey over the past few years, this is what I would tell a younger version of myself to do to reach where I want to go more effectively. While I'm still on the journey to becoming the greatest developer I can be to this day, I will possibly update this guide to reflect my deeper experience to come. I hope that through this knowledge I passed on, you can find a clearer path to achieve your dreams as a web developer. Happy coding!
If you like what you read, consider subscribing to my newsletter to be notified of new blog posts. Also, check out my programming tutorials here.