Introduction

I genuinely believe that within 12 months, you can become a software developer!

A frontend developer (a developer developing User Interfaces and working with what the end users see on the screen).

I was inspired to write this article since I'm slowly helping more and more people around the transition into tech. 😃

Now, you may wonder if it's possible to become a software developer within 12 months and transform your current life? The answer is YES, it's possible, and many developers have done so. They taught themselves how to code, and changed their lives in less than 12 months.

Some even get their first job after 3 - 6 months of grinding like crazy. However, it's not easy and the main aim should be focusing on consistency.

A solid goal and deadline for yourself is a year. It shouldn't take more than a year if you've worked focused and followed a structured plan. 😍

It requires discipline and consistency. But don't give up. Believe in yourself, and know nothing good comes from quitting.

I will go through some weeks and months; this article is aimed to be a guide, not an extremely detailed structure giving you the exact courses, books, or workshops to go through.

However, from my experience learning to code and helping people around me, people need guidance. Then they can usually figure out the through Google, ChatGPT, etc.

I'll go through everything order by order. We'll learn a lot. The main goal is for you within 12 months to become a paid frontend developer! This is the GUIDE I would've given my younger self! 🚀

The number, in the end, is the entire month calculated for that phase.

If you learn or accomplish things quicker than they are structured and feel confident to move on to the next phase, feel free to do so! Also, know that this isn't the only path; feel free to tweak this path to fit into your life and whatever goals or deadlines you have set for yourself!

This is the guide I wish I had read before starting to code.

You are expected to put at least 20 hours every week into this. This is not a game; it's a commitment; feel free to grind less after you have the job as a developer, but now it's time to work hard for a year and change your life.

Why frontend development

There are multiple roles in software development.

This guide is about becoming a frontend developer for multiple reasons:

One of the field highest in demand.
It's easier to get started with than in other fields.
It's more fun for a beginner to see the stuff you're coding visually.
Getting started with HTML is super easy.

Overview of HTML, CSS and JavaScript:

HTML: The skeleton of the page, the core.
CSS: The skin, adds colors and styling to the page.
JavaScript: Responsible for adding dynamic behaviors to the page.

Becoming a developer

Becoming a developer requires you to shift your mindset.

A single course isn't enough. You'll go through endless struggles when building side projects. That's when you learn the most.

I want to emphasize that being a developer is a lifelong learning journey. You will constantly struggle, fix bugs, and constantly look at code and ask, Why is this not working?

As a developer, you want to look at things logically and then figure out how to accomplish these things. 🥳

Rule number one if you don't know something: GOOGLE IT & FIGURE IT OUT.

It's completely fine not to know things. Not everyone knows everything. It's about learning and figuring out the stuff you need for your use case.

Struggling means that you're on the right path. You're growing and learning outside of your comfort zone. Be happy and embrace it!

Lastly, don't give up! Your future self will thank you soon.

12-month guide

I recommend reading the guide thoroughly. Afterward, you can go through each phase and use the guide as a reference.

Tooling & environment (0.5 months) 0.5

We'll start by learning the tooling and environment you will work with as a developer.

VS Code

Install the code editor that you will use, VS Code; you will write your code here.

Resources to learn more about VS Code:

Git & Github

You will always use Git and Github for your project as a developer. Git is a tool to help you track and manage the work of your project.

Github is a platform where developers can publish their code and document their projects. They can also use Github to collaborate with other developers.

Resources to learn both Git and Github:

Practice on text files (.txt)

Now that you have VS Code and know some Git & Github, you're going to put that into practice.

Start by editing text files in VS Code, committing, and eventually pushing them up to Github.

The goal isn't to write any code yet. The goal here is to familiarize you with the coding tools first, so you don't get overwhelmed trying to learn both coding and the tools simultaneously.

Important note

When building projects through out your journey, always create a Github repository and commit your changes, even from the very beginning!

A resource on writing good commits: How to Write Good Commit Messages: A Practical Git Guide.

Basic HTML & CSS (1 month) 1.5

Learn the basics of HTML and CSS.

It's best if you do a few tutorials first, try to timebox all of them for a maximum of two weeks, then spend two weeks building projects.

You must spend more time building things during each phase of this guidance than doing tutorials.

You need some knowledge to get going, but celebrate the struggle. It's when you learn and grow. Struggling means you're on the right path!

I'd recommend learning HTML separately. Don't learn them both together. The next step would be to learn CSS. Then you can build projects where you use both HTML and CSS.

Resources to learn HTML:

Resources to learn HTML and CSS:

Intermediate/Advanced HTML & CSS (2 months) 3.5

After you've built your first basic websites, it's time to move on to building more intermediate stuff. This includes, for example:

Responsive Websites (mobile & desktop friendly)
Flexbox
Grid
Positioning
Transitions
Animations
Advanced Selectors
Units

I'm going to recommend resources that are both free and paid.

In your position, I would start with some free ones, build small projects for a while, then do the paid resources.

My favorite CSS course: CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass).

Make sure that you're spending more time building stuff than doing tutorials!

Be aware not to fall into the trap of trying to get things too perfect and losing a bunch of time. Done is better than perfect.

I'd strongly advise you to check out the Youtube Channel of Kevin Powell. He explains many CSS concepts amazingly: Playlists by Kevin Powell

Paid resources:

Free resources:

Basic JavaScript (0.5 months) 4

It's time to learn basic javascript for the first two weeks.

The goal is to do a basic tutorial and then play a bit with JavaScript.

Resources:

You don't have to go with these resources. Feel free to go with others. It's your choice.

JavaScript & DOM (1.5 months) 5.5

Continue learning JavaScript.

How to update the different elements on the page (the DOM) using JavaScript and creating cool effects. Make sure not to forget to step outside your comfort zone and struggle.

Through struggles is when you learn.

The nice thing here is that you can start with a tutorial if you wish, but you can also start by building something small and adding JavaScript bit by bit. The goal isn't to make something perfect.

The project should be able to do something.

The focus here is to learn.

Resources:

By the way, don't think the resources I share are the only or the best ones.

I share a few in case you need to get started somewhere and don't know where.

I also strongly recommend this site: JavaScript Info. The section about Browser: Document, Events, Interfaces is excellent!

WE ARE HALFWAY THROUGH, KEEP GRINDING!

Intermediate/Advanced JavaScript (2 months) 7.5

Learning intermediate to advanced JavaScript is broad.

On the one hand, you can build complicated projects like a memory game, calculator, and typing game, working with APIs and taking such projects far with e.g. the usage of localStorage .

On the other hand, you can learn how JavaScript works, Promises, writing async code, the Event Loop, etc.

Often both parts are related to each other. For example, if you're dealing with something that has to fetch data from an API, you will be dealing with Promises.

Still, many people build intermediate projects without understanding some of the concepts thoroughly.

In this case, I think the best thing is to start by learning more about the more profound topics, like Promises, different types of requests (POST, GET, PUT, PATCH), Async/Await, Event Loop, etc. Don't do it for too long though. I'd timebox it to a maximum of a week of theory, then try building more intermediate JavaScript projects.
Another approach that may be more fun since it's more practical, is to start by having a project in mind that you want to build and figure things out along the way. Now with AI, you can learn things on the fly easily. As you encounter something you don't understand, you read up on them and dig deep into how they work.

Ideas for projects you could build:

Memory game
Netflix landing page using movie API (includes search)
Calculator
An eCommerce site using either a headless CMS or hardcoded data (you can go very far here)
Typing game
Whiteboard where you draw

Take into account that these projects don't have to be perfect or crazy big.

It's fine if you're building something small, you can always make it bigger if you wish. But if you want to move on, that's also fine. What's important is that you're learning in each project!

So don't forget to struggle consistently.

Resources to learn about intermediate/advanced concepts for free:

Paid resources:

If you've questions or don't fully grasp something, make sure to research using Google and AI.

The more you ask, the more you learn!

TypeScript (0.5 months) 8

TypeScript is a superset of JavaScript.

You could describe it as JavaScript with a typing system. The adoption and usage of TypeScript are massive and still increasing immensely.

Many decide to learn TypeScript after having learned React (UI Library). They would then usually know React using JavaScript, not TypeScript, and eventually have to learn React + TypeScript together, which I think can be pretty overwhelming.

In these two weeks, you'll learn the basics of TypeScript. Feel free to dig deeper if you wish.

Reasons why people are using TypeScript:

Avoid minor bugs.
Autocompletion in the code editor.
Quicker understanding of the code you're working with.

TypeScript at first seems like it makes you go slower, but you will eventually see that it helps you go faster, not slower.

Resources to learn TypeScript:

Accessibility (0.5 months) 8.5

We haven't covered Accessibility yet, because I've found bringing up Accessibility for beginners too early can be confusing sometimes and even overwhelming.

Though, Accessibility is a critical topic in web development and often an issue that's overlooked. The good news for you here, learning accessibility can be one of those things that make you stand out among other developers.

In short: Accessibility is designing and developing websites in a way that's usable and accessible by everyone, even disabled people using assistive technologies or devices to navigate the web.

Start with the three essential steps:

Paid Resources that I strongly recommend you to do, at least 1 or 2:

React (2 months) 10.5

It's time for the big league!

The UI library React.

Most companies use a UI library or a framework when developing their products.

There are numerous reasons for going with technology over pure JavaScript. However, the most significant reasons are for the product to scale and continue being performant as it grows.

Why React

You may ask, out of all the UI libraries, why did I pick React for this guide?

To be transparent and honest, there are better libraries than React out there, but here is why I've picked React for this guide:

Currently the most popular UI library.
Very high in demand.
A rich ecosystem.
Beginner-friendly in the sense that there are A LOT of tutorials on React, both free and paid.
Many questions you may have, have already been asked and can be found online.

Learning React

When learning React, we are, of course, going to start with the basics.

The basics don't just mean building small and simple applications but also understanding how React works and what it does.

I think it's often overlooked and makes React more complicated to learn because people make up their mental model instead of knowing what React is, what it does, why it does it, and how it works.

By this, I don't mean understanding all the complexity of React's codebase, don't get me wrong, but you should have an understanding from a higher-level perspective of how it works under the hood.

Start

You'll have to start by installing Node (a JavaScript runtime).

From there, go through the documentation of React from beginning to end, starting with the installation section: Learn React.

Once you've gone through their tutorial, feel free to go ahead and start building stuff.

If you want to do another tutorial, I strongly advise you to do: Kent C. Dodds's Beginners Guide to React from egghead.io. You can even pick this over the Beta documentation, especially if you aren't much of a reader, though I'd recommend going through both.

I recommend using Vite when building projects with React.

Talks

Talks about watching after you've built your first 3 projects minimum:

Projects

Your projects can start small.

You don't have to start building anything crazy. It can be little as an interactive landing page, the most important thing is to get started and slowly but surely build bigger and more complex projects.

Note: feel free to use TypeScript when building your projects. If you want to start by using vanilla JavaScript and not have to think about TypeScript when learning React, that's also totally fine.

If it helps, you may want to start by building fewer smaller projects, before proceeding to bigger ones.

I timeboxed learning React for two months, if you need more time, take it. This guide is meant for you to tweak it to your own life and needs.

Deployment

I recommend deploying your React apps on Vercel. It's easy and fast to use, and all you need is to import your Github repo into Vercel and with a few clicks, your site will be live.

For every commit you push, the new changes will be automatically deployed.

Resume, LinkedIn, Github & Personal Portfolio (0.25 months) 10.75

Now, it's time to write your Resume/CV and make sure you have a nice Github profile. I expect those two not to take longer than a day, as for the Personal Portfolio, I'd suggest you timeboxing it to a week maximum and try to develop a personal portfolio that aligns with your personality and showcases your projects.

Resume/CV

I recommend writing your resume using Flow CV. A lot of people make writing a resume too complicated (even I have). Just keep it simple and clean. Include the amount of information necessary, and try to make the resume easy to scan.

I've written a guide to crafting the perfect resume.

Github profile

Make sure to flesh out your Github profile. Pin your top projects and make sure to write a nice Readme.

Set up a LinkedIn, it's an awesome place to connect with all kinds of developers. It's also a great place to connect with recruiters and apply to companies.

Tips for setting up LinkedIn.

Portfolio

Don't overcomplicate your portfolio. You can do this after you've landed your first job as a developer, spending a lot of time trying to make the portfolio perfect.

Don't forget, the focus here is to get you your first job as a developer.

If you don't want to take the time to develop a Portfolio, feel free to jump right into job hunting.

However, with a portfolio, you will stand out better among those who don't have a portfolio.

10 Web Developer Portfolio Tips.

I recommend including these sections for your Portfolio (in order): Landing page, About, Projects & Contact.

Tips for your personal portfolio:

Make it easy to digest
Make it look good
Make sure every project you showcase:
- Link to deployed site
- Link to Github code
- Don't show an image, have a speeded-up video in a loop that demos your project
Don't rate your skills
Make sure there is a contact link for people to send you emails

30 Web Developer Portfolios to Inspire You.

Job hunting & interviewing

Interviewing

There is A LOT of advice out there, on how to act or be in software engineering interviews. Here is my fundamental advice to you:

The first point: Be curious, and ask questions about the company.

How can you grow in the company?
Where does the company see itself in 3 to 5 years?
How many projects & teams are there in the company?
How does the onboarding process look for new developers?

By asking questions, you're showing the company that you care about the position you're joining, and where you will be kickstarting your career.

The second point: Don't feel nervous. See every interview as a practice, and know that you will likely be rejected NUMEROUS times before landing your first job. You will get better as time pass. I was rejected for 3 to 4 months, and I applied to 5 jobs every morning and attend countless interviews.

The third point: After each interview, take notes and assess yourself on how it went. If there are gaps in your knowledge, which you realized during and after the interview, make sure to spend time filling those gaps, and improving yourself for the next interviews.

The fourth point: Only take home assignments if you want. Don't force yourself to do a home assignment for a company that doesn't interest you (you will apply to companies that don't interest you because you're hungry for your first job as a developer).

This is my advice when it comes to interviewing, the key is to improve after every SINGLE interview.

Job hunting

When it comes to job hunting, form a habit. My advice is to apply to at least 5 jobs every morning, ideally 10. If you apply to 10 jobs every morning, that's over a month, of 300 jobs! And for two months that'd be 600 jobs.

Be patient. Don't give up. Quitting is for losers. You're about to transform your life and keep grinding.

Patience is bitter, but its fruit is sweeter than honey.

React & other ideas (1.25 months)

During the time you're job hunting, I'd advise you to improve in whatever areas you think you're weak, but also continue building React projects.

I strongly advise reading this article about standing out: How to stand out as a software developer with no experience.

Some ideas you could do to take yourself to the next level:

Build a full-stack app using React and Firebase (a backend service, that makes building full-stack projects simple). If you're looking for a place to get started, there are tutorials on Youtube for building with React and Firebase.
You could learn to write tests and add tests to your existing projects. This would include learning Jest, Mock Service Worker (if you have to mock away the fetching in your tests) and Testing Library, and writing some integration tests. I recommend starting very small. You don't have to add tests for the whole project, it can be a little bit as a few components.

Some testing resources:

The best testing resource at the moment, but it's quite expensive, I've done it myself twice and loved it, it's phenomenal if you can get it, surely will make your skills STAND OUT immensely as someone trying to land their first job as a developer: Testing JavaScript.

End

I hope this has been a useful read. I wish I had been given this guide when I started to code, instead of coding for several years before finding the path to land my first developer job.

I recommend using this guide as a reference.

Good luck!

Become a software developer in 12 months

The ultimate guide to getting paid writing code, within ONLY 12 months.

Table of contents