Hello folks,
This is an in-depth study guide on front-end development for complete beginners, to become professional developers. I will discuss all the topics that you should focus on to improve your skills as a frontend developer along with the resources.
Is it for you?
This article is intended for those who have no prior programming experience but intend to transition to frontend development as well as those who have some programming knowledge but are unsure of where to begin. The guide will cover the topics from scratch, so feel free to skip the sections that you think you are comfortable with. Along with guidance, I will also be sharing all the resources which you should refer to, wherever appropriate. Another requirement is time. You would require at least 6 months to complete this Frontend Study Guide.
Why frontend development?
It's crucial to be 100 per cent confident that a profession in Frontend development is what you want to pursue for the foreseeable future before starting one. Do extensive study, ask professionals for guidance, check Glassdoor for compensation information, and take into account other people's viewpoints. Finally, decide what feels right for you and stick with it.
I would advise choosing the Frontend engineering route for the following reasons.
in high demand
simple & easy to begin with
fun to learn
smaller budget
Prerequisites
You would require a basic to medium-range laptop or desktop with any standard operating system. Considering that you have a system to work with, the cost incurred in learning frontend development is almost nothing. There are a lot of high-quality resources available which will be more than sufficient to get good knowledge.
Below mentioned is the list of softwares to be installed on your system (all are free)
Although you might not need all of them in the first several months, these are recommended to have as prerequisites. There are other alternatives to the software mentioned above. To avoid confusion, I have listed the only items that are most recommended. When you feel capable, you can decide for yourself what suits you the best.
Frontend Study Guide
Here, I'll break up the study schedule into four portions. If necessary, you can change the order or omit the ones you already know. I wouldn't advise that if you're just starting.
Section 1
Programming fundamentals
Data Structures and Algorithms (DSA)
Programming challenges
Section 2
Web fundamentals
Basics of HTML, CSS, JavaScript
JavaScript in depth
Section 3
Document Object Model
Git & GitHub
ReactJS
Section 4
TypeScript and Unit testing
React ecosystem
Other popular tools
All the listed topics are crucial for your learning path. If you ask me again which items are the highest priority among them, for that I have highlighted a few of them in their respective sections. Highlighted ones are in yellow.
The total duration needed to become job-ready may vary from 6 months to 1 year depending on the time you invest every week and your current skillset. If the above list is making you worried, I request you to read it till the end before concluding.
Section 1
Duration: 2 - 3 months
In this section, the focus is on the fundamentals of programming and problem-solving. You should concentrate well on these topics to master the fundamentals of programming and JavaScript syntax. Many people skip over this crucial phase in their haste to enter the hunt for employment and may suffer as a result. This ought to be simple if you have experience with other programming languages or a background in computer science.
Programming fundamentals
Variables
Data Types
Conditions
Loops
Input and Output
Functions
Arguments & Parameters
Array
Set and Map
Remember here the focus is not to learn JavaScript but to learn programming with the help of javascript. The fundamental programming topics mentioned above are common to most programming languages. We will discuss more related to JavaScript in the later sections.
Resources:
Data Structures and Algorithms
Arrays
Stack
Queue
HashMaps
Sets
Search
Linear search
Binary search
Sorting
Bubble sort
Selection sort
Insertion sort
Count sort
Above is the list of data structures and algorithms topics I recommend you cover. These may look heavy initially but you need not complete them in one go. You can start with these and it is fine to move to Section 2. But make sure you cover all these by the end of our study plan.
Resource:
Programming problems
I don't want to list down the problems specifically as it depends on your level and understanding at this point. Start with the basic problems. This will help you to strengthen your hold on JavaScript language along with improving your problem-solving skills.
Resources:
Note: This may look too much to include DSA & problem-solving in the initial phase. Some may feel this challenging and think of dropping this. But this is where you improve your logical skills around programming. The ability to think about problems, come up with approaches, and convert them to the right programming snippet is crucial no matter what language you code.
Section 2
Duration: 2 - 3 months
I hope this should be one of the interesting sections for every frontend dev. This section contains the core technologies of the frontend. At this point, you should be comfortable writing logic with JavaScript. We are covering the important theory part first before moving toward the practicals.
Web fundamentals
Client and Server
HTTP
API
REST
Browser communication
Error codes
Resource:
Not all may make sense to you, but once you start working on the mini-projects, this will be clearer. The goal here is to understand the core of the web as much as you can understand.
Basics of HTML, CSS, JavaScript
HTML elements and tags
HEAD and metadata
List, Tables, and Anchors
Forms, Images
Selectors, pseudo selectors
Box model, Inheritance, Specificity
Positioning, Flex
Primitives, Type Conversions
Scopes, Hoisting, Closures
Error handling
Objects, Functions
Timeout & Interval
Resources:
Once you complete these topics, you get the necessary understanding of concepts to move forward in frontend development. A lot of things start to make sense such as building a simple UI, layouts on webpages, CSS properties, etc. The goal here is to get started with frontend core technologies and not to become proficient in one go.
JavaScript in depth
Promises, Async-await
"this" keyword
template strings, Prototypes
Modules, Sets, Maps
ES6+ features
Resources:
Here we have invested a huge effort in JavaScript and getting deeper into it. The reason is, that most of the web development you will do requires a lot of logic-building and asynchronous tasks. Also, the aim is to cover the most important things in depth and at the earliest. If you do JS well in-depth, it will serve you better in future sections. Also, it will help you become a competent frontend developer.
Section 3
Duration: 2 - 3 months
This section may look a bit dry and boring in the starting, but sticking to the plan is very important. Simple things may look a bit time-consuming and not immediately rewarding. Again the focus is on building the right foundation.
Document Object Model
DOM Tree
Element selectors
Events handling
Event bubbling & delegation
Working with Nodelist
Browser APIs
Event loop
Resources:
Git & GitHub
Clone, Pull, Push
Commits, Log
Branching
Switch, Checkout
Pull request
Github
Git is a version control system (VCS) and a Source Code Management (SCM) tool. It is used to maintain the code history and ease the collaboration between multiple developers working on the same codebase.
GitHub is the place where you host your source code and projects. Organizations might not use Github, but the concepts and processes remain almost similar.
Do not try to learn Git end to end. The goal is to get started with Git & Github and be comfortable in building your projects with these tools. As and when you progress with the projects and collaboration, you get to learn a lot of commands of Git. So spend enough time to understand the concepts & fundamentals around them.
Resources:
ReactJS
Components & JSX
State & Props
Functional components
Hooks
Forms & Event Handling
Context API
Lazy loading
Higher order components
Virtual DOM & reconciliation
This is one of the most important topics for interviews and your projects. The framework is the one that makes building complex applications easier. Frameworks or libraries come with a lot of tools and setup which does the heavy lifting for us.
React had started with "Class-based components" and moved away from them. Few projects might be using them even today. Learn them only if you come across them or you feel the need. But for the current study guide, I suggest you skip it.
Resources:
Note*:* We have chosen the React library for our study guide. React is currently one of the most popular and in-demand technology. There is also Angular which is a competitor. Pick another framework only if you are confident and aware of it. Else stick to React.
Section 4
Duration: 2 - 3 months
This section is a completely practical one. You are not supposed to learn anything theoretically but to implement these along with building the projects. The knowledge you have gained so far should be effectively used here. Try to stick a lot to the documentation of the libraries, the reference material online, or the solutions provided by others for the challenges you face. Refer to the tutorials that teach you to build an app, but refer to them only when you are completely stuck.
TypeScript
Unit testing with Jest / Vitest
Here I have not mentioned any specific topics of TypeScript or unit testing intentionally. The practice of developing the application with TypeScript and testing the components by writing unit tests should become a habit. For this, it is important to start following this for all your projects. A basic understanding of the typescript and unit testing framework should be enough to get you started. Also, it is not a boolean scenario that either you unit test or don't. Your project may have unit test coverage of 50% as well and can gradually increase over time.
Resources:
React ecosystem
State Management using Redux / Redux Toolkit
Routing using React Router
Components usage with React Material
Forms using React Hook Form / Formik
API communication using Axios
Resource:
Again I am reiterating here that do not sit and study these from any tutorials. Start building the projects. Be it a simple tic tac toe or a complex e-commerce website. If you are not getting ideas to build projects, then refer to App Ideas.
The thing to highlight here is that Redux is a popular state management library that is widely used with React. The organizations are also using redux with React and also very important from an interview point of view. I suggest you learn redux architecture and React-redux first but for projects pick Redux Toolkit.
Other tools
TailwindCSS or Bootstrap
NextJS
...
Resources:
These are the libraries and frameworks which are currently trending and used in most companies. You need not master these but at least can use them in a small project to get some idea of their usage. And there are so many tools and libraries that I can include in other tools. It's a never-ending list. But you don't have to keep learning forever to start with your first job. I am putting a full stop here.
A complete checklist and roadmap can be found here
Study Guide Design
After reading the syllabus of the frontend study guide, some of you may be overwhelmed by the topics or duration. A few may disagree with the list or order of the topics. It is completely fine. Feel free to modify the study guide as per your requirements. Also, this study guide is not the only way to excel as a beginner. It is one of the study guides that focuses on building strong fundamentals and then getting ready for the job.
The study guide is designed to help you become a competent frontend web developer along with a focus on getting you ready for your upcoming jobs. The topics included in the study guide are chosen from my learning path and experience. I have carefully included the topics that are most relevant to you in the industry to excel.
The time duration for a fresher to complete this whole syllabus may take around 12 months (1 year). For a person with decent fundamental knowledge may take around 6 months or less. I have also mentioned what topics to focus more on and which ones to learn parallelly.
Resources
A lot of resources you might have come across in our resource section against each topic. These are a few of the resources that are highly popular & used by many or the ones that I recommend. You don't need to learn from the resources which are mentioned. Feel free to explore the other courses available online and utilize the resources which you find most suitable.
It is also good to stick to a particular author or instructor for different topics. For example, I like the courses of Maximilian. I like his teaching style and example projects. So I usually watch his courses on different if available. If you also feel it works out for you, you can also do the same thing.
If you are a total newbie to web and software, then you can visit Youtube which is a great website to find videos on every topic you want to know in frontend development. It is free.
If you are fine to spend some money then Udemy is one of the best websites where you can find almost all the courses on frontend web development.
If you are looking for specific courses on each of the frontend topics, then the Frontend Learning Kit has a curated collection of frontend resources. Moreover, all the best resources are mentioned in the Frontend Learning Kit.
Interview Preparation
Once you complete the frontend study guide you will be in a good position to start working on live projects as a beginner. But to get a job, you would be required to build a good resume, apply for companies, face the interviews, clear the interview round, and whatnot.
Is it not enough if I complete the Frontend Study Guide?
The answer can be Yes or No. Frontend Study Guide helps you to prepare on the topics that are needed for your frontend job. The art of preparing and cracking the interviews is not the topic of discussion here. So I will not talk more about that. Articles like How to Ace a UI Engineer Interview and Frontend Interview Cheatsheet might help you in your interview preparation. Also, you can go through the interview questions for the Frontend Interview Handbook.
If you ask about me, I was not a developer from day 1 in my career. I had to prepare for frontend development and start my journey after 6 years of my IT career. You can read about my journey from testing to development and the way I prepared for my interviews.
Conclusion
We have discussed a lot about topics, resources, and curriculum. It all makes sense only if you seriously start preparing with the discipline. It does not require you to spend a lot of money if you follow the resources and path from the guide.
There are a lot of institutes and coaching which offer teaching on frontend development. If the above guide and resources mentioned are difficult for you to follow, then you can always join those coaching centres that give an environment, community, and in-person teaching. A lot of meetups, events, and sessions happen both online and offline. You can connect to various folks to ask for guidance.
If you have an interest and willingness to work hard, it is not a challenge to get into frontend development. I wish you all the best for your journey into frontend web development.