dots bg

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

dots bg

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

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

1

Register

Simply purchase this course by clicking on Buy Now.

2

Training

Access content and complete it within definite timeline submitting all assignments

3

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.