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
- Flexbox
- Positioning
- Display
- CSS animations
- Pseudo-classes
- Pseudo-elements
Learning Javascript
From there, naturally, the first general-purpose programming language to learn would be Javascript. Like HTML and CSS, if you're a web developer of any kind you should probably know how to use this. Javascript is the de-facto scripting language of the web. It allows you to make your web pages much more interactive by adding brains to them. There's almost no getting around learning some Javascript as a web developer so it is definitely a worthy investment. Even if you hate Javascript and end up not wanting to be a web developer, some of the things you learn from Javascript can be transferred to other languages. Here are the concepts I'd say you'd need to learn at this phase:
- Javascript syntax
- Commonly used functions and objects
- Event listeners
- Browser storage
- Control structures (i.e. for loops, if statements)
- Objects
- DOM manipulation
- Asynchronous javascript
- Fetch
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
Let's say that you finally made your decision and went with frontend development. After all, you've grown comfortable with what you've been learning so far which has been, by definition, frontend development. At this point, I'd say it's more important for you to further your underlying skills than to go immediately to the shiny Javascript frameworks out there. At this point, I'd consider learning:
- 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
while practicing the fundamental HTML, CSS, and Javascript skills above. As a bonus, I would consider learning ThreeJS to stand out with some cool 3D animations!
Choosing a Javascript framework
After learning the above skills to a good proficiency, only then I would start thinking about learning a Javascript framework. There are many Javascript frameworks out there in the world but the three most popular are Angular, React, and Vue. In case you don't know what a Javascript framework is, these are a set of libraries and tools that help you quickly build larger frontend projects. They also tend to give you one particular streamlined way to build a working application. You shouldn't always need a framework to do things but for larger applications, they definitely should be used. They help give you organization and pre-built code so you don't have to re-invent the wheel every time. Moreover, don't be too scared about choosing the wrong framework since employers recognize that skills in one framework are transferable to another. From my experience getting my first internship recently, I got hired for a role that involves using a backend framework I never even heard of before! Because the framework is MVC based, as is my favorite backend framework, the interviewer saw that I had a useful connection there that would be of value.
As for my suggestions for frontend frameworks to start with, I don't have too many opinions on this area as someone more focused on backend development. However, from my experience, there are a couple of anecdotes I'll leave you with. The first Javascript framework I learned was Angular. This is because I've seen many people online use it with Spring (my backend framework of choice). As someone who started with it, I would not particularly recommend it for a beginner since it's known for having a steeper learning curve (for a good reason). When I started, it immediately threw at me a confusing project structure with a million things that you just couldn't learn right off the bat. On the other hand, I recently tried a bit of this other Javascript framework called Svelte which I found was quite nice. It's relatively intuitive to use and has some amazing interactive tutorials on the official web page for it. While it's not as popular as Angular, React, or Vue, I heard it's one of the most loved frameworks and I can certainly see why. Do give it a shot!
Backend web development
Ah yes, backend development, my personal favorite. Here, I have more experience since I've been on this path myself. I never knew I wanted to be a backend web developer to begin with, let alone the basic concept of backend vs frontend web development! I've tried new things not sure of where I wanted to go. I played around with HTML, CSS, and Javascript for a short while but wasn't super invested. Then eventually I discovered some basic backend web development with Java and got immediately intrigued. From there, I eventually learned more and grew into the developer I am today. Now, with the all-mighty power of hindsight, I'll give you my insights into what I'd tell my younger self to do.
After learning the fundamentals of HTML, CSS, and Javascript, I would start having a look at what backend frameworks there are to use.
But John! Why do I have to learn HTML, CSS, and Javascript first if those are frontend technologies? Can't I just delve straight into backend development?
Well, that's an interesting question. I can see why you might be thinking this way. The reason I recommended it was because much of what you're doing is to cover the data flow and business logic on behalf of a frontend and work closely with them. Your role is mainly to give them database access, process user actions, and/or provide mediums to communicate with others in real-time (a bit less so with WebRTC existing). Therefore, it helps to understand how a frontend might interact with your system so it's worth it to start from there. Additionally, I still find myself writing some HTML, CSS, and Javascript code from time to time as a backend developer. As a prime example, you might need to send emails from your backend so you would need to create email templates. Overall, don't try to cut corners here and take my word for it. You have to see the bigger picture first.
Choosing a backend framework
With that out of the way, let's talk about how you would choose a backend framework to work with. Naturally, since you already know a good amount of Javascript at this point, I think the most obvious choice you can't go wrong with is to use a NodeJS framework. For those who don't know, NodeJS is just Javascript but outside of the web browser. I don't use NodeJS myself but with the popularity of Javascript, there should be many options for frameworks out there. I personally use Spring Boot which is the most popular backend framework for the JVM (the Java virtual machine, i.e., the Java run-time environment). From my experience using it, it's very powerful and fairly intuitive. The major drawback however is that writing a backend with it while following best practices can take a lot of code. Some of that code even feels like boilerplate. You could use a tool like Lombok to aid that or code in the Kotlin programming language but even still, I find that it is a bit of an issue. However, I would still recommend it to anyone who enjoys object-oriented programming and is proficient with Java or Kotlin.
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
- Authentication
- WebSockets
- 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.
Conclusion
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.
![[Soft Skills and Ramblings Series] The Complete Path To Becoming an Excellent Web Developer](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Funsplash%2Flu15z1m_KfM%2Fupload%2Fv1645566774066%2FZJSfMPDVS.jpeg&w=3840&q=75)
