Fullstack Website Development

Robokwik's Fullstack Website Development course will provide you expertise in both frontend and backend; so, the full-stack of technology that makes up a website, some of the technologies in which you will be working include HTML, CSS, Javascript, React, Node, MongoDB and lot more.

Course Instructor: Robokwik Training

₹2999.00

Do you know?

We are India's preferred company for technology workshops and trainings at
IITs & NITs.

100+

workshops conducted at

IITs & NITs.

131060+

students enrolled.

500+

Batches already completed successfully.

11097+

students already completed their trainings in offline mode.

What will you learn?

Introduction to Internet

Internet and How it Works?

Web Browser

Browser

Static site

Dynamic site

Client and Server

Basics of Course

What is HTML ?

What is CSS ?

Why JavaScript came into the picture?

Introduction to Website Development

First Hello World Program

Showing with Live Server

Introduction to Emmet

Writing first code on Emmet

Getting start with HTML

Emmet and Speedy HTML

Parent-Child and Grouping

Tags in HTML

An Old Style Blog App (Heading, Paragraph, Formatting etc)

Inline vs Block Element

Bring in Images

Lists and Interlinking pages

Getting a video on page

Tables and its properties

Walkthrough of Forms

GET and POST Forms

Types of Input Forms

Semantics Tag

Cascading Style Sheet

What is Cascading Style Sheet?

Uses of Cascading Style Sheet

Different way to bring CSS into HTML file

Inline CSS

Internal CSS

External CSS

Properties of CSS

Priority of CSS in file

Explore and bring in fonts

Bring in colors and styles

Text and Font

Margin and padding

Border & Outline in CSS

Box-Model

Display and Max-Width

Overflow and Z-index

Gradients, Transitions and Tooltips

Types of CSS selectors

Simple selector

Combinator selector

Attribute selector

Pseudo-class & Pseudo elements selector

Animations in CSS

What are media queries?

Media query in action

Writing Media Query for different screens

Bring content in columns

Playing with different media

Layout

CSS Layout

CSS Position

Position Property

Working with Different CSS Position Property

Unit in CSS (rem, em, vh, vw, percentage)

CSS Grid

What is Grid ?

Difference between Flex and Grid

Getting started with Grid

Row and Column in Grid

Creating album with Grid

CSS Flexbox

What is Flexbox?

Power of Flexbox

Properties of Flexbox

Different Flexbox properties

Different Flex Child Property

Flex Froggy Game

JavaScript

Why JavaScript?

Explaining Runtime

What are Browser Functions?

Basics of JavaScript

Values and Datatypes

Variables and typeof

Let, var & const

Operators and conditional statements

if-else

if-else-if

Switch Case

Ternary Conditions

Loops

while loop

do while loop

for

break

continue

for of (Introduction)

for in (Introduction)

Functions

Function Declaration

Function without a parameter and return

Function returning value

Function with arguments

Function with a parameter

Function with two parameters

Function with many parameters

Function with unlimited number of parameters

Scope of variables in Functions

Working of function

Global Space and Global Scope

Lexical Scope

Objects in JavaScript

Creating an object and Manipulating values in an Object

Object methods

DOM

Visualization of DOM

How we target DOM?

Working of DOM

DOM and its Working

Methods of DOM

Color changer in DOM

Higher Order Function (HOF)

Callback

Returning function

Setting time

SetInterval

SetTimeout

Properties

For each

map

filter

reduce

every

find

sort

Set & Set Operations

Creating an empty set

Creating a set from an array

Adding an element to a set

Deleting an element from a set

Checking an element in the set

Clearing the set

Union of sets

Intersection of sets

Difference of sets

Map

Creating an empty Map

Creating a Map from an array

Adding values to the Map

Getting a value from Map

Checking the key in Map

Spread Operator

Spread or Rest Operator

Spread operator to get array elements

Spread operator to copy array

OOPs concepts

Defining classes

Class Instantiation

Class Methods

Class method

Properties with initial value

getter

setter

Inheritance

Constructors & Destructors

Class Constructor

Default values with constructor

Destructor

Destructing Arrays

Destructor during iteration

Destructor Object

Renaming during structuring

Object parameter without destructor

Object parameter with destructor

Object destructor during iteration

Prototype & Closure

Explaining Prototypes

How prototypes Work

Manipulate using Prototypes

What is Closure?

First Program in Closure

Callback

Promise

Promise Constructor

Async and Await

Fetch API

Scope / Lexical Scope / Black Scope

Threads

Single Thread

Execution Context

Call Stack

Hoisting

Error & Error Handling

Types of error

Temporal Dead Zone

Error handling

Try and Catch

Use of try-catch

Database

What is Database ?

What are types of Databases?

What is SQL Database and its Types of SQL Databases?

What is NoSQL and Types of NoSQL Databases?

Advantages and Disadvantages of SQL and NoSQL?

CAP Theorem

ACID

Sharding

What is Schema?

What is Collection?

Schema Design

Application Database Design

MySQL and MongoDB

RDBMS and all its Concept

MySQL

SQL Queries

Why and What of MongoDB

MongoDB Query

Optimization

Getting Started with NodeJS

NPM init ?

Package.json

npm = package-lock.json & yarn = yarn.lock

Path module

FS Module

OS Module

Events Module

Http Module

How to Create Server in NodeJS?

How to Handle Different URLs?

How to send Proper response?

How to Edit Response

What is Express JS

Why we use ExpressJs

Different type of NodeJS Frameworks

Writing First Hello World using Express

Basics of Routes

Default WildCard Route (*)

Serving Static Files

PORT

Rest API (Why, What and How)

Creating a Basic Server

Explaining the File Structure of Backend

Express 101

Creating a Basic Server

Explaining the File Structure of Backend

Creating Routes

Creating Controllers

Explanning Builtin Middleware

Express Connecting with Database

Importance of dotenv and how to use it.

How to Create Schema

Generating Models from Schemas

Using Model in controllers

Why we use ORM

Different type of ORM

Intro to React

Background of React

Starter Project with CDN

Create-react-app

NPM

NPM vs NPX

NPM vs Yarn

Babel

Create react app

Project Configuration

VSCode plugins / Importance and working

Prettier, ESLint, ES7 and Shortcuts

Browsers list

JSX

Why JSX?

Embedding JS expressions in JSX

if/else statements inside jsx component

Passing attributes to jsx

How is an element rendered on screen?

createRoot() & render() methods of react18

How are components created ?

Folding structure for your components

Creating Multiple Components and Rendering it

Composting components - Passing data one way

Extracting components - Getting data from props

Prop passing from grandparent to grandchild component?

Props are read-only

Prop drilling: The Problem

Hooks Intro

useState()

useEffect()

Conditional rendering

Use of if/else conditionals with useState()

Use of if/else conditionals with props

In-line if with logical && operator

Avoiding components re-rendering with conditional checks

Rendering Lists

Rendering multiple components with list

How to use .map() to render array

Optimizing lists with key arguments

Advance list handling with lazy-loading

Events

onClick event and their working

Passing function reference v/s direct calling

() => () v/vs () => {}

Passing arguments to events

Router

React router v6

Making routes protected

Handling unknown routes (404 page)

Getting current url inside component

Accessing parameters from URL

Routing user to a particular link

Forms

Form handling

Working with Formik

Saving form details to localStorage

Brief about Cookies & Session storage

Handling file upload

Context

Prop drilling: The Solution

useContext()

Hook Conclusion

Component lifecycle with useEffect()

useMemo()

useCallback()

useReducer()

State Management & Styling

Redux

Redux Toolkit - Part 1

Styling

Tailwind

Connecting Frontend + Backend

Walkthrough with FETCH and AXIOS

Proxy

Talk on URL

Creating Frontend Page - Forms

Creating Frontend Page - Read, Update, Delete

Deployment in Production

Hosting Frontend

Hosting Backend

Making Required Changes in App

Process-flow of
Fullstack Website Development Training

Register

Simply purchase this course by clicking on Buy Now.

Training

Access content and complete it within definite timeline submitting all assignments

Certification

You will get certificate of training after successful completion of this training

Fullstack Web Development FAQ

What is frontend web development?

This skillset involves the actual presentation of your website—how the information in your website is laid out in browsers and on mobile devices as well.

Everything that you actually see on a website—the layout, the positioning of text and images, colors, fonts, buttons, and so on—are all factors that the frontend developer must consider.

What is backend web development?

Creation, edit/update, and collection of data are some of the processes that are most often associated with backend development.

This means that a backend developer must be able to write code to receive the information input from the user and also save it somewhere–like in a database.

What is a Fullstack web development?

Fullstack development means expertise in both frontend and backend; so, the full-stack of technology that makes up a website. They are proficient in both frontend and backend languages and frameworks, as well as in server, network and hosting environments.

Is this course available in offline mode?

Yes, this course is also available in offline mode in our physical classroom centers in Delhi NCR-Vaishali, Lucknow, Bhubaneswar & Varanasi.