Overview

Front end development is the area of web development that focuses on the user interface (UI). Front end engineers convert high fidelity UI mockups which are already provided by designers. Today (2022), frontend development has evolved from what it was 15-20 years ago. There are various challenges regarding performance, accessibility, rendering of data, state management etc that require a high degree of engineering expertise. But, it is extremely easy to get started with. In this article, I am gonna tell you my way of learning it without getting overwhelmed. So let’s get started !

The basics first !

I’m sure you visit your web browser many times a day. But have you ever wondered exactly what happens when you type https://www.pephub.tech/  and hit that enter button ? Gaining a little knowledge about how the web works in general and the http protocol would go a long way in your web development journey. Here are some of the resources that depict this nicely:

• How the internet works
• Http explained

HTML CSS and JS  — Fundamentals

HTML, CSS and Javascript are the core fundamentals, the building blocks of the frontend domain. To become a great front end developer, you should spend a good amount of time with them. Also, it would make the rest of the journey much easier, if you have a firm grasp of them. As usual, I’m gonna list out the important topics and resources to learn them.

1. Hyper Text Markup Language (HTML):
2. HTML basics
3. Best Practices while writing HTML

1. Cascading Style Sheets (CSS):
2. CSS Basics
3. Flexbox – Tool for making layouts
4. Grids – Another tool for making layouts!
5. Animations and Transitions!

1. Javascript(JS):
2. Javascript basics
3. ES6 and beyond

This should suffice in teaching you the core concepts and fundamentals of the UI world. But, just learning stuff won’t do. There is one more requirement, projects ! To become a real developer, you must build projects – and that too on your own (more on this later).

Building projects with only HTML CSS and JS:

Now, we don’t wanna just keep on learning forever. Put those awesome skills into practice and let’s build something cool !

Now, a word of caution — at this stage, people fall into something known as the “Tutorial Hell”. It basically means that one cannot build anything on their own, and always needs a tutorial for the smallest of the things. It is absolutely fine relying on youtube videos early on. But, after 1-2 projects, try creating the next on your own. Google is always there to help you if you’re stuck. Breaking down a bigger problem into sub-problems, and solving them individually with the help of google and your knowledge is by far the most important skill to develop as a software engineer.

As usual, I’m gonna share some cool mini projects that’s gonna let you learn how HTML, CSS and Javascript works with each other and make the web work.

1.UI building projects —  how to build UI using flexbox and grid

1. Build a website
2. Build a responsive Navbar

2. Functionality with js – Use JS to make things move and function

1. The classic todo list app
2. Recipe App
3. Music Player App

3.Games – Makes you realize everything is just moving boxes

1. An infinite runner game (A little advanced)
2. Tic-Tac-Toe
3. Chrome dino game

Version Control ! Git and Github:

So, having fun with the projects ? Up until now, you have been building stuff all on your own. But soon, you're gonna need a Version Control System! Scary name eh ? Think of VCS as a way to create save points in your projects. Those save points known as “commits” allow you to keep a history of all the gradual changes you have made to your project. It also allows you to travel back to a point in the past, if you wanna change something in your project. Time traveling stuff !

Now, github is a community, it is a platform for hosting your git folders (repositories) online for the world to see.

Anyways, mastering git is a must for a software engineer, so it’s pretty important stuff. Here are the resources that will make you a git ninja !

1. This is all you need to get started
2. Advanced stuff. Not necessary, but good to know

CSS preprocessors and Libraries:

CSS has improved a lot in recent years. It is a pretty powerful tool right now with all those Flexboxes, Grids and Clamps. But, you know, when building really large projects, just plain old CSS is barely enough. So, we use CSS libraries and pre-processors to ease our job of styling the application !

Pre-processors: These are tools that have features like nesting, mixins, etc. All these are compiled to raw CSS which are then rendered by the browser. I’d suggest learning “sass”. It’s the most used pre-processor in the industry in 2022.

1. Latest one I could find. Does a pretty decent job explaining the nuances

CSS-Libraries: So, you have a project idea and you want to prototype fast. Or, it’s a really huge project and you don’t wanna keep fighting with CSS and rather focus on functionality. Well, if this sounds like you, CSS libraries are just the perfect Tool for you.

CSS Libraries have predefined classes and components that you could just plug n play. There are multiple types of CSS libraries out there. Some give you full blown, highly opinionated components. Downside being, they look too similar.

Others follow a more atomic approach. They have small classes like ".w-screen”, “.flex”, “md:flex-col”, etc that give full flexibility. This takes some time to master, but the effort is well worth it.

According to my recommendation, you should learn one of each type. Rest are pretty similar in their implementation and should take a few minutes to pick up.

The ones I suggest are “bootstrap” and “Tailwind css”. Links to learn both of them below:

1. Bootstrap
2. Official docs – make sure to visit it
3. Video tutorial

1. Tailwind css
2. Official docs - It’s amazingly built
3. Video tutorial

Make sure to use them in your projects. That’s the real way you would actually learn them. Also, don’t memorize anything. Read the docs whenever you need something.

Node.js and NPM:

If you are with me this far, congratulations. It’s not at all an easy job to learn all these technologies and make them work in tandem. Great job so far.

Let’s talk about what exactly is Node. Before 2009, javascript was only able to run on browsers. But, in 2009, a guy named Ryan Dahl managed to get javascript to work in our computers, without the need of any browser. He also wrote C++ bindings to allow file handling, network I/O and socket I/O. This way, node.js was born and javascript was introduced to the world of backend development.

Formally, node is a runtime environment for javascript. At the same time, NPM was born too. Node Package Manager (NPM) as the name suggests, is a package manager. What is a package manager you ask ? Well, think of it this way — If you wanna download an app, you go to playstore, or apple store. Similarly, If you wanna install any library or framework in node, you go to npm.

Resources to learn them given below:

1. Npm crash course
2. Node video course (just the surface level)

**So, I’m not really delving deep in node.js. The reason being this is a frontend guide, I will cover it in the backend roadmap.

SPA – Now that’s the real deal!

SPA  stands for “Single Page Application”. The website you are reading this roadmap on, is also a “Single Page Application”. So, What does that even mean ? Is it only one page or anything ? Nope, not at all.

Till now, the sites we have seen are all built in a certain way. We write the HTML structure, style the HTML structure with CSS and then use Javascript to make it interactive. If the site has multiple pages, it would also require that many HTML files. We link them up using the “</link>” tag. That’s why, when you click a link, you see a subtle flash and the page loads another HTML document. We now have a better way of doing stuff. That approach is called SPA.

In Single Page applications, We only have one empty (well, almost) HTML file. We use a  Javascript library or framework to describe the Layouts, Functionalities and States of our app. Rest everything (like creating DOM nodes, injecting them to specific places, deleting nodes) is handled by that framework or library. This way of doing things has many advantages —

1. That flash of reload is no longer there. Cause we only have one single page that’s why the name Single Page application.

1. SPAs are fast and that’s their main selling point.

1. Code is entirely written in javascript. So, reuse of code is at its maximum.

At the time of writing (2022), there are a plethora of SPA frameworks and Libraries to choose from. There are React, Angular, Vue, Solid, Svelte and more.

I’ll be a bit opinionated in this one and would suggest sticking with React.js considering the job market and community and stuff. If you’d like to go with something different, absolutely do so! In the end, concepts that you learn are all that matters.

This guide assumes you have picked React as your choice.

Up until now, I’ve suggested free resources. But, the react ecosystem is a world of stuff in itself. So, it would be better to instead learn from a structured udemy course.

Here are my recommendations:

1. React - The complete Guide
2. This course from Stephen Grider

For those who would consider free courses only, here are some resources from Youtube:

1.  Basic React - The fundamentals of SPA
2. Just the basics and few projects

1. Under The Hood Stuff
2. UI Rendering process

1. React hooks and their usage

1. A project to really drill in the basics

Global States — State management solutions:

If you’ve been following the guide, you would definitely have felt the props drilling problem. Now, There are a couple of solutions to this problem. We could use the context Api to inject the dependencies (states) we want at any level of the UI tree. But this comes at a major performance hit.

The widely accepted solution to this problem is global states. The idea in simple words is like this:

We keep a plain javascript object that stores necessary states across the whole application. All components dependent upon that state will pull it from the store and from nowhere else. Also, components can’t modify the state directly and have to follow specific rules to do so.

Now, the library that is widely used in the industry is redux. It follows flux like architecture to solve the global state problem.

Also note that redux is not React specific. It can very well be used in vanilla javascript applications as well.

Resources to learn redux are given below:

1. This video from dev ed
2. Redux with vanilla js
3. Redux in a project
4. Redux thunk
5. Redux toolkit – reduce boilerplate

The end and Beyond

If you managed to come this far, give yourself a pat on the back! It is really not that easy to get this far, congratulations. Although it is just the beginning. This roadmap only covers the bare minimum needs. There are several paths you could take from here —

1.You like frontend development, and you would want to dive deeper in the field. If that’s the case, there are multiple topics like Server Side Rendering and Next.js, Core Web Vitals, Web security, Accessibility, Deep dive into animations with GSAP and stuff, learning Three.js and building 3D interfaces, are some of the options available to you. Explore more and keep doing what you love.

2.You want to be a full stack developer. In that case, you can follow the MERN stack approach.

MERN stands for 4 technologies –

1. MongoDB as the Database,
2. Express.js as the server side framework,
3. React as the frontend UI library
4. Node.js for providing the runtime environment.

This is the widely taken path and can help you get a sense of width of how the frontend and backend harmonize for simple monolithic applications.

Here, I’ve listed down some of the blogs and resources I personally follow to acquire knowledge and explore stuff.

• https://css-tricks.com/  for all things CSS
• https://javascript.info/ amazing resource for javascript
• https://developer.mozilla.org/en-US/  the ultimate resource for web developers
• https://blog.logrocket.com/   many interesting concepts and implementations.
• Namaste Javascript Playlist  important javascript concepts in depth

Conclusion

This blog gives you a rough pathway of core topics to follow. Ofcourse, you can and should explore more on your journey. There will be new blogs coming on frontend interview preparation soon, so stay tuned. Also, if you have any particular topic that you want covered, please write to us. If you wanna connect with me, here is my linkedin profile — Soumava Banerjee. If you have any questions, feel free to contact me.