Search for a command to run...
An abridged roadmap to help you become a front-end web developer, including learning resources.
Front-end Engineer developing bugs with JavaScript, TypeScript, React & Next.js and Vue & Nuxt. Casually writing dev articles.
No comments yet. Be the first to comment.
In this article, we will cover most of the methods that allow us to manipulate arrays including transforming, searching, and iterating over them.
Regular Expressions could be very tricky and hard to comprehend, so in this article we'll discuss the major things to get you up-to-speed with creating and working with Regular Expressions in JavaScript. So, what's a Regular Expression? A regular exp...
One of the concepts that most beginners skip when learning JavaScript is how the JavaScript engine runs code on a single thread, and how browsers handle asynchronous tasks. By understanding the Call Stack and Event Loop, you'll learn how tasks are ha...
Let's take a look at CSS grid and how we can use it to implement our own 12-column layout grid.
On this page
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
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.
For people who do not know what HTML, CSS and JavaScript are, I usually use the process of building a house to explain them. If you already know what they are, you can skip to the resources section below.
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.
And then there is JavaScript. This is where the ACTUAL PROGRAMMING is. You would most likely want to add some “functionalities” to your house. Like, for turning on and off the light, maybe throw in some fans or air conditioners. Perhaps, you’d want to turn it into a smart home; using Google Assistant (or Siri) to automate things in the house. With JavaScript, you can add interactivity to your website like designing complex animations that CSS alone can not do, and most importantly fetching data from the server to display to the user. Another use-case of JavaScript is “waiting” for the user to click on a button, and when they do, you display a popup.
Put this in your head: you can not learn everything. Think of HTML, CSS and JavaScript as the language you speak. Do you know all the words in the language? Hell, you can’t even find every single word in the dictionary. Computer languages are like that; you cannot learn everything. But you can and must learn the fundamental concepts. With that, you will be able to do everything and learn more as you apply the concepts. The resources in this article are for introducing you to web development. Completing courses and reading articles doesn’t mean you’re done. Programming is a no-destination journey — you’re always learning, even when you start working as a professional programmer.
First, learn HTML, CSS, and then JavaScript — in that order.
Build Responsive Real-World Websites with HTML and CSS — this is not a free course. I recommend it because you’ll focus on one material to learn HTML and CSS. Most free content usually references other learning materials. Going through several articles and videos can potentially make you learn things that do not matter right now. So, if you can afford it, please buy it. I want you to focus on learning one thing at a time. Otherwise, take this free course instead: HTML and CSS Crash Course. Now, move on to JavaScript.
Modern JavaScript (Complete guide, from Novice to Ninja) — not free either. If you can’t afford it, take this course: JavaScript Programming - Full Course. It is a single video, almost 8hrs long, so you should take breaks every now and then.
50 Projects In 50 Days - HTML, CSS & JavaScript — not a free course. Now that you have some knowledge of HTML, CSS and JavaScript, it’s time to learn how to effectively use them together to develop projects for the Web. With this course, you will build 50 projects, from small projects to more complex ones. You don’t have to develop the projects in 50 days. You could complete the course in fewer days or more depending on your schedule.
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.
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.
Delve into more advanced topics in JavaScript. JavaScript is a rapidly growing language; every year, new features are added to its specification.
JavaScript.info is a great place to learn more about JavaScript concepts that you may not be using as a beginner. There are language concepts that are widely used in the industry and knowing them is a must. You will get lost in other people’s codes if you do not learn more. Whilst learning these concepts you could go through your previous projects and refactor — make changes to improve your code — with your newly found knowledge.
Exercism also provides exercises for over 60 programming languages for you to solve and gain fluency. Sign up and check out the JavaScript track and solve the exercises there. It’ll help you improve your JavaScript efficiency. You may get tempted to learn other programming languages on Exercism; please don’t fall for it — it’s a distraction.
TypeScript is basically JavaScript with superpowers — it adds more features to JavaScript that JavaScript doesn’t support out-of-the-box. It is important to know JavaScript before learning TypeScript. It helps you write safer code and improves your developer experience. The materials below will help you understand the benefits of using it. Also, keep in mind that a lot of companies require their developers to know TypeScript so learning it gives you an advantage when looking for a job.
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.
My answer is simple — learn what’s popular in the job market. All these technologies try to achieve one thing — to help you develop Web applications easily with software development best practices which is hard to do when building Web apps with raw (or vanilla) HTML, CSS and JavaScript.
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.
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 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.
Kent C. Dodds has another amazing course: Testing JavaScript. It’s the best I’ve seen that goes deep into teaching automated testing. If you can afford it, purchase it and thank me later. Otherwise, buy the cheaper Academind’s JavaScript Unit Testing course. The original price is $90 but you could grab it at $10 or $15 when Udemy applies discounts to courses — they do this often, so be patient if the price tag is $90 😜.
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!
Choose these courses depending on the JavaScript library/framework you chose in the previous chapter.
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 😂.
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:
JavaScript Algorithms and Data Structures Masterclass (recommended)
Free content:
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!