Follow

Follow

Become a software developer in 12 months

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

Tiger Abrodi's photo
Tiger Abrodi
·Aug 26, 2022·

21 min read

Featured on Hashnode
Featured on daily.dev
Become a software developer in 12 months

Table of contents

Introduction

I genuinely believe that within 12 months you can become a software developer, specifically, a frontend developer (a developer developing User Interfaces and working with what the end users often end up seeing displayed 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 is possible, to become a software developer within 12 months and transform your current life? The answer is YES, it is totally possible and many developers have done so, 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, though I will say in my opinion and from my experience as a self-taught developer that dropped out of high school, it is not easy. I think a solid goal and deadline to set for yourself is a year, more than a year it shouldn't take in my opinion if you've worked focused and followed a structured plan. 😍

I will say it is gonna require discipline and you put in the work. Don't give up, believe in yourself, and know nothing good comes out of quitting.

I will go through some weeks and some months, this article is aimed to be a guide, and not an extremely detailed structure giving you the exact courses, books or workshops to go through. From my experience both learning to code and helping people around me, people often need guidance, and then the rest they can often figure out themselves by i.e. using google and doing research (there are lots of resources out there, both free and paid, to learn almost any technology or tool in tech).

I'll go through everything order by order, we'll learn numerous stuff, 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 total months calculated for that phase.

If you manage to 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. Specifically, before the time I decided to take coding seriously in fact, since this is gonna require discipline and work ethic, it is a commitment.

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

Why frontend development

Now, you may wonder what all the various fields are in software development, or even in web development, there are multiple roles.

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

  • One of the fields highest in demand.
  • It is easier to get started with than in other fields.
  • It is more fun as a beginner to be able to visually see the stuff you're coding.
  • 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 lot of the times when learning to code, we have the belief as beginners that you go through a course and then that is enough for you to go on yourself and start coding up stuff with ease, and it is sad to see because this often leads to beginners thinking that they are doing something wrong or not good enough to code.

I want to emphasize, that being a developer is a lifelong journey of learning. You will constantly struggle, constantly fix bugs, and constantly look at code and be like Why is this not working? As a developer, you want to look at things from a logical perspective, and then figure out how to accomplish these things. 🥳

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

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

Struggling means that you're on the right path, it means you're growing and learning, you're outside of your comfort zone, be happy if you're struggling, not anxious or worried.

Last but not least, don't give up, your future self will thank you, very soon.

image.png

12-month guide

I recommend reading the guide once completely, then afterward you can go through each phase and use the guide as a reference.

Tooling & environment (0.5 months) 0.5

We're gonna start by learning the tooling and environment you will work with and in 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

As a developer, you will always use Git and Github for your project. Git is in short 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 also know some Git & Github, you're gonna put that into practice. Start off 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 get you familiar with the coding tools first, so you don't get overwhelmed trying to learn both coding and the tools at the same time.

Important note

When you're building projects over the next phases, make sure to always create a Github repository and commit your stuff, 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. You should do a few tutorials, try to timebox all of them for a maximum of two weeks, then spend two weeks building stuff. You must spend more time building stuff during each phase of this guidance than doing tutorials. You need some knowledge to get going, but celebrate the struggle, it is when you learn and grow, struggling means you're on the right path!

I'd recommend starting by learning HTML first separately, then you can learn CSS. Learning both at the same time can be difficult.

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 is 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 gonna recommend resources that are both free and paid. In your position, I would've started with some of the free ones, build stuff for a while, then do the paid resources. My favorite CSS course is the first paid one: CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass).

Make sure that you're spending more time building stuff than doing tutorials! It is fine if you do for example one tutorial, and then spend the rest of the time building, and challenging yourself to build more complex & comprehensive websites.

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 of Kevin Powell as well, he explains numerous CSS concepts amazingly: Playlists by Kevin Powell

Paid resources:

Free resources:

Basic JavaScript (0.5 months) 4

Now it is time to learn some basic javascript for the first two weeks. The goal is to do a basic tutorial and then play around with JavaScript a bit.

Resources:

You don't have to go with these resources, by the way, feel free to go with others, it is your choice.

JavaScript & DOM (1.5 months) 5.5

Continue learning JavaScript, specifically how to update the different elements on the page (the DOM) using JavaScript as well as creating cool effects. Make sure to not forget to step outside your comfort zone and struggle, struggling is where you learn.

The nice thing here is that you can start with a tutorial if you wish, but you can also just start by building something small and add JavaScript bit by bit. The goal isn't to build something perfect, the project should be able to do something, the focus here is to learn.

Resources:

By the way, don't think that the resources I share are the only resources or the best ones, I share a few in case you need to get started somewhere and don't know where. Feel free to look for other ones that you find more interesting or practical.

I also strongly recommend this site: javascript.info. The section about Browser: Document, Events, Interfaces is extremely good!

WE ARE HALF WAY THROUGH, KEEP GRINDING!

image.png

Intermediate/Advanced JavaScript (2 months) 7.5

Learning intermediate to advanced JavaScript is quite broad. On one hand, we've building quite complicated projects like a memory game, calculator, typing game, working with APIs, and taking such projects quite far with the usage of localStorage for example, etc. On the other hand, we've understanding how JavaScript works, Promises, writing async code, the Event Loop, and so on.

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're gonna be dealing with Promises and writing async code, but many people end up building intermediate projects without really understanding some of the concepts thoroughly.

  1. In this case, I think the best thing is to start by learning a bit about the deeper topics, like Promises, different types of requests (POST, GET, PUT, PATCH), Async/Await, Event Loop, and so on. Not for too long though, I'd timebox it to a maximum of a week of theory, then try building a more intermediate JavaScript project.

  2. Another approach that may be more fun since it is more practical, and in some cases could be better for a lot of people is to just start by having a project in mind that you want to build and figure things out along the way, and as you encounter things you don't quite understand, then you do read up on them and dig deep into how they work.

Ideas for projects you could build: memory game, Netflix Landing page that displays movies and allows you to search for movies using an API (only movie information), a calculator, a small eCommerce using either a headless CMS or hardcoded data (feel free to go how far you wish), typing game and a whiteboard where you draw, create cards and that kind of stuff using canvas.

Take into account these projects don't have to be perfect or crazy big, it is fine if you're building something small, you can always make it bigger if you wish, but if you wish to move on that's also fine, what is important is that you're learning in each project! Don't forget to consistently struggle, that is when you learn.

Resources to learn about intermediate/advanced concepts for free:

Paid resources:

If you've any questions or don't fully grasp something, don't forget to google them, research, and read what you find.

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 huge and still increasing immensely.

Many decide to learn TypeScript after having learned React (UI Library). They would then usually learn React using JavaScript, and not TypeScript, and eventually have to learn React + TypeScript together, which I think can be quite overwhelming. In these 2 weeks, you're gonna learn the basics of TypeScript, feel free to dig deeper if you wish and there is still time.

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 very important topic in web development, and often a topic that is 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 is usable and accessible by everyone, even disabled people who are using assistive technologies or devices to navigate the web.

Start with the three introductory steps:

  1. Introduction to Accessibility
  2. Getting started with web Accessibility
  3. Common Accessibility Errors

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

React (2 months) 10.5

Now it is time for the big league, to learn 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. I would say the biggest 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 that are out there, why would did I pick React for this guide?

To be clear 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 eco-system.
  • Beginner friendly in a sense that there is A LOT of tutorials out there on React, both free and paid ones.
  • A lot of questions you may have, have already been asked and can be found online.

Learning React

When learning React we are of course gonna start with the basics. I want to clarify though, that the basics don't just mean building small and simple applications, but it also means understanding how React works and what it does.

I think it is something that is often overlooked and makes React harder to learn because people make up their mental model instead of learning what React is, what it does, why it does what it does, 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're gonna have to start by installing Node (a JavaScript runtime).

From there go through the Beta 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

Create React App is good for building stuff when learning React, as getting started isn't too hard. Though it is slower and heavier than other options out there, if you want something more lightweight, feel free to have a look at Vite. Their documentation should guide you in setting it up with React.

Talks

Talks to watch after you've built your first 3 to 5 React projects minimum:

Projects

Your projects, remember, 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 is also totally fine.

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

Don't forget, if you're struggling, it means you're on the right path.

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 is 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.

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

Now, it is 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 on 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 recommend having these four sections: Profile, Skills, Projects & Hobbies.

Having hobbies in the end also displays your personality and humanity a bit.

If you need inspiration, I recommend Googling "Software engineering resumes" on Google and having a look at the images that pop up.

A few rules should be aware of:

  • Don't make your Resume longer than a single page. This makes it hard for recruiters to scan it, and they might end up not reading it all.

  • Make sure to keep space in your Resume, and make it feel easy to read, and not cluttered.

  • Don't include metrics of your skills, i.e. "X stars of JavaScript knowledge". That's subjective, and what people will care about in your interviews, isn't the metrics you've defined yourself, but rather the projects you've built and the challenges you encountered when building them.

I made a simple template in case you want help with the structure of your Resume.

Resume template

The template above is super simple, be more creative and make it look nice!

PS. Feel free to include an educational section, in case that is relevant to you. I was a high school dropout when I was looking for my first job, hence didn't include the Education section.

By the way, for literally everything on this guide, there is a Youtube video for. If you ever want more knowledge, just go to Youtube or Google.

Github profile

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

LinkedIn

Set up a LinkedIn, it is an awesome place to connect with other developers who are aspiring or already are developers. It is also a great place to connect with recruiters and apply to companies.

Tips for setting up LinkedIn.

Portfolio

Don't overcomplicate your portfolio, this is something you can do after you've landed your first job as a developer, spending a bunch 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, though, know that with a Portfolio, you can potentially 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.

Feel free to exclude About or Contact if you wish. You could tell a bit about yourself on the landing page, and then what is MOST important is showcasing your projects. If you take a look at my portfolio, I'm showcasing my projects with a video that auto-plays, this way recruiters don't have to try out the project themselves to see what it is about.

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 would apply 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).

These are 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 is over a month, 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, 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 is quite expensive, I've done it myself twice and loved it, it is 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 was given this guide when I started out 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!

image.png

 
Share this