React

Basics of HTML

Mark as done

Done

Basics of HTML

Start off by learning the basics of HTML (Hypertext Markup Language) and how to use it with the resources below.

Learn HTML Basics for Beginners

Intro to HTML

HTML Explained: What is HTML?

HTML Crash Course for Absolute Beginners

Basics of CSS

Mark as done

Done

Basics of CSS

Learn more about Cascading Style Sheets as you begin your React programming journey with the resources below.

CSS Crash Course for Absolute Beginners

CSS Basics

Free Basic CSS Tutorial

HTML and CSS Crash Course optional

Box Model

Mark as done

Done

Box Model

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. Learn more about this from the resources below.

Learn CSS Box Model in 8 Minutes

CSS Box Model Properties Explained with Examples

How to work with Box Model in CSS

CSS Box Model Explained for Beginners

The Box Model optional

Grid

Mark as done

Done

Grid

CSS Grid is a tool you can use to help create layouts for your website. Learn more about this from the resources below.

A Complete Guide to Grids

Learn CSS Grid the easy way

Learn CSS Grid by Building Layouts

CSS Selectors

Mark as done

Done

CSS Selectors

CSS selectors are patterns used to select the element(s) you want to style. Learn more from the resources below.

CSS Selectors Made Easy

CSS Selectors Tutorial optional

How to use CSS Selectors

CSS Selectors optional

Flex Box

Mark as done

Done

Flex Box

CSS Flexbox, is a CSS 3 web layout model. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size. Learn more.

A Complete Guide to Flexbox

CSS Flexbox Crash Course

Basic Concepts of Flexbox

Flexbox CSS in 20 Minutes optional

Unit

Mark as done

Done

Unit

A CSS unit determines the size of a property you’re setting for an element or its content. Learn more about this from the resources below.

CSS Unit Guide

CSS Units Explained

Are You Using The Right CSS Units? optional

Learn CSS Units with Examples

Positioning

Mark as done

Done

Positioning

CSS positioning property sets how an element is positioned in a document. CSS helps you to position your HTML element. Learn more.

Positioning Properties in CSS

Position Absolute and Relative Examples - CSS

CSS Positioning Explained

Learn CSS Positioning optional

Template Literals

Mark as done

Done

Template Literals

Template Literals are literal words in programming that are used to represent some kind of fixed value. In JavaScript, they are an easy way to interpolate variables and expressions into strings. Learn more from the resources below.

JavaScript Template Literals

Understanding JavaScript Template Literal

Deep Dive into Template Literals

Spread and Rest Operators

Mark as done

Done

Spread and Rest Operators

The spread operator (...) helps you expand iterables into individual elements. It basically “spreads” the values in an iterable (arrays, strings) across zero or more arguments or elements. The rest operator is used to put the rest of some specific user-supplied values into a JavaScript array. Learn more about these operators from the resources below.

JavaScript Rest vs Spread Operators

Understanding Spread and Rest Operators

Spread and Rest Operators Tutorial

Exploring the Spread Operator and Rest Parameters in JavaScript

Module Import and Export

Mark as done

Done

Module Import and Export

To import module in JavaScript, use the static import statement. The export statement is used in JavaScript modules to export functions, objects, or primitive values from one module so that they can be used in other programs. Learn more using the resources below.

JavaScript Modules

Import and Export in Modern JavaScript

Understanding Modules and Import and Export Statements in JavaScript

Import/Export Modules Made Easy optional

Object Destructuring

Mark as done

Done

Object Destructuring

In this section, you will learn about the expression "Destructuring" in relation to Objects in JavaScript. Object destructuring is a unique technique that allows you to neatly extract an object’s value into new variables. Learn more from the resources below.

What is Object Destructuring in JavaScript

Array vs Object Destructuring in JavaScript

Object Destructuring in JavaScript

JavaScript Object Destructuring Tutorial optional

Variables

Mark as done

Done

Variables

In JavaScript, a variable stores the data value that can be changed later on. Simply put, Variables are containers for storing data. Learn more about this using the resources below.

JavaScript Variables with Examples

JavaScript Variables Declaration and Initialization

Declare JavaScript Variables optional

Functions & Arrow Functions

Mark as done

Done

Functions & Arrow Functions

In JavaScript, a function allows you to define a block of code, give it a name and then execute it as many times as you want. Arrow functions are basically a new way to write anonymous function expressions in JavaScript. Learn more about these using the resources below.

A Gentle Introduction to Arrow Functions

Understanding Arrow Functions in JavaScript

Difference between Regular Functions and Arrow Functions

Arrow Functions in JavaScript optional

Promises

Mark as done

Done

Promises

A promise in JavaScript is an object that may produce a single value some time in the future and may be in one of 3 possible states: fulfilled, rejected, or pending. Learn more about this using the resources below.

JavaScript Promises Explained

JavaScript Promises: An Introduction

JavaScript Promises Simple Breakdown

JavaScript Promises and Promise Chaining

Async Programming

Mark as done

Done

Async Programming

Asynchronous programming makes it possible to express waiting for long-running actions without freezing the program during these actions. Learn more about this using the resources below.

Async Programming with JavaScript

Async JavaScript Course

Asynchronous Programming: Eloquent JavaScript optional

Asynchronous JavaScript optional

Version Control: Git and GitHub

Mark as done

Done

Version Control: Git and GitHub

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. Learn more about Git version control and Github hosting repository for Git with the resources below.

How to get started with Version Control using git

Git Tutorial for Beginners

Git Tutorial for Professionals

GitHub Tutorial - Beginner Training Guide

How to use GitHub

Netlify & Vercel

Mark as done

Done

Netlify & Vercel

Netlify is a platform for web developers to host their sites in the cloud without managing any servers in the back-end. Vercel is a cloud platform that enables developers to host websites and web services that deploy instantly, scale automatically, and require no supervision. Learn more.

How to Build and Deploy Websites using Netlify

A Step-by-Step Guide: Deploying on Netlify

Introduction to Vercel

How to Deploy a React Site with Vercel

NPM & Yarn

Mark as done

Done

NPM & Yarn

NPM (Node Package Manager) is a package manager for the JavaScript programming language. Yarn is a software packaging system developed by Facebook. It is considered an alternative to NPM. Learn more about these using the resources below.

An Absolute Beginner's Guide to Using NPM

NPM Tutorial: How Does It Work?

A Quick Introduction to the Yarn Package Manager

YARN Package Manager Crash Course

What is React?

Mark as done

Done

What is React?

Go deeper in learning about React starting with knowing what React is. React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. Learn more using the resources below.

Tutorial: Intro to React

What is React - Why Is it so popular?

React Crash Course for Beginners optional

JSX

Mark as done

Done

JSX

JSX stands for JavaScript XML. It is a React extension to the JavaScript language syntax. It is used in React to easily write HTML and JavaScript together. You can learn more using the resources below.

React Tutorial: JSX

JSX Intro and Syntax

ReactJS JSX Tutorial optional

Setting up Development Environment in React

Mark as done

Done

Setting up Development Environment in React

Learn how to set up a development environment for successful React development. See the resources below.

5 Steps to Set Up React Development Environment

A Quick Video on How to Set Up Development Environment for React

ReactJS: Setting Up Development Environment

Components in React

Mark as done

Done

Components in React

React components are independent and reusable code. They are the building blocks of any React application. Learn more about these using the resources below.

Understanding React Components

Introduction to React Components

Learn About React Functional Components and More

Reactjs Components optional

Life Cycle Methods in React

Mark as done

Done

Life Cycle Methods in React

Lifecycle methods are special methods built into React. They are a series of methods that are invoked in the lifetime of a react components. Learn more about this using the resources below.

Lifecycle Method CheatSheet

A Deep Dive into React Lifecycle Methods

Understand the React Component Lifecycle Method

React Lifecycle Tutorial optional

List and Keys in React

Mark as done

Done

List and Keys in React

Lists are used to display data in an ordered format and mainly used to display menus on websites. Keys are used to uniquely identify elements in a list and it helps react to identify what is added, updated and changed. Learn more about these with the resources below.

Reactjs List and Keys

List and Keys in React - Full Cheatsheet

Working with List and Keys in Reactjs

How to Render a List with React

State in React

Mark as done

Done

State in React

State is a built-in React object that is used to contain data or information about the component. Learn more about this with the resources below.

How State Works in React

ReactJS State Tutorial

Full React Tutorial - Using State

Reactjs For Beginners - Prop and State Explained optional

Props in React

Mark as done

Done

Props in React

Props stands for properties. They are used in React to pass data from one component to another. Learn more about this with the resources below.

How to use Props in React

Props in React JS

React Props Cheatsheet

React Props Tutorial optional

Styling

Mark as done

Done

Styling

Styling in React describes how React components or elements are displayed on screen or any other media. Here your knowledge of CSS can be put into practice. Hence the importance of learning CSS. Learn more from the resources below.

Styling and CSS - React

Styling React using CSS

How To Style Your React App With CSS

Styling and CSS Basics - React JS Tutorial

Data Fetching (using Fetch API)

Mark as done

Done

Data Fetching (using Fetch API)

The Fetch API is a promise-based Web API that allows you to make network requests in web applications. Learn about data fetching using the Fetch API with the resources below.

Data Fetching in React

Fetch Data from API in React JS

React JS Data Fetching Tutorial optional

Fetch API Cheatsheet optional

Form Handling

Mark as done

Done

Form Handling

In React, form handling is done by components. Basically, handling forms is about how you handle the data when it changes value or gets submitted. Learn more about this from the resources below.

React Forms

Handling a Form in React

Basics of Form Handling

How to Build Forms in React

Reconciliation Process

Mark as done

Done

Reconciliation Process

In React, Reconciliation is the process through which React updates the DOM. When a component's state changes, React has to calculate if it is necessary to update the DOM. Learn more using the resources below.

Reconciliation in React

What is Reconciliation Process in React JS

ReactJS Reconciliation Tutorial

React Hooks

Mark as done

Done

React Hooks

As a new feature, Hooks in React are in-built functions that allow the use of state and other React features without having to write a class. Learn more about this from the resources below.

Introduction to React Hooks

Learn React Hook by Building a Paint App

React Hook Explained

React Hooks Crash Course

Introducing Hooks in React optional

Custom React Hooks

Mark as done

Done

Custom React Hooks

Custom React hooks are an essential tool that let you add special, unique functionality to your React applications. Learn more about this from the resources below.

Building your own Custom Hooks in React

Step-by-Step Guide on How to Build Your Own React Hook

Making a Custom Hook

React Custom Hooks optional

React Context

Mark as done

Done

React Context

React context allows us to pass down and use data in whatever component we need in our React app without using props. Learn more about this from the resources below.

Context in React

React Context for Beginners

How to use React Context Effectively

React Context API: A Deep Dive with Examples

React State Management - Redux

Mark as done

Done

React State Management - Redux

State management is simply a way to engender communication and sharing of data across components. Redux is an open-source JavaScript library for managing and centralizing application state. Learn more about this from the resources below.

Learn Redux Basics with Coding Examples

Understanding Redux

How to Manage State in React with Redux

How to Use Redux for Apps

Return of Redux - React State Management

Why use Redux? optional

MobX - React State Management

Mark as done

Done

MobX - React State Management

MobX is an open source state management tool. It is simple, scalable, boilerplate-free. Learn more about this from the resources below.

React Integration - MobX

MobX in React - Learn the Basics

Manage React State like a boss with MobX

MobX State Management in React optional

React Lazy loading

Mark as done

Done

React Lazy loading

Lazy loading is a function in react that lets you load react components through code splitting without help from any additional libraries. Learn more about this using the resources below.

React Lazy Loading Tutorial

Lazy Loading 101 - React

Lazy Loading in ReactJS

React Router

Mark as done

Done

React Router

React Router is the standard routing library for React. It is used to create routing in the React application using React Router Package. Learn more about this from the resources below

React Router Quick Start

How to Handle Routing in React Apps

Beginner's Tutorial: Learn React Router in 5 Minutes

The React Router Full Tutorial optional

React Portal

Mark as done

Done

React Portal

React Portals provides the ability for an element to render outside the default hierarchy without compromising the parent-child relationship between components. Learn more about this using the resources below.

Understanding React Portals and its Use-Cases

Learn React Portal by Building a Modal

Portals in React optional

React Theme

Mark as done

Done

React Theme

Learn about React Theme from the resources below.

Theming and Theme Switching with React

How to Add Theme to your React App

Theming Components in React

React Navigations - Themes optional

React Fiber Architecture

Mark as done

Done

React Fiber Architecture

Learn about React Fiber Architecture using the resources below.

Understanding React Fiber Architecture

Introduction to React Fiber

React Internals - Fiber Architecture

A Deep Dive into React Fiber Architecture

React Refs

Mark as done

Done

React Refs

React Refs are a function that is used to access the DOM from components. Learn more about this using the resources below.

Refs in React

A Complete Guide to React refs

Working with refs in React

Refs and The DOM optional

React Tutorial - Input Refs optional

Accessibility in React

Mark as done

Done

Accessibility in React

Accessibility in React is the necessary tools in which a website can be made easy to access by the user. This would typically include the presence of features like clickable buttons or dropdowns or spaces to write a comment and stuff. Learn more about this from the resources below.

Accessibility in React Tutorial

React Accessibility Tools

Understanding Accessibility in React

React Error Boundaries

Mark as done

Done

React Error Boundaries

Error boundaries are components in React that catch errors in an application. They are the first line of defense and have been a feature of React for years. Learn more about Error Boundaries from the resources below.

Failing Gracefully with React Error Boundary

Using React Error Boundaries to Handle Errors in react Components

How to Use Error Boundaries in React

React Cheatsheets - Error Boundaries optional

React Patterns

Mark as done

Done

React Patterns

Expand your knowledge about React Patterns from the resources below.

The Modern Guide to React State Patterns

Advanced React Patterns

React Design Patterns you should know

Advanced React - PATTERNS, Performance, Environment and Testing optional

React Anti-Patterns

Mark as done

Done

React Anti-Patterns

Deep dive into React Anti-Patterns, which are basically patterns you should avoid in React. See the resources below.

React Best Practices - Avoiding Anti-Patterns

React the Wrong Way: Anti-Patterns to Avoid

How to NOT React optional

React Component Anti-Patterns

Next.js

Mark as done

Done

Next.js

Next.js is an open-source web development framework that enables React based web applications functionalities such as generating static websites and server-side rendering. Learn more below.

Next.js Crash Course for Beginners

Get Started with Next.js

Next.js Tutorial - Introduction and Setup

The Next.js Handbook optional

A Complete Beginner's Guide to Next.js optional

GatsbyJs

Mark as done

Done

GatsbyJs

Gatsby.js is a static PWA (Progressive Web App) generator that embraces the use of dynamic web frameworks, using React on the frontend and Node.js on the backend. Learn more.

Gatsby.js Official Website

React Websites Using Gatsby.js - Tutorial

In Depth Gatsby.js Tutorial

Learn Gatsby.js with React optional

Remix

Mark as done

Done

Remix

Remix is a web application framework for React, which provides APIs and conventions for server rendering, data loading, routing and more. Learn more about this from the resources below.

Introduction to Remix

Remix Crash Course

Remix Guide optional

Remix in React.js - Examples optional

Apollo

Mark as done

Done

Apollo

Apollo helps you request data from any endpoint in a declarative way and takes care of the whole request cycle. Learn more about this from the resources below.

Introduction to Apollo Client

Apollo Client with React

Apollo Client Tutorial in React - Real World Examples

Axios

Mark as done

Done

Axios

Axios is a promise-based HTTP Client for node.js and the browser. It makes http requests from node.js. Learn more about this from the resources below.

How to Use Axios with React

Axios in React: A Guide for Beginners

React Axios API Requests

Using Axios with React optional

React-query

Mark as done

Done

React-query

React-query is a tool that helps make fetching, caching, synchronizing and updating server state in React applications easy. Learn more about this from the resources below.

React-query Tutorial: Introduction and Set-up

Getting Started with React-query for Data Fetching

React-query - A Practical Example

React-query: Server State Management in React

Superagent

Mark as done

Done

Superagent

Superagent is described in its documentation as a light-weight progressive ajax API crafted for flexibility, readability, and a low learning curve after being frustrated with many of the existing request APIs. Learn more about this from the resources below.

Superagent - NPM

React Superagent Examples

Calling APIs from your ReactJS Components Using Superagent

Use-http

Mark as done

Done

Use-http

Use-http is a react library that simplifies the data fetching process in react, using react hooks. Learn more about this from the resources below.

How To Use use-http library in React

Make HTTP Requests with React

HTTP GET Request Examples optional

React Forms

Mark as done

Done

React Forms

Forms are a vital component of web applications. Basically, they allow users to directly interact with the application while also gathering information from the users too. Learn more about this from the resources below.

React Forms

How to Build Forms in React

React Forms Tutorial optional

Formik

Mark as done

Done

Formik

Formik is a free and open source, lightweight library for ReactJS or React Native. It is considered as the world's most popular open source form library for both. Learn more about this from the resources below.

Formik Documentation

Using Formik to Handle Forms in React

Build React Forms using Formik optional

React Final Form

Mark as done

Done

React Final Form

React Final Form is a lightweight, subscription-based form library in react. Learn more about this from the resources below.

Manage Forms the easy way on React with Final Form

Final Form Documentation

React Final Form Tutorial for Beginners

Final Form optional

React Hook Form

Mark as done

Done

React Hook Form

React Hook Form is a minimal library that is relatively new. It helps validate forms in React. Learn more about this from the resources below.

React Hook Form

How To Add Form Validity using React Hook Form

Get Started with React Hook Form

Typescript

PropTypes

Mark as done

Done

PropTypes

PropTypes is basically a built-in type-checking tool in React. Its function is to provide clear assertions as to the type of data a React component needs to render properly. Learn more about this from the resources below.

PropTypes in React: A Complete Guide

How To Use PropTypes in React

Implement Prop type checking with PropTypes

Write Less Bugs with PropTypes

Flow

Mark as done

Done

Flow

Flow is a static type checker that allows a developer to check for type errors while developing code. Learn more about this from the resources below.

Set Up Flow with React

React Flow Tutorial

Type Check React Component with Flow

A Guide to Flow in React Native optional

Material UI

Mark as done

Done

Material UI

Material-UI is an open-source, front-end, lightweight framework/library that allows import and use of different components to create a user interface in React applications. Learn more about this from the resources below.

Material UI

Material UI React Tutorial

Github MUI Core optional

Chakra UI

Mark as done

Done

Chakra UI

Chakra UI is a CSS framework for React based applications which allows you to create accessible React apps with speed. Learn more about this framework from the resources below.

Chakra UI Doc

Why You Should Start Using Chakra UI

Install & Set Up Chakra UI in a React Project

How to Implement Chakra UI in ReactJS

Ant Design

Mark as done

Done

Ant Design

Ant Design is an enterprise-level UI design language and React component library. Learn more about this from the resources below.

Getting Started - Ant Design

Ant Design and React JS

Ant Design React Tutorial

Build a React App with ANT Design Principles optional

Styling Component (Emotion)

Mark as done

Done

Styling Component (Emotion)

Emotion is a flexible and highly performant CSS-in-JS library. Learn more about this from the resources below.

Emotion Documentation

How To Use Emotion For Styling in React

Styling Components using Emotions in React

Learn Styling Components with Emotion

React Native

Mark as done

Done

React Native

React Native is an open-source, JavaScript-based mobile app framework that allows you to build natively-rendered mobile apps for iOS and Android. Learn more.

React Native

What is React Native?

React Native Tutorial for Beginners

React Native Course

Jest

Mark as done

Done

Jest

Jest is an open-source test framework that has a great integration with React. js. Learn more about this from the resources below.

Testing React Apps - Jest

How To Test React Components Using Jest

A Practical Guide to Testing React Applications with Jest

React Unit Testing using Enzyme and JEST optional

Cypress

Mark as done

Done

Cypress

Cypress is a front-end testing tool constructed for modern web applications. It can effectively run an End to End testing on a simple react application. Learn more about this from the resources below.

Getting Started with Cypress Components Testing

Using Cypress to Write Test for React Applications

React App Testing with Cypress

React Testing Library

Mark as done

Done

React Testing Library

React Testing Library is a testing utility tool that helps you write tests that resemble how a user would use your application. Learn more about this from the resources below.

React Testing Library

Testing React Apps with React Testing Library

React Testing Library Tutorial

Simplify component testing with React Testing Library

Test Your Skills

To make your journey easier, pick a path

Got feedback?

Contact