DEV Community

Cover image for TIF's Guide To Become A Frontend Developer
The Internet Folks
The Internet Folks

Posted on

TIF's Guide To Become A Frontend Developer

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

No alt text provided for this image

1. Learn HTML5 for free: an intro to HTML | Scrimba

  • Depth: Basic
  • Learn HTML5 by building your own website in less than an hour!

No alt text provided for this image

2. Mozilla.org HTML Docs

  • This series of docs is the one place you need to learn HTML

CSS

No alt text provided for this image

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.

No alt text provided for this image

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.

No alt text provided for this image

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

No alt text provided for this image

  1. The output may not look similar but try to create it as close to the original Netflix website as possible.
  2. Create the whole landing page and not just this screenshot
  3. 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:

No alt text provided for this image

1. JavaScript Tutorial for Beginners

  • This video will help you get an overview of Javascript

No alt text provided for this image

2. Javascript Playlist by Mosh 

  • Depth: Basics
  • This Youtube playlist is all you need to learn the basics of Javascript

No alt text provided for this image

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

  1. Create a 3x3 grid and 2 users can play this game by marking O and X
  2. The first player to mark 3 horizontal, vertical, or diagonal blocks will win.
  3. 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:

No alt text provided for this image

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:

No alt text provided for this image

1. Egghead React Course

  • 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.

No alt text provided for this image

2. Scrimba React Course

  • 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

No alt text provided for this image

2. Redux Toolkit (Intermediate Level)

No alt text provided for this image

No alt text provided for this image

No alt text provided for this image

3. React Query (Advance Level)

No alt text provided for this image

No alt text provided for this image

4. Framer Motion (Intermediate Level)

No alt text provided for this image

No alt text provided for this image

5. Formik

No alt text provided for this image

Practice Task:

1. Create Swiggy Restaurant Listing UI using Chakra and Framer Motion

No alt text provided for this image

  • 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:

No alt text provided for this image

  • 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:

No alt text provided for this image

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:

No alt text provided for this image

No alt text provided for this image

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

Javascript

Package Manager

React

ReactJS Libraries

IDE

Linters & Formatters

Git & Github

Discussion (0)