Hello everyone!

My name is Venkat, and I have over 17 years of experience in the IT industry. Throughout
my career, I’ve worked with various technologies, built applications, and helped businesses
solve real-world problems using software. Today, I’m here to share my knowledge with you
and make learning web technologies easy, fun, and practical.

In this class, we’ll be exploring HTML, CSS, JavaScript, jQuery, Bootstrap, WordPress,
Canva, and Figma—the essential tools for building modern websites. Think of it as
constructing a house; we need a solid foundation (HTML), beautiful design (CSS), interactive
features (JavaScript), and efficient tools (Bootstrap, WordPress, and more).

By the end of this course, you’ll not only understand these technologies but also be able to
build real-world projects confidently. Let’s get started on this exciting journey together! 🚀

Technology Simple Explanation Detailed Explanation

The skeleton of a The basic structure of a webpage, using elements like
HTML
webpage. headings, paragraphs, and images.
Adds colors and Controls the appearance of web pages, including layouts,
CSS
styles. fonts, and responsiveness.
Makes webpages A scripting language that adds dynamic features like
JavaScript
interactive. buttons, animations, and pop-ups.
A shortcut for A fast JavaScript library that simplifies event handling,
jQuery
JavaScript. animations, and DOM manipulation.
Ready-made website A CSS framework with pre-designed components to
Bootstrap
designs. build mobile-friendly websites quickly.
A graphic design tool for creating social media posts,
Canva Design posters easily.
presentations, and marketing materials.
Design website A cloud-based UI/UX tool for designing and prototyping
Figma
layouts. websites and apps.
Build websites A content management system (CMS) used for creating
WordPress
without coding. blogs, business sites, and e-commerce stores.

 HTML (HyperText Markup Language)

HTML is the foundation of every webpage, defining its structure using elements like
headings, paragraphs, images, and links. It acts like the skeleton of a building, giving a basic
shape to the webpage. Without HTML, there would be no content on a website.

 CSS (Cascading Style Sheets)

Once the structure is ready with HTML, CSS is used to style and design the page. It adds
colors, fonts, layouts, and makes the webpage look attractive. CSS also helps in making
websites responsive so they work well on different screen sizes like mobile and desktop.
 JavaScript
After designing with CSS, JavaScript makes the webpage interactive. It adds features like
buttons, animations, pop-ups, and dynamic content updates. Without JavaScript, a webpage
would be just a static document, but with it, users can interact with the site.

 jQuery
Since JavaScript can sometimes be lengthy and complex, jQuery is used to make coding
easier. It provides shortcuts to handle events, animations, and page manipulations quickly
with less code. Developers use jQuery to simplify JavaScript tasks and make web
development faster.

 Bootstrap
Instead of writing CSS from scratch, Bootstrap provides pre-designed styles and components
like buttons, forms, and grids. It ensures that websites look professional and work well on all
devices without much effort. It uses a combination of HTML, CSS, and JavaScript.

 Canva
Before building a website, designers create attractive banners, posters, and social media posts
using Canva. It’s an easy-to-use tool for creating visuals without coding. Canva is useful for
designing marketing materials that match the website’s theme.

 Figma
For a proper website layout, Figma is used to create wireframes and UI/UX designs. It helps
designers and developers plan how the website should look before coding it. It’s a
collaborative tool where teams can work together on website and app designs.

 WordPress
If someone doesn’t want to code everything from scratch, WordPress is the best option. It
allows users to build websites easily using themes and plugins. WordPress is widely used for
blogs, business websites, and even e-commerce stores, making website creation simple.

Front-End Technologies Back-End Technologies

Node.js – JavaScript runtime for server-side
HTML – Structure of web pages.
development.
Express.js – A lightweight Node.js
CSS – Styles and layouts for web pages.
framework for building APIs.
JavaScript – Adds interactivity and dynamic Django – A Python framework for secure
behavior. web development.
jQuery – Simplifies JavaScript for animations Flask – A minimal Python framework for
and events. backend services.
Bootstrap – Pre-designed components for Ruby on Rails – A web framework for rapid
responsive design. development in Ruby.
Tailwind CSS – A utility-first CSS Spring Boot – A Java-based framework for
framework. enterprise applications.
React.js – A JavaScript library for building UI ASP.NET – A Microsoft framework for
components. building web applications.
 Front-End Technologies Back-End Technologies
Vue.js – A progressive JavaScript framework Laravel – A PHP framework for web
for UI. applications.
Angular – A TypeScript-based framework for PHP – A scripting language for server-side
single-page apps. development.
SASS/SCSS – Advanced styling for CSS with MySQL – A relational database for storing
variables and functions. structured data.
Figma – Used for designing UI/UX PostgreSQL – An advanced relational
prototypes. database.
WordPress – A CMS for building websites MongoDB – A NoSQL database for
without coding. handling large datasets.
Canva – Used for designing banners and Firebase – A backend service for
social media posts. authentication and databases.

INTERNET FUNDAMENTALS

What is internet?

Internet is a global network of interconnected computers and devices that allows people to share
information communicate, and access a vast amount content or data.

How do internet works?

Suppose if I type www.google.com, assume its server is in Singapore

DNS - domain name system/server

When you type www.google.com, first it will go to ISP, internet service provider, may ACT or JIO etc

Even if you type it in incognito mode, it will pass through the Internet Gateway.

So the fist it will connect to the ISP, it checks the location, suppose it is Hyderabad, is Hyderabad is
ok to open google.com, did he pay the money then it will allow me and my request goes to Domain
name system.

What is DNS, example, in our mobile contact will be there, we don't require to remember peoples
mobile numbers.

If you know his name, it will come out easily.

In the same way every website has an IP (Internet protocol) address, so if you type google.com, it is
there in a server that server is there in some location. Server in the sense, wherever the website is
hosted. It may be in Switzerland or in Delhi or Mumbai.

It’s difficult to remember IP addresses, so people give name to these ip addresses.

ex: 192.16.0.25 this is IP V4

try it in browser, type some website name like www.venkateshhhhhhh.com, you will get error page

DNS_Probe_finished_nxdomain

Dns is not giving any result.

if name exist, site will be opened.

client server architecture

client side, www.google.com it goes to ISP, it receives domain and location, from isp to dns.it like a

dictionary. domains with ip addreses.

1. What is a website?

A website is a collection of web pages

if you take amazon.com -- about page will be there, contact us page will be there, electronics page

toys page will be there, etc. all these pages collectively called as a website.

example suppose book contains page, all pages collectively called as a book.

Websites are used to represent information, brand of a business or collect data from users.

Web Concept & Building Construction Comparison

Web
Building Construction Comparison Example
Concept
Domain The entire city where buildings The internet as a whole, where many
Space (websites) exist. domains (websites) are hosted.
Domain www.example.com is like a home address
The address of a specific building.
Name people use to find a website.
A room inside the building with its blog.example.com is a subdomain for a
Subdomain
own purpose. blog section of a website.
192.168.1.1 is a unique numerical address
IP Address The GPS coordinates of the building.
that identifies a website.
 Web
Building Construction Comparison Example
Concept
Port The door number that allows entry Port 80 (HTTP) or 443 (HTTPS) directs web
Number into a specific room. traffic to the right service.
The framework of the building (walls, Defines the structure of a webpage, like
HTML
roof, foundation). headings, images, and text.
The paint and interior design that Controls colors, fonts, layouts, and
CSS
makes the building look good. responsiveness of a webpage.
The electricity, elevators, and Adds interactivity, like buttons, animations,
JavaScript
automation inside the building. and dynamic updates.

Example: A Hotel Website Comparison

 Domain Name: www.luxuryhotel.com (The hotel’s main address).

 Subdomain: booking.luxuryhotel.com (A separate booking system inside the
hotel).
 IP Address: 203.45.67.89 (The actual location of the website on the internet).
 Port Number: 443 (The entrance to access the website securely via HTTPS).
 HTML: Defines the hotel structure (e.g., reception, rooms, dining area).
 CSS: Decorates the hotel (e.g., colors, wallpapers, furniture).
 JavaScript: Automates hotel services (e.g., elevator system, room keycards).

Understanding Web Technologies with a Building Construction Example 🏗🏢

Let's compare web technologies to constructing a building to make things easier to understand!

Explanation
Explanation
(Web
Concept (Building Example
Technologies
Example 🏠)
💻)

A large city
The internet's
with different
naming system
areas where
Domain Space that holds .com, .org, .net are domain spaces.
buildings can
multiple
be
domain names.
constructed.

The unique
A specific
name of a
building’s
Domain Name website that www.google.com, www.istepexcel.com
address in the
helps users find
city.
it.

Subdomain A separate A part of a blog.example.com, store.example.com

section or domain that
 Explanation
Explanation
(Web
Concept (Building Example
Technologies
Example 🏠)
💻)

floor of a creates a
building. separate
section for
different
functions.

A unique
numerical
The exact GPS address that
192.168.1.1 (local IP), 8.8.8.8 (Google's public
IP Address coordinates of identifies a
IP)
a building. website's
location on the
internet.

Different A number that

doors to enter specifies which
a building service or
Port Number 80 (HTTP), 443 (HTTPS), 3306 (MySQL)
(one for application to
residents, one access on a
for deliveries). server.

The skeleton of
The a website that
foundation defines its
HTML and structure structure using
<h1>, <p>, <img>
(Structure) of a building elements like
(walls, rooms, headings,
windows). paragraphs,
and images.

The paint, Adds colors,

wallpapers, fonts, layouts,
CSS (Design & and and styles to background-color: blue;, font-size:
Styling) decorations make the 16px;
inside the website look
building. attractive.

Adds
Electrical interactivity
JavaScript wiring and and dynamic document.getElementById("btn").onclick
(Functionality) appliances behavior to the = function() { alert("Hello!"); };
that bring life website, such
to the house as pop-ups,
animations,
 Explanation
Explanation
(Web
Concept (Building Example
Technologies
Example 🏠)
💻)

(lights, fans, and form

smart locks). validation.

A JavaScript
A remote library that
control to simplifies
jQuery (Easy operate lights, coding for $("#btn").click(function(){
Controls) fans, and handling alert("Clicked!"); });
appliances animations,
quickly. events, and
effects.

A framework
A construction
with pre-
company
designed
Bootstrap providing
buttons, grids, <button class="btn btn-primary">Click
(Pre-designed ready-made
and navigation Me</button>
Components) doors,
bars to speed
windows, and
up web
furniture.
development.

A professional A tool for

artist who creating social
Canva designs the media graphics,
(Graphic interiors banners, and Creating a website banner for promotions.
Design) (paintings, marketing
posters, materials
decorations). without coding.

A blueprint A tool used to

that architects design website
Figma
design before layouts and Designing a website prototype before
(Blueprints &
actual user interfaces development.
UI Design)
construction before coding
starts. begins.

A ready-made A CMS that

house where allows users to
WordPress
you only need build websites Creating a blog or e-commerce store without
(Pre-built
to customize without coding, writing code.
House)
furniture and using themes
paint. and plugins.
What is the use of HTML, CSS & JS?

HTML was developed by Tim Berners Lee(in 1990 at world wide web consortiu) w3c.

To develop websites, this is basic fact,

HTML: HTML stands for Hypertext Markup Language.

Hyper means more beyond the normal, more active

Markup in html is the use of tags to define the structure and content of a webpage.

The browser renders the page according to the html code, including headings,

Paragraph, links, images, and other elements.

Bootstrap is frontend framework

Text Editors

Notepad++
Editplus
VS Code/ Visual Studio Code (code assistance)
Dreamweaver
Sublime
Bluefish
etc.

Difference Between Static Page and Dynamic Page

Feature Static Page Dynamic Page

A webpage that displays fixed content A webpage that changes content

Definition and does not change unless manually dynamically based on user interaction or
updated. database updates.

Uses HTML, CSS, JavaScript along with

Technology
HTML, CSS, and sometimes JavaScript. server-side languages like PHP, Node.js, or
Used
Python.

Fetches data from a database and updates

Data Source No database; content is hardcoded.
in real-time.
 Feature Static Page Dynamic Page

User Limited or no interactivity (e.g., simple Interactive elements like forms, search
Interaction text and images). features, and user authentication.

Loading Loads faster because there is no Slightly slower due to backend

Speed backend processing. communication and processing.

A company’s About Us page that A shopping cart page that updates based on
Example
remains the same for all visitors. user selections.

Examples

Static Page Example:

 Portfolio Website (index.html)

 Landing Pages
 Company Contact Page

Dynamic Page Example:

 E-commerce Websites (Amazon, Flipkart)

 Social Media Platforms (Facebook, Instagram)
 Online Banking Portals

Key Takeaway:

 Static pages are simple, fast, and best for small websites.
 Dynamic pages offer interactivity, real-time updates, and require backend processing.

Difference Between <body> Tag and Empty Tags in HTML

Feature <body> Tag Empty Tags

The <body> tag contains all the visible Empty tags are self-closing tags that do
Definition content of a webpage, like text, images, and not have closing tags or content inside
links. them.
Has both an opening (<body>) and closing Only an opening tag; no separate closing
Structure
(</body>) tag. tag.
Does not hold any content; used for
Can contain multiple elements like headings,
Content elements like images, line breaks, or
paragraphs, images, links, etc.
metadata.
 Feature <body> Tag Empty Tags
Example ```html
<html> <head> <title>My Page</title> </head> <body> <h1>Welcome to My Website</h1>
<p>This is a paragraph.</p> </body> </html> ``` | ```html <img src="image.jpg"
alt="Example Image"> <br> <hr> <input type="text"> ``` | | **Common Empty Tags** | Not
an empty tag. | `<img>`, `<br>`, `<hr>`, `<input>`, `<meta>`, `<link>`. |

Key Takeaway

 The <body> tag holds the main content of the page.

 Empty tags do not have a closing tag and are used for specific standalone functions
like inserting an image (<img>) or adding a line break (<br>).

Difference Between Attributes with Values and Attributes Without Values in

HTML

Type Explanation Example

An attribute that has a

specific value assigned to <a href="https://www.example.com">Click
Attribute
it. These are used to define Here</a> (Here, href has the value
with Value
properties like color, size, "https://www.example.com").
or URL.

A boolean attribute that

works just by being
Attribute <input type="checkbox" checked> (Here, checked
present, without needing a
Without is present, meaning the checkbox will be selected by
value. If the attribute is
Value default).
present, it applies its
effect.

More Examples

1. Attribute with Value:

html
CopyEdit
<img src="image.jpg" alt="Example Image">
<input type="text" placeholder="Enter your name">
<button disabled="disabled">Submit</button>

 Here, src, alt, type, placeholder, and disabled have specific values.

2. Attribute Without Value (Boolean Attributes):

html
CopyEdit
<input type="checkbox" checked>
<input type="text" readonly>
<button disabled>Submit</button>

 Here, checked, readonly, and disabled work without values. Their presence alone is
enough to apply their effect.

Key Takeaway:

 Attributes with values define specific settings (href="url", type="text").

 Attributes without values (boolean attributes) only need to be present (checked,
disabled).

HTML Tags:

1. Basic tags
2. Formatting tags
3. List Tags
4. Link Tags
5. Images & Graphics Tags
6. Audio & Video Tags
7. Table Tags
8. Form Tags
9. Frame Tags
10. Semantic & Non Semantic Tags
11. Meta Tags
12. Programming Tags

Attributes of <body> tag:

1. bgcolor="..."=> It is used to specify the background color.

2. text="..."=> It is used to specify the text color.

3. background="..."=> It is used to specify the background image path

4. leftmargin="..."=> It is used to specify the left margin in pixel.

5. topmargin="..."+> It is used to specify the toop margin in pixels.

6. title="..."==> it is used to specify the tool tip text.

Formatting tags:

======================

1.) <h1>...</h1>=> It is used to define level1 heading text

2.) <h2>...</h2>=> It is used to define level2 heading text

3.) <h3>...</h3>=> It is used to define level3 heading text

4.) <h4>...</h4>=> It is used to define level4 heading text

5.) <h5>...</h5>=> It is used to define level5 heading text

6.) <h6>...</h6>=> It is used to define level6 heading text

these are predefined tags, h7 we can not give.

Attributes of <h1> to <h6> tags

===================================

1. align="left/right/center"=> It is used to specify the alignment.

default is left.

2. title="..."=>It is used to specify the tool tip text.

3.

===========================================

<html>

<body bgcolor="green" text="yellow" leftmargin="100px" topmargin="50" title="This is my first web

page">

</body>

</html>

============================================

<html>

<body background="C:/flowers.jfif>

Welcome to HTML

</body>

</html>

===========================================

<html>

<body>

<h1 title="Level1 heading" align="ceter">Hyper text markup language</h1>

<h2 align="left">Hyper text markup language</h2>

<h3 align="right">Hyper text markup language</h3>

<h4>Hyper text markup language</h4>

<h5 align="right">Hyper text markup language</h4>

<h6 align="right">Hyper text markup language</h4>

</body>

<html>

============================================

Domain/Subdomain

--------------------

A domain is the primary, unique address of a website (e.g., example.com), while a subdomain is a
section or extension of that domain, used to organize content or separate functions (e.g.,
blog.example.com).

Here's a more detailed explanation:

Domain:

The main address for a website, like google.com or facebook.com.

It's the core identifier that users type into their browser to access a website.

Think of it as the "root" of a website's address structure.

Subdomain:

An extension or subdivision of a domain, used to create separate sections or websites within the
main domain.

For example, shop.example.com or support.example.com are subdomains of example.com.

Subdomains can be used for different purposes, such as hosting a blog, an online store, or a specific
application, all under the same domain.

Subdomains help organize content and improve website navigation by creating distinct URLs for
different sections.
Subdomains function as a separate website from its domain.

In essence:

The domain is the main address, and the subdomain is a part or extension of that address.

You can have multiple subdomains under one domain.

Subdomains are used to create separate sections or websites within a larger website structure.

What is the use of website

Why do we need website

Sharing information

Expanding business through online

Advertise

Marketing

Companies maintains websites for their business

so that people will interact

Why client pays money for building their websites

to expand their business.

ex: pizzashop

Website should make the business.

Websites are the brand representation of a business

you might think most of the websites are free, but they are not,

WhatsApp,instagram, facebook etc

they are earning crores of money, every webiste will make the business based on their users reach
Here we learnt only whey we join here, what we are going to learn and what we are going to buid
using html

css & javasript and our goal. you can build your own websites using web technologies.

People usually build websites to solve a problem, exmple swiggy,zomoto for delivering the food to
the customers

Night cravings

In real time we have to resolve the problem technically.

SO problem solving.

My manager told me to create Authentication - login page

we have to create register form

one guy say we will generate password automaticall

oneguy say we will suse mobile otp

and email password

here we are no writing code to solve the issue

you are not here to writing code

Suppose students they check emails irregularly than WhatsApp

earlier email was good, now whatsapp became famous

but the problem is now if he is a job seeker whenever interviewer sends an email to him,

because of his irregular activity of checking email, sometimes he may miss he opportunities.

So whats the solution

-->Setting alarms for email checking - irritates people

-->notification to WhatsApp

--> only job notification

-->calender remainder

-->make gmail interactive

-->auto generated call

here make gmail interactive is an innovative idea, how it works, support I have a website

where it checks you gmail and gives a notification like WhatsApp.it is good.

Why do we need to do that, is it free, no its not free, they will earn from advertisements.

Here the thing people they work on java, .Net or Python they work on their technologies only,

they don't work on other, but here in web development, they work on all the types of projects

if people asks business website , they built it, if they want a news website, whey will build it.

this is the thing we are going to learn why we are learning HTML

2. I have a pet dog and every time im leaving the town, my pet will be alone, I can't take my pet with
me since travel don't allow.

--> lie kind garden, make pet garden

--> petsheltor

--> rent a pet

--> give pet to pet carer

--> giving it to the qualified veterinary people

-->

Get an idea, find a solution and build the application and serve the people and generate income.

An e-commerce website

we can't build a big website like Amazon

COURSE Curriculum:

HTML, CS, JS(Basic frontend)

Introduction of web

UI & UX (figma)

HTML basics

HTML advanced

CSS basics

CSS advanced

Bootstrap

Git & GitHub

JavaScript basics

JavaScript Advanced

Jquery

Main project: ecommerce

frontend technologies

backend technologies

Practice is mandatory.

VPN

=====
A VPN or Virtual Private Network is a secure connection between a device and a network over the
internet. It encrypts data and masks a user's IP address to protect their privacy and security.

How it works

. A VPN creates a secure tunnel between a user's device and a remote server owned by a VP
provider

. The VPN server encrypts the user's data and redirects their IP address through the server

. This makes it difficult for third parties to se what websites the user visits or what data they send
and receive.

Benefits of a VPN

--------------------

VPNs protect sensitive data from unauthorized viewing or interception

VPNs can help users avoid website blocks and firewalls

VPNs can help users access geo-restricted content

VPNs can help users ensure safe browsing on public Wi-Fi

when i type www.twitter.com, www.x.com, or google.com

it checks the region/location, ISP is like a gate, it will go to DNS.

So in DNS it traces the IP address of the particular domain then it will go the particular server.

It will give html/css/js of the page of google.

In HTML comments can be used for user readability within

<!-- and -->

comments are for understanding the work done by developers to whom ever works on it
Client server architecture

IP Address

Port Number

domain

subdomain

HTMLCssJavaScript @ 11:00 AM IST By Mr Mansani

Day-1 https://youtu.be/arJqd5u5GAg

Day-2 https://youtu.be/qnc_6-tM-js

Day-3 https://youtu.be/MOg4Xi0D2qI

Day-4 https://youtu.be/RwAksR16tqU

Day-5 https://youtu.be/DrPdBoIGu3k

Extensions

-------------

extensions wont work in incognito mode

COLORZILLA
Awesome screen recorder

Checkbot seo, web..

Hunter - Email finder

React Dvelper tools

SetupVPN- Lifetime free

Siilar sites - Discover

Gofullpage - full page

wappalyzer - technology

Volume Master

Builtwith technology

daily.dev\The home

Turbo VPN - Secure free

usually ISP finds our location but VPN tells this request is from Japan not form Hyderabad.

here the problem is DNS also thinks it is from Japan only, the it goes to the nearest server.

For goole.com, so many servers, so many DNS are there.

only drawback of VPN is it slows down the speed .

most of the vpns are fraud.

This is called client server model/architecture.

Client request the server and server give the response to the request

don't click the url you get

URL DECODER/ENCODER

meyerweb.com/eric/tools/decoder/

it tells what is there in the website

url shortener
url revealer check it.

Every element in HTML will have attributes, they are like properties of that element.

Every attribute will have a value.

How to download and install vs code

what is a tag

what is an element

how to write first hmtl

what is indentation

what is comment and attribute.

prettier

liveserver mandatory.

material icon theme in VS code.

Netlify to build websites and Apps .

daily.dev

Tor browser - google it.

url shortner using in javascript.

Naver.com - coreans use it like google.com

The Open Systems Interconnection (OSI) model is a conceptual framework, developed by the
International Standards Organization (ISO), that divides network communication into seven layers to
standardize and facilitate interoperability between different computer systems and networks.

The Open Systems Interconnection (OSI) model, a conceptual framework for network
communication, defines 7 distinct layers.

Here's a breakdown of those layers:

Physical Layer:

Deals with the physical transmission of data (e.g., cables, connectors, signals).

Data Link Layer:

Focuses on node-to-node data transfer and error detection (e.g., Ethernet, MAC addresses).

Network Layer:

Responsible for routing data packets across networks (e.g., IP addresses, routers).

Transport Layer:

Ensures reliable and ordered data delivery between applications (e.g., TCP, UDP, port numbers).

Session Layer:

Manages connections and communication sessions between applications (e.g., establishing,

maintaining, and terminating sessions).

Presentation Layer:

Handles data formatting, encryption, and decryption (e.g., ASCII, encryption protocols).

Application Layer:

Provides network services to applications (e.g., HTTP, FTP, email protocols).

WWW stands for World Wide Web. It's a system that lets users access documents and other
resources on the internet. It's also known as the web.

How does WWW work?

Users can access web resources using Uniform Resource Locators (URLs).

Hyperlinks connect web resources together.

Web pages are formatted in Hypertext Markup Language (HTML).

HTML supports text, images, videos, audio, and scripts.

HTML also supports embedded URLs (hyperlinks).

The Hypertext Transfer Protocol (HTTP) transfers data from the web across the internet.

History of WWW

Tim Berners Lee and Robert Cailliau invented the World Wide Web in 1989.

The first web browser was written while Berners Lee was researching at CERN in Switzerland.

The general public was able to access the web browser in January 1991.

Difference between WWW and the internet

The internet is the global network of interconnected computers and devices. The World Wide Web is
a collection of information resources.