This is a roadmap to become a fullstack developer from scratch. Our tech stack focuses on modern technologies of 2021 in the web development space. Linux, React, Next.js, TypeScript, Node, CI/CD, AWS, and scalable, stateless aspects of coding.

Before starting frontend development, let us look at how everything on internet really works. This will lay a solid foundation for our frontend journey

Introduction to HTTP

What is DNS?

What does DNS do?

HTTP Status Codes

Select the correct status code and its description

Port Number

Which one is not a valid port number?

HTTP Request Methods

Which one is NOT a HTTP request method?

HTTP Request Headers

What is true about Headers in HTTP?

Raw HTTP Requests using netcat

Introduction

How to use codedamn

How to use VSCode

First HTML Page

Comments in HTML

HTML Tags

Heading Tags

Exercise lab for heading

Block and inline tags

Exercise lab for paragraph

Anchor (a) tag

Exercise lab for anchor tag

Why HTML tags exist?

Image (img) tag

Video (video) tag

Forms in HTML

Exercise lab for input

Table (table) tag

Creating a valid HTML document

Tribute page project

HTML basics done!

CSS Introduction

CSS Hello World

CSS Tag Selector

Exercise lab for CSS selector

CSS Properties

CSS Classes

Exercise lab for CSS class

CSS IDs

Exercise lab for CSS IDs

Proper HTML document

Exercise lab for creating doctype

Exercise lab for creating head and body

Inline vs Block element

Types of stylesheets

Introduction to Flexbox Layout

flex

Exercise lab for flexbox

justify

Exercise lab for flex-direction

CSS Colors

Center a DIV

Positioning in CSS - absolute and relative

Positioning in CSS - fixed

Positioning in CSS - sticky

CSS backgrounds

Simple Google Homepage Project

Build a Tribute Page

Build a Product Landing Page

Build a Survey Form

Use display: flex to Position Two Boxes

Add Flex Superpowers to the Tweet Embed

Use the flex-direction Property to Make a Row

Apply the flex-direction Property to Create Rows in the Tweet Embed

Use the flex-direction Property to Make a Column

Apply the flex-direction Property to Create a Column in the Tweet Embed

Use the justify-content Property in the Tweet Embed

Align Elements Using the justify-content Property

Use the align-items Property in the Tweet Embed

Use the flex-wrap Property to Wrap a Row or Column

Use the flex-shrink Property to Shrink Items

Use the flex-grow Property to Expand Items

Use the flex-basis Property to Set the Initial Size of an Item

Use the flex Shorthand Property

Align Elements Using the align-items Property

Use the order Property to Rearrange Items

Use the align-self Property

Create Your First CSS Grid

Add Rows with grid-template-rows

Place Items in Grid Areas Using the grid-area Property

Limit Item Size Using the minmax Function

Use CSS Grid units to Change the Size of Columns and Rows

Create Grids within Grids

Create Flexible Layouts Using auto-fit

Divide the Grid Into an Area Template

Use Media Queries to Create Responsive Layouts

Create a Row Gap using grid-row-gap

Use grid-column to Control Spacing

Create Flexible Layouts Using auto-fill

Use grid-row to Control Spacing

Create a Column Gap Using grid-column-gap

Align an Item Horizontally using justify-self

Align an Item Vertically using align-self

Add Columns with grid-template-columns

Align All Items Vertically using align-items

Add Gaps Faster with grid-gap

Align All Items Horizontally using justify-items

Use grid-area Without Creating an Areas Template

Reduce Repetition Using the repeat Function

What is HTML5?

Meta tags in HTML

meta charset

Logical v/s Physical tags

Conditional comments

HTML entities

Form inputs

iframes in HTML

CSS Specificity

CSS Box Model

Interactive Box Model

CSS Variables

CSS calc function

CSS Pseudo selectors

Pseudo elements

'attr' property

Advanced CSS Selectors

Attribute Selectors

Responsive v/s Non Responsive Websites

Convering non-responsive website to responsive

More on converting website to responsive

More media query rules

Media print

CSS Animation basics

Maintaining final animation state

Sudden animation changes

What is JavaScript?

Text Editors

Setting up development environment

How to use JavaScript?

Variables

var/let vs const

Exercise lab for variables

Data Types

Functions

console.log and Chrome DevTools

Function Parameters

return statement

Scoping

alert/prompt/confirm

Objects

Exercise lab for objects

Arrays

if-else

Exercise lab for if-else

switch-case

Exercise lab for switch-case

Math operators

Increment Decrement

Exercise lab for increment

Exercise lab for decrement

Logical Operators

Bitwise Operators

for Loop

Exercise lab for loop

while Loop

Exercise lab while loop

do-while Loop

Exercise lab do-while

break vs continue vs return

Arrays.map

Array.filter

Array.forEach

Array.reduce

Array.indexOf, Array.includes, Array.find

== v/S ===

JS DOM

document/window Object

getElementById

More ways to traverse

setTimeout and setInterval

clearTimeout and clearInterval

Event Handlers

Error Handling

Closing Series

In this section, we will practice building small programs using JavaScript and learn about data structures. Are you excited?

Use an Array to Store a Collection of Data

Access an Array's Contents Using Bracket Notation

Add Items to an Array with push() and unshift()

Remove Items from an Array with pop() and shift()

Remove Items Using splice()

Add Items Using splice()

Copy Array Items Using slice()

Copy an Array with the Spread Operator

Combine Arrays with the Spread Operator

Check For The Presence of an Element With indexOf()

Iterate Through All an Array's Items Using For Loops

Create complex multi-dimensional arrays

Add Key-Value Pairs to JavaScript Objects

Modify an Object Nested Within an Object

Access Property Names with Bracket Notation

Use the delete Keyword to Remove Object Properties

Check if an Object has a Property

Iterate Through the Keys of an Object with a for...in Statement

Generate an Array of All Object Keys with Object.keys()

Modify an Array Stored in an Object

Telephone Number Validator

Cash Register

Full Stack Developer

Be industry-ready fullstack coder. 10x faster and 100x cheaper.

Unlike any other learning platform

Learning Path

Internet FundamentalsFree

HTML/CSS FundamentalsFree

Advanced HTML5/CSS3 Concepts

JavaScript EssentialsFree

Practice JavaScript with 10+ Projects

Advanced Practical JavaScript

Using DevTools

Version Control System

NPM and Yarn

React Fundamentals

React Query for network requestsFree

Advanced React Hooks

Advanced React Concepts

Advanced Theoretical JavaScriptFree

5 React Projects

Testing Code

Linux FundamentalsFree

Node.js FundamentalsFree

MongoDB + Node.jsFree

MongoDB + JWT + Node.jsFree

GraphQL

Caching with Redis

CI/CD

Purchase full path. Forever.