A Project Focused Frontend Dev Roadmap with a Curated Youtube Playlist (2022)

Hey there geek 👋 , new to web dev and want to know about Frontend and how web works? Checkout this video

I’ve put together a resource playlist, but let me break it down into three levels with topics that you can focus on.

👉 Level 1

</> HTML

Go through this short yet informative video that covers everything for you to get started.

Topics to focus on:

• Structure
• Elements & attributes
• Tags
• Lists
• Input forms
• Divs & spans
• Links
• Images.

🌈 CSS

Here's something to beautify our boring HTML code with colors, transitions, animations, and much more.

Topics to focus on:

• Styling methods
• Class & id
• Box modal
• Fonts & units
• Positioning
• Flex box & grid
• Pseudo classes
• Media queries for responsiveness

⚙️ JavaScript

Adds logic and functionality. A really important piece of the puzzle. Your go-to guide for JS can be the MDN docs. And, I can't stress this enough, you definitely must watch Namaste JavaScript series by Akshay Saini.

Topics to focus on:

• Variables
• Data types
• Loops
• Arithmetic logical operators
• Functions
• Arrays
• Array methods
• Objects
• Destructing
• DOM
• Event listeners
• Asynchronous JS
• Promises
• Async/await
• Classes
• Inheritance
• Fetch API

🤩 Your First VanillaJS Project

An easy and no-brainer project you can always rely on is a - Todo List app with CRUD functions. Go ahead and try to build it. Need help? Go through this article

👉 Level 2

🤌 Dev Tools

Helps to debug our code. DevTools is a set of web developer tools that are built directly into the browsers. They allow you to view and change/manipulate the DOM, change a page's styles (CSS) in a preview environment, and work with JavaScript by allowing you to debug, view messages, and run JavaScript code in the console.

🌳 Git & GitHub

Git is like the auto-save feature in video games, that allows you to code, right where you left it or from various other checkpoints.

Git and GitHub are two different things.

• “Git is a version control system”
• “GitHub, GitLab, BitBucket are all websites that allow you to collaborate and flex your code on the internet.” You'll deal with them on a daily basis, the earlier you get the hang of it, the better. Here's a good video to start with.

⚛️ ReactJS

A JS library, beginner friendly, easy to digest. You can read more about "Why ReactJS ?" on my previous blog or you can gain a better understanding of this topic by watching this video

Topics to focus on:

• Functional components
• Reusability of components
• Props
• Hooks(useState, useEffect, useRef )
• State management
• Routing

State Management

Can be managed with hooks ( context api ) for smaller projects. But, you definitely should look into redux or mobx for some complex state management solution.

Routing

React Router is a standard library for routing, enables the navigation among views of various components in a React App, allows changing the browser URL, and keeps the UI in sync with the URL.

✌️ Your First ReactJS Project

Try recreating the Todo list app in React, with the help of hooks. Need help? Gotcha ! Here’s a codesandbox link

👉 Level 3

🔥 Firebase

Want to build full-stack apps without getting into the backend? Want to create authentication, a real-time database, and cloud storage, without diving into all the backend complexities? Google's Firebase got your back. Know more

🦄 CSS Framework, Component library

Provides you with ready-to-use UI components. Every framework has its own pros and cons, some of the popular ones are our in-house component library NativeBase, Tailwind CSS, Material UI, and Bootstrap. Also, you can watch this video.

{ : } TypeScript

TypeScript is JavaScript with OCD! Jokes aside, TypeScript is strongly typed, meaning one must declare what kind of data each variable will contain. While this may slightly increase development time for very small, simple programs, most modern software contains thousands of lines of code across multiple files, often by different authors. In cases like this, clearly defining what sorts of variables are acceptable can prevent hard-to-locate bugs from making it into the wild. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code. It is open source, but you only get the clever Intellisense as you type if you use a supported IDE.

🥳 Your First Portfolio

A simple portfolio site with all of your projects on one page is always handy. Get your inspirations from here or code along with Lama dev here .

👉 Bonus

💻 Project ideas for a stronger portfolio

Research, Collaborate, and Build projects that you are passionate about. Also, Here’s the playlist with some portfolio worthy projects, for you to get started.

📄 Resume Tips

A great resume is always, single paged and straight to the point. The template section of Google Docs offers a wide variety of free resume templates. Akshay has got some more tips on it here.

👉 Here are the key takeaways links

• Frontend Dev Roadmap Playlist
• Portfolio Worthy Projects Playlist

👏 Huge shoutout to everyone on this playlist, if you haven't already, check out their channels! And feel free to comment and suggest other resources.

Stay geeky 🤓