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 !
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:
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.
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).
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
2. Functionality with js – Use JS to make things move and function
3.Games – Makes you realize everything is just moving boxes
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 !
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.
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:
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.
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:
**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 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 —
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:
For those who would consider free courses only, here are some resources from Youtube:
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:
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 –
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.
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.
Its that time round the calendar again, but different for you all as for the first time now. You all will be facing the on campus placement season.Wit......
WHAT IS WEB3?Web3 is the catch-all term for the vision of an upgraded version of the internet aimed at giving power back to the users. It is truly the......
The job hunting landscape has evolved in different aspects since the advent of the internet. Thanks to the internet, online applications for a particu......
Writing a cold email might be challenging, but the proper pearl of knowledge can spare business years of pain and thousands of dollars. But how can yo......
In the IT sector, skills in computer science are in high demand. Coding, computing, data processing, the internet of things, network information secur......
Being an open-source Operating System, Android is widely used in mobile devices like tablets, smartphones, etc. Recently android is also being used in...
Overview:If you're new to programming, this guide will teach you about backend development. It's broken down into easy-to-understand steps so you can ...
If you want to go into web development, I propose that you learn/watch at least a few of those roadmaps before deciding what you want to learn.Everyon...
Nowadays students tend to go more for off campus placements rather than on campus placements.One of ...
You want to learn how to code, but what should you build?“Everybody should learn to program a comput...
Placements are an important part of engineering life, and while everyone hopes to be placed in a reputable company, only a few are successful. This is primarily due to a...