According to Stackoverflow, their platform consists of 27.42% frontend developers and according to Statista, 40.14% of all the developers use ReactJS Framework around the world.
Front-end developers are the ones who are responsible for how your website looks and operates. The end-user directly interacts with the work of a front-end developer.
At TIF, we all have been working with multiple tech teams around the world. This guide can get you started and get you to the next stage of Frontend Development. But following the courses won't make you a pro. It's just writing code and solving different problems.
You need to sit and dedicate a lot of time to learn the ins and outs of these techs.
Rest assured the following roadmap is everything that you need to know as a beginner.
(You can also jump to the end to get the list of resources and miss some important information)
HTML & CSS
The flashy and user-friendly websites that you see today are the results of HTML and CSS. These two are responsible for the layout and format of the pages that you visit.
If a web page is a body then HTML is supposed to be its skeleton and CSS to be the skin.
While you can create websites using just HTML they might look mundane. Therefore CSS comes into the picture to add style to visuals.
💡Pro-tip: Get a basic idea of these technologies and move forward.
You will learn a lot of things by doing projects in Javascript and React. Waiting to learn everything will stop you from seeing the real magic of web development 😉
Check out these cool links to see what they can do:
Here are the RESOURCES for you to start learning
HTML
1. Learn HTML5 for free: an intro to HTML | Scrimba
- Depth: Basic
- Learn HTML5 by building your own website in less than an hour!
- This series of docs is the one place you need to learn HTML
CSS
1. CSS course: an intro tutorial on CSS | Scrimba
- Depth: Basic
- This course contains 20 interactive tutorials and will teach you the basics of CSS in an hour.
2. CSS Tutorial - Zero to Hero Freecodecamp
- Depth: Advance
- You will learn everything from basic skills, such as coloring and text, to highly advanced skills, like custom animations.
3. CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets.
- Acquired by Digital Ocean, this website is the all-in-one resource to learn everything you need and even the things you might think is impossible.
Practice Tasks
Task 1
Deadline: 3 days
Description: Make a clone of Netflix landing page by using HTML and CSS
- The output may not look similar but try to create it as close to the original Netflix website as possible.
- Create the whole landing page and not just this screenshot
- Create on your own. Do not follow any course to create this.
Javascript
As the above two are responsible for the visual appearance of the website, javascript is responsible for its workings.
It enables the interface of your webpage. Move your cursor along with the Youtube thumbnail and a short clip appears, that's JS.
After you are familiar with Javascript, working together with HTML, CSS and JS will enable you to create your own websites. You can start with an internship, or it might even come in handy in designing your own websites for your little business ventures.
💡Pro-tip: You may not find yourself working on native Javascript much when you will start working on ReactJS.
Working on React and working on Javascript are quite different. We advise you to learn the basics of JS and move forward to ReactJS.
Here are the RESOURCES for you to start learning JS:
1. JavaScript Tutorial for Beginners
- This video will help you get an overview of Javascript
2. Javascript Playlist by Mosh
- Depth: Basics
- This Youtube playlist is all you need to learn the basics of Javascript
3. Javascript 30: 30 Day Vanilla JS Coding Challenge
- Worrying about a new idea for a JS project? This website has a collection of 30 project tutorials that you can easily follow to learn JS.
Practice Task
Task 1
Deadline: 1-day
Description: Build a tic-tac-toe game
- Create a 3x3 grid and 2 users can play this game by marking O and X
- The first player to mark 3 horizontal, vertical, or diagonal blocks will win.
- Set your deadline for 6 hours.
Package Manager
A package manager helps you to install new software, update your existing versions and uninstall software.
The node package manager and yarn are the most commonly used ones.
Here are the RESOURCES for you to start learning package manager:
1. Yarn vs npm: Everything You Need to Know - SitePoint
- Just having a basic knowledge of it is enough
ReactJS
Developers often use the words Framework and Library interchangeably. A library is like a furniture in the home whereas a Framework is like a skeleton to build the home and as many homes as you want.
There are multiple options to choose a skeleton from but none of them are the same.
React is a great framework to be used for front-end development. It's easier to code in React than in JS and probably that's the reason developers love it.
💡Pro-tip: Once you are familiar with React, learn from its official documentation. It is the best way to get familiar with react is to read the docs https://reactjs.org/docs/getting-started.html.
Here are the RESOURCES for you to start learning:
- Depth: Beginner
- This course is for React newbies and anyone looking to build a solid foundation. It's designed to teach you everything you need to start building web applications in React right away.
- Depth: Intermediate
- You will learn the basics and more with this interactive React course.
ReactJS Libraries
When writing a program there might be certain patterns in the code being used repeatedly to accomplish the same tasks. This led to the development of javascript libraries.
Javascript libraries are one of those things which are not at all necessary for you but have made programming so efficient that it is imperative that you learn to use them.
We recommend you start with
1. Chakra UI
- Chakra UI is a component library that gives you the building blocks you need to build your React applications.
2. Redux Toolkit (Intermediate Level)
- Official toolset for efficient Redux development.
3. React Query (Advance Level)
- It is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing, and updating server state in your React applications a breeze.
4. Framer Motion (Intermediate Level)
- It is a production-ready motion library for React.
5. Formik
- Most popular form library for React.
💡Pro-tip: Read official documentation. They are a great resource for learning and may not seem interesting like watching a video but they have the nuances of tech that nobody else explains.
Here are the RESOURCES for you to start learning:
1. Chakra UI
- Build a Modern User Interface with Chakra UI
- A short and simple course to help you learn to build interfaces using Chakra UI.
2. Redux Toolkit (Intermediate Level)
- Redux.org Docs
- You can get an overview of Redux here
- Redux Tutorial (with Redux Toolkit)
- This tutorial contains all the basic information and hands-on you need to start working with RTK.
- Let's Learn Modern Redux! (with Mark Erikson)
- In this tutorial, maintainer of Redux Toolkit will explain how to use RTK
3. React Query (Advance Level)
- Practical React Query | TkDodo's blog
- For an overview of React Query
- Overview | React Query | TanStack
- The official documentation of React Query is the best place to learn React Query.
4. Framer Motion (Intermediate Level)
- Framer Motion (for React) Tutorial
- This playlist will help you get started with Framer motion.
- Framer Official Docs
- Yes! The official documentation again.
5. Formik
- Formik.org Docs
- And the official documentation again.
Practice Task:
1. Create Swiggy Restaurant Listing UI using Chakra and Framer Motion
- Create the build pixel-perfect to the design. Use the same font, same size, same spacing, same images, and the same color as per the design
- Create the whole landing page and not just this screenshot
- Set the deadline for 3 days
2. Create Swiggy Favourite Page using Redux Toolkit (not Redux)
- Let's go beyond what Swiggy does and create a favorite button for their restaurant listing
- Add a star button on their restaurant cards
- And create a page to show all the user's favorites restaurants using Redux Toolkit
- Set the deadline for 2 days
3. Swiggy Restaurant Listing pages with React Query
- Use the newly modify Swiggy Restaurant Page and add React Query to its pagination
- Set the deadline for 2 days
4. Swiggy Multi-step Survey Form using Formik
- Let's again go beyond what Swiggy does and create a multi-step survey form for Restaurants
- Create a 3 step form using the Formik library
- Set the deadline for 3 days
IDE (Integrated development environment)
The main aim of using an IDE is to increase your productivity. An IDE is a software that combines common developer tools into a single Graphical User Interface (GUI) for developing programs.
Visual studio code is the IDE that our team prefers and suggests.
VS Code Cheat Sheet:
- Visual Studio Code Tips and Tricks
- You don't have to mug up all the info in this blog. Just having an idea of all these things is good and obviously, you can use some tricks to remove some work from your shoulder.
Good To Know Tools
Linters & Formatters
Ever tried using a rough notebook to write something important and then finding it impossible to search it in the future? The same might happen with your code too.
Linters and formatters make you follow best practices and improve your code consistency and thus making it easy to read and understand for you as well as others.
Here are the RESOURCES for you to start learning:
- https://javascript.plainenglish.io/set-up-react-js-with-eslint-prettier-and-airbnb-cc015363a7c7
- Using Linters and Formatters is no rocket science, this blog contains all the things you will need to get it into use.
Git & Github
Having your own Github account is an amazing way to track your progress and collaborate with your team. You can add your projects and snippets and keep revisiting them from time to time.
This also acts as a great attachment to your resume.
Here are the RESOURCES for you to start learning:
Wrap-up of the roadmap
Start with HTML and CSS and then make your own web pages as soon as you grasp the basics. As you move further the guide make sure to keep this process in check, making things along the way.
While building projects, one thing you can do is to make things that might be of utility to you. Build a note-taking app, an alarm clock, a to-do list, etc.
If you will be invested in the process and using it in your daily lives then it'll be more interesting for you to work on your learnings. It'll also make your journey even more fulfilling.
As time passes by, keep challenging yourself by increasing the complexity of your projects. Add animations to your clock, make your to-do list page a little more interactive by adding certain bullet journaling techniques, etc.
You can definitely choose any other framework of JS but with the current trend in technology, we recommend React. It's a great skill to learn.
Follow this roadmap and by the time you are done with it not only, you would be well learned but also well practiced with each and every concept.
Let us know in the comments if you have any doubts during the process. We'll be happy to help. :)
List of Resources
HTML & CSS
- Learn HTML5 for free: an intro to HTML | Scrimba
- Mozilla.org HTML Docs
- CSS course: an intro tutorial on CSS | Scrimba
- CSS Tutorial - Zero to Hero Freecodecamp
- CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets.
Javascript
- JavaScript Tutorial for Beginners
- Javascript Playlist by Mosh
- Javascript 30: 30 Day Vanilla JS Coding Challenge
Package Manager
React
ReactJS Libraries
- Build a Modern User Interface with Chakra UI
- Redux.org Docs
- Redux Tutorial (with Redux Toolkit)
- Let's Learn Modern Redux! (with Mark Erikson)
- Practical React Query | TkDodo's blog
- Overview | React Query | TanStack
- Framer Motion (for React) Tutorial
- Framer Official Docs
- Formik.org Docs
Top comments (0)