Photo by Matt Duncan on Unsplash
Roadmap to Becoming a Front-end Web Developer (with Free Courses)
An abridged roadmap to help you become a front-end web developer, including learning resources.
17 min read
Table of contents
- What Should You Know Before Starting to Code?
- Learn Git and GitHub
- Learn Automated Testing
- Data Structures and Algorithms (DSA)
- Some Tips on Becoming a Software Developer
- Next Steps
I’ve been coding for almost 6 years now. I made a lot of mistakes during the first 2-3 years learning to code. I spent time studying a lot of things that I don’t use now. At the time it felt amazing to know a lot of things. “I’ll be a master of many programming languages and tools“, I said to myself. If I had a mentor to guide me those days I would’ve made better use of my time and I would probably be a better web developer than I am today.
But to me the most important thing is the time I wasted — I can never get it back. This roadmap is purposely written so anyone reading this does not make the silly mistakes I made. In the next paragraphs I will enumerate the concepts I would’ve studied — in the right order — if I had known what to focus on.
This article is purposely written for people who want to become web developers, especially people who’re switching careers and do not know where to start. If you know someone who falls in this category, kindly share this with them.
So, if I could go back and learn web development again, how would I do it? Let’s find out.
⁉️ What is Front-end Development? Everything you see on a website, like buttons, links, animations, and more, was created by a front-end web developer. It is the front-end developer's job to take the vision and design concept from the client and implement it through code. — FreeCodeCamp
What Should You Know Before Starting to Code?
One could argue that people should have an idea of what they're getting into before jumping straight into writing code, like learning the fundamental concepts of programming. This should help them better understand their instructors when learning to write actual code. That’s how my high school syllabus was structured. We studied data representation (data types et al) and algorithms (flow charts and pseudocode) before diving into actual programming (don’t worry if you don’t understand these terms).
I have a method that is better in my opinion: learning to write code should teach you the fundamentals of programming; more advanced coding concepts can be learnt later on. You most likely don’t want to learn coding as a hobby. You probably want to start working as a web developer as quickly as possible so why waste time beating around the bush when most of the concepts can be learnt whilst doing the actual work?
In conclusion, the only requirement is that you know how to operate a computer. Most of the learning materials will not talk about simple things like creating a folder, installing software, etc, but you don’t necessarily have to be a power user.
With this abridged roadmap, you will dive straight into learning to write code. You can learn the remaining secondary-but-very-important topics as you learn or after you’ve become a bit conversant with coding.
Think of the website you want to develop as a building. In Ghana, the most common way of building a house is with concrete. Of course, you need to construct a foundation and then build the structure of the house with concrete blocks (or bricks) and mortar (a mixture of sand, cement and water). We can throw the roofing and doors and windows as part of the building’s structure. In web design, you can think of using HTML as a way to design the structure of your website (house 😉). HTML (Hypertext Markup Language) is used for defining the elements that your web pages should display. Elements include text, videos, buttons, input fields for typing text, and so much more.
You could move into your house at this point, but come on, it would look boring, no? So, you go a little bit further — you want to paint the house and decorate it so that when you call your mum you can boast and say:
You would plaster the building so the walls feel smoother and make it easy to apply paint. You may go even further to cement the compound and make it more appealing to walk on, and well… you get the idea. In web design, you can write CSS (Cascading Stylesheets) to style your web pages. If your website looks awful, chances are visitors will not stay long on it. Designing the structure of the website with HTML gives you a bare-bones user interface; I like to call it the ‘skeleton’. CSS is there to help you add flesh to the skeleton you’ve designed.
If you can’t afford it, sign up for Front-end Mentor. They have free web design challenges you can take part in to sharpen your skills. You first need to signup for an account on GitHub. In this video, Kevin Powell shows you how to take a challenge on Front-end Mentor.
📝 Note: Organise your projects into folders and keep them somewhere safe. You will upload them to GitHub later.
- The best way to learn how websites are built is to build them yourself. Visit any of your favourite websites and try to clone them — develop the website yourself. Look at the pages, and replicate what you see with your own code. This will help you better understand how such websites are built. When you’re stuck search for solutions on Google. This video can teach you how to search for stuff on Google as a programmer.
Learn Git and GitHub
In brief, Git is a version control software that allows developers to manage their code. It provides a convenient way to keep track of all the changes you make when building software. Whilst GitHub is a hosting platform for software development that uses Git as its version control system. GitHub takes the power of Git and ‘webifies’ it (that’s not a real English word ); that way it’s easy for teams to collaborate on projects.
Don’t worry if the above explanation is too much for your brain right now. The resources below will help you understand better:
The Ultimate Git Mastery Course — paid course. This is the course I took and it is the best course that teaches Git and GitHub, in my opinion. I strongly recommend it. If you can’t afford it, watch this 2hrs video instead: Git and GitHub Tutorial For Beginners.
After taking these courses, push the projects you’ve built to GitHub. Your GitHub profile will be your portfolio; you can show these projects to a potential employer when you start looking for a job.
…and then TypeScript? 🧐
To learn TypeScript, enrol in this paid course: Understanding TypeScript. This is the course I took and strongly recommend. If you can’t afford it, here’s a free alternative: Typescript tutorial for beginners.
💡 You can skip learning TypeScript now and jump to learning a front-end library or framework 👇. You can come back to this step and learn TypeScript but it is not mandatory don’t pressurise yourself into learning it. However, you must know that a lot of companies out there want TypeScript developers so learning it gives you an advantage.
There are 3 popular frameworks out there — in terms of usage — and the developers who have studied these technologies are in high demand. They’re namely, React, Vue, and Angular. There is also one called Svelte, but it isn’t as popular as the first three at the time of writing.
Should You Learn React, Vue or Angular?
My advice is to do some research about what technology companies in your area are using the most, and pick the right one and learn. There is a lot of debate amongst developers on which one is better but honestly, it’s safer to pick one that would guarantee your pocket is filled. As a beginner, earning some money with your skill can go a long way to motivate you to continue learning.
If you’re not looking at the job market and would like to learn the easiest of the three, I would recommend you start with Vue. It is easier to learn than the other two. Angular requires knowledge of TypeScript, so keep that in mind.
If you choose to learn Vue, you can start with these courses:
Vue - The Complete Guide — paid course (recommended).
Vue JS 3 Tutorial — free alternative.
If you choose to learn React, you can start with these courses:
Build Web Apps with React & Firebase — paid course (recommended). This course teaches you React and Firebase, a service you can use for your applications without having to build your own server.
React Course - Beginner's Tutorial — free alternative.
If you want to get really good at React, you can buy Kent C. Dodds’ EpicReact course. It may be expensive but trust me, it’s worth the money.
I’m not an Angular developer so I couldn’t find a lot of good resources for you. If you choose to learn Angular, you can start with these:
Angular - The Complete Guide — paid course (recommended).
I could not find a good beginner-friendly video on YouTube that teaches Angular. The ones which I would recommend for beginners are now outdated. But don’t fret. You can read the official tutorial, Angular - Tour of Heroes app and tutorial, to get started. Feel free to do your research and find a better alternative.
When you begin to feel confident writing Vue, React or Angular apps, dedicate a lot of time developing web applications using the framework you learnt. You can begin by searching online for examples of applications you should build. This will give you the experience of building real-world web applications.
Learn Automated Testing
The most common way to test that your application is working fine is to manually test it by using the application yourself. You go through the app clicking and scrolling through to ensure the code you wrote is functioning as expected. There’s nothing wrong with this, but what if your app is very huge, with a lot of features? Would you go through page-by-page, feature-by-feature, and test everything? Nah, that’s a lot of work.
One effective way to ensure your application has no bugs (malfunctions) is to write code to test your code.
You know all that going through feature-by-feature to test that your app works? What if we could let the computer do it for us, so we don’t have to go through the stress ourselves? That is exactly what automated testing is about. You write code… to test the code that you have written… for the application. The tests you write will not add anything visible to the user interface, but only you the developer (and of course, other developers working on it).
Coding instructors don’t make enough software testing courses.
Coding instructors like to teach how to develop software but most of them don’t talk about writing automated tests and when they do, they create content that does not go deep. Yep, developers hate testing that much 😅. There are just a few materials out there so your best bet will be the official documentation that comes with the tools for writing tests.
Both courses will introduce you to the official documentation websites of the tools you’ll be using. Keep those in mind and use them when you need them, like a manual.
If you can’t afford both, this course on YouTube will help; it doesn’t go as deep as the two courses mentioned above. Again, if you can afford it, don’t be a miser like me — BUY IT!
Testing React, Angular and Vue Applications
Testing React Apps — If you purchased Kent C. Dodds’ EpicReact workshop*,* it has a full module focused on testing React apps. Testing React with Jest and React Testing Library (RTL) is not a free course, but according to the reviews, it is worth the money. For those thinking “gimme a free course, Gyen 😒”, I see you; this YouTube playlist is for you. (At the time of writing, Vishwas is still adding videos to this playlist.)
Testing Vue Apps — This page has a list of courses curated by the Vue JS community.
Testing Angular Apps — Angular Testing Masterclass (Angular 14) seems like a good course. A free alternative is the Testing Angular e-book by molily. If you hate reading, now is the time to change 😂.
Data Structures and Algorithms (DSA)
Early on I mentioned the term algorithms as something you’re supposed to learn. I shifted it to this point because you now know what it takes to build a web application. It is now time to write better software. Also, during job interviews there’s a high chance you will be tested with problems that need knowledge of data structures and algorithms; better go prepared as employers want to hire developers who can write efficient software. Learning DSA will help you get there.
Paid courses to learn DSA:
Some Tips on Becoming a Software Developer
You cannot memorise everything so don’t force yourself. There are things you must remember; like the fundamentals of a programming language, (defining variables, functions, etc) and the design patterns of your framework/library. Most of the tools you will use have documentations that you can use as manuals. Understanding the how and why is the most important thing. If you forget something, you can ask someone or ask Google.
Do not learn more than one thing at a time — focus on one thing and one thing only. You may be tempted to learn different technologies simultaneously because you’ve fallen in love with what you’re doing. Here’s a fact: programming is more fun when you’re learning something new. Don’t let the excitement of learning a new thing distract you from your path.
Let the progress of others motivate you. Don’t look at what people are developing and start doubting yourself. Most of them started before you and put in a lot of work to get to where they are. If you’re disciplined you’ll get there too. A time will come you’ll look at what you built in the beginning and you’ll start laughing at yourself because at that time you can build something wayyy better.
Network with other people and seek advice from other experienced software developers. Twitter is a perfect place to do this. You’ll even find a lot of learning materials on Twitter. (Fun fact: the developer community on Twitter is commonly referred to as Tech Twitter.) You may be a 10x developer, but someone in your circle could provide a job opportunity for you. I didn’t talk about job search because it’s out of the scope of this article.
Read other people’s code. One of the best ways to get better is to know how professional software developers build software. GitHub is a perfect place to do this. There are open-source projects on GitHub you can contribute to and learn from.
Learning to program has no finish line, it is a never-ending journey. You keep learning new things every step of the way and make up for the mistakes you make along the way. Don’t get comfy with what you learn. The more you learn, the more you’ll realise you don’t know.
Practise, practise, practise. Build more projects and push them to GitHub. As you gain more experience level up from building small apps like to-do apps and weather apps. Build more complex applications that’ll prepare you for the real world.
These are my two cents for you. (Well, seven cents to be precise .)
Don’t limit yourself to the resources in this article. You’ll learn a lot of technologies to be able to deliver excellently as a front-end developer. Here’s a bigger roadmap for you.
You’re on the path to greatness. Only you can stop yourself now. You’ve got this 💪!
If you have any questions leave them in the comment section below!