30 Days Road Map - Budding Front End Developer to your First Job

Posted on October 16, 2019 by Abhirath Mahipal
Tags  front-endreactcsscurationsroad-mapawesome-lists

A handy guide to take you through the journey from a budding front end developer to get ready for your first job. You should read this guide if you already know the basics of front end development and are keen on bridging the gap between you and your first job as a junior developer.



What do they Look for?

While interviewing for a junior front end developer / internship, your interviewer won’t expect you to know everything. They won’t be expecting depth of knowledge. The most important qualities that they would be looking for in an ideal employee are as follows.

  • Ability and confidence in building simple things.
  • Ability to break bigger problems into smaller problems.
  • Google and find solutions to these smaller problems.
  • Willingness to work hard and eagerness to learn.
  • Know how to start projects and continue making progress in chunks.

About Me

I think I have reasonable experience to back the claims above.

  • I’ve interviewed at many, many companies.
  • Have been involved in recruitment processes.
  • Have interviewed candidates as well.
  • Worked on a Resume Parser at my previous company. Was in constant touch with recruiting teams and I now think I have a fair idea of what they look for.

Bigger Picture

Now that you know what interviewers look for let’s get right to business. I’ll explain some strategies to tackle some of those pain points.


Build, Build and Build

The main idea is to build numerous small to decent size projects. Reading about a concept (theory) and actually implementing it are two different things. You get those aha moments (when you really start understanding something) only when you actually code.

Additionally in the process of building you’ll learn new concepts. Since these are videos you can hear the video maker explain why certain things are done the way they are. These reasonings can be used to explain concepts when you are questioned by interviewers.

Every new concept you encounter read a little theory about it and then continue coding. You must strive to understand around 70% of the all code you write while following the videos/articles. If you don’t understand something, spend sometime on it. Don’t waste too much time on it. Make a note and move on.

Most of the things that you don’t understand will become clear after you are done with a few more items in the list. As you keep progressing your understanding also increases. I often continue even when I don’t understand something, I just make note of it and keep coding/copying from the video regardless. After a few videos or 1 mini project almost everything becomes clear.

This is the reason why I recommend that you keep coding rather than spending loads of time and energy everytime you don’t understand something.

Each item in the plan more or less tends to build on the previous item. So please avoid skipping.

Decent Portfolio

Save all the exercises and code you write. Organise them into neat folders. You will be uploading them to GitHub.

The following images demonstrates what I normally do. You can dive into the details here.


I have a folder called Practice and it is further sub divided into folders like JavaScript, Python, C and C++ etc


This is how an individual folder JavaScript would look like.

Many employers want to have a look at your past work or projects that you’ve been involved in. GitHub is an amazing place for that.

You probably haven’t worked before you won’t have prior work experience to talk about. You’ll be talking about the tutorials you’ve gone through, things you’ve built and show them all the hard work you’ve put by showing them your GitHub profile. It also signals that you are serious and excited when it comes to learning new things. You will have a lot more things to talk about and demonstrate.

I’ve noticed that longer interviews generally indicate higher chances of you getting the job. By having more things to show and talk about you increase your odds of getting the job 🙂

For instance I’ve been coding everyday at my job and this is how my GitHub profile looks. It clearly indicates that I’ve written a lot of code. When I tell the interviewer that I’ve written a lot of code and show them this, most of them are impressed. github-profile-portfolio


Day 1 - 7


If you aren’t aware of the following topics, will take you a little longer. Please bear that in mind 😅

To follow along Days 1 - 7 you should have basic knowledge of HTML, CSS, linking stylesheets etc.


Get you more comfortable with HTML and CSS. Get to a state where you can build real stuff more easily. Also get familiar with mobile responsiveness without any framework. This should also give you a better about how CSS frameworks work in the future weeks.


Day 8 - 14


If you aren’t aware of the following topics, will take you a little longer. Please bear that in mind 😅

To follow along from Days 8 - 14 you should know Bootstrap fundamentals like the grid system, some basic Bootstrap classes.


Build more complex things using HTML and CSS. You will also learn the benefits of using CSS frameworks. We’ll be focusing explicitly on Bootstrap. The concepts are similar across many frameworks though.


Day 15 - 21


JavaScript basics like variables, loops, event listeners, functions, data structures and basic operations on them, linking scripts to a HTML page etc. You should also be aware of the DOM and perform basic manipulations like change CSS of an element, change text and so on.


Be in a position to make your web pages interactive (animations, manipulate DOM on events like clicks) and add basic logic.


Day 22 - 28


Should have a feel for React’s philosophy, should know about Node.js, npm and at the very least know how to create a React.js project.



Beyond Day 30

I have made a separate section for these because they are

  • A little time consuming or
  • There’s a chance that you might not appreciate the insights they offer as you wouldn’t have faced the problems the authors highlight or
  • Going deep into a particular topic might really not be necessary.

Advanced List


New Post Notifications

your email address

how often do you want to be notified?

 View RSS Feed