Complete Web Development Study Material
Table of Contents
1. HTML Fundamentals
2. CSS Fundamentals
3. CSS Selectors
4. CSS Box Model
5. CSS Layout & Positioning
6. Responsive Design
7. Git & Version Control
8. CSS Animations & 3D
9. Bootstrap Framework
10. Projects & Assignments
1. HTML Fundamentals
1.1 Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It
describes the structure of a web page using a series of elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
1.2 HTML Forms
Forms collect user input and send it to a server for processing.
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8">
Generated by [Link]
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select...</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="in">India</option>
</select>
<textarea name="message" rows="4" cols="50" placeholder="Your message..."></textarea>
<input type="checkbox" id="terms" name="terms">
<label for="terms">I agree to terms</label>
<button type="submit">Submit</button>
</form>
Common Input Types: text, email, password, number, tel, date, checkbox, radio, file, submit, reset
1.3 HTML5 Semantic Tags
Semantic tags give meaning to your markup, improving accessibility and SEO.
Tag Purpose
<header> Introductory content or navigation
<nav> Navigation links
<main> Main content of the document
<article> Self-contained content
<section> Thematic grouping of content
<aside> Sidebar content
<footer> Footer information
<figure> / <figcaption> Self-contained content with caption
<time> Date/time information
<mark> Highlighted text
<body>
<header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<article>
<section>
<h2>Article Title</h2>
<p>Content here...</p>
</section>
</article>
Generated by [Link]
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
2. CSS Fundamentals
2.1 Introduction to CSS
CSS (Cascading Style Sheets) controls the presentation of HTML elements.
2.2 Adding CSS to HTML (3 Methods)
Method 1: Inline CSS (Not recommended)
<p style="color: blue; font-size: 16px;">Styled text</p>
Method 2: Internal CSS (Inside <head>)
<head>
<style>
p { color: blue; }
</style>
</head>
Method 3: External CSS (Recommended)
<head>
<link rel="stylesheet" href="[Link]">
</head>
2.3 CSS Features & CSS3
CSS3 New Features:
• Border Radius: border-radius: 10px;
• Box Shadow: box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
• Text Shadow: text-shadow: 1px 1px 2px black;
• Gradients: background: linear-gradient(to right, red, blue);
• Transitions: transition: all 0.3s ease;
Generated by [Link]
• Transforms: transform: rotate(45deg);
• Animations: @keyframes rules
• Flexbox & Grid layout systems
• Media Queries for responsive design
3. CSS Selectors
3.1 Simple Selectors
Element Selector — Selects by tag name
p { color: red; }
h1 { font-size: 24px; }
ID Selector — Selects by id attribute (use #)
#header { background: black; }
#nav-menu { display: flex; }
<div id="header">...</div>
Class Selector — Selects by class attribute (use .)
.btn { padding: 10px 20px; }
.card { border: 1px solid #ddd; }
<button class="btn primary">Click</button>
<div class="card featured">...</div>
3.2 Combinator Selectors
Combinator Symbol Description Example
Descendant (space) Selects all descendants div p —all <p> inside
<div>
Child > Selects direct children only ul > li —direct <li>
children
Adjacent Sibling + Selects next sibling h2 + p —<p>
immediately after
<h2>
General Sibling ~ Selects all following siblings h2 ~ p —all <p> after
<h2>
/* Descendant */
nav a { color: white; }
/* Child */
ul > li { list-style: square; }
Generated by [Link]
/* Adjacent Sibling */
h1 + p { font-weight: bold; }
/* General Sibling */
h2 ~ p { color: gray; }
3.3 Pseudo-class Selectors
Select elements based on a certain state.
/* Link states */
a:link { color: blue; } /* Unvisited */
a:visited { color: purple; } /* Visited */
a:hover { color: red; } /* Mouse over */
a:active { color: green; } /* Being clicked */
/* Form states */
input:focus { border-color: blue; outline: none; }
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }
/* Structural */
li:first-child { font-weight: bold; }
li:last-child { color: gray; }
li:nth-child(odd) { background: #f5f5f5; }
li:nth-child(3n) { color: red; }
p:empty { display: none; }
/* Negation */
li:not(.active) { opacity: 0.7; }
3.4 Pseudo-elements Selectors
Style a specific part of an element.
/* First line of text */
p::first-line { font-weight: bold; }
/* First letter */
p::first-letter { font-size: 2em; float: left; }
/* Before & After content */
.quote::before { content: '"'; font-size: 2em; }
.quote::after { content: '"'; font-size: 2em; }
/* Selection styling */
::selection { background: yellow; color: black; }
/* Placeholder styling */
input::placeholder { color: #999; font-style: italic; }
Generated by [Link]
3.5 Attribute Selectors
Select elements based on an attribute or attribute value.
/* Has the attribute */
[type] { border: 1px solid gray; }
/* Exact value match */
[type="text"] { background: white; }
/* Contains word */
[class~="btn"] { cursor: pointer; }
/* Starts with */
[href^="https"] { color: green; }
/* Ends with */
[href$=".pdf"] { background: url([Link]); }
/* Contains substring */
[href*="google"] { color: blue; }
4. CSS Box Model
Every HTML element is a rectangular box consisting of: Content → Padding → Border → Margin
┌─────────────────────────────┐
│ Margin │ ← Outside space (transparent)
│ ┌─────────────────────┐ │
│ │ Border │ │ ← Edge of the box
│ │ ┌─────────────┐ │ │
│ │ │ Padding │ │ │ ← Inside space (background color extends here)
│ │ │ ┌─────┐ │ │ │
│ │ │ │Content│ │ │ │ ← Actual content (text, images)
│ │ │ └─────┘ │ │ │
│ │ └─────────────┘ │ │
│ └─────────────────────┘ │
└─────────────────────────────┘
Box-sizing Property
content-box (Default): Width/height applies only to content. Padding and border add to total size.
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
/* Total width = 300 + 20 + 20 + 5 + 5 = 350px */
}
border-box (Recommended): Width/height includes padding and border.
Generated by [Link]
* {
box-sizing: border-box;
}
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
/* Total width = 300px (content adjusts to fit) */
}
Display Properties
Value Behavior
block Takes full width, starts on new line (div, p, h1-h6)
inline Takes only needed width, flows with text (span, a, strong)
inline-block Inline flow but accepts width/height/margin/padding
none Removes element from layout
flex Enables flexbox layout
grid Enables grid layout
Important Rule: margin, padding, height, and width only fully work for block and inline-block
display elements. Inline elements ignore width/height and vertical margins.
5. CSS Layout & Positioning
5.1 Relative Sizes vs Absolute Sizes
Absolute Sizes (Fixed, don’t scale):
• px — Pixels
• pt — Points
• cm, mm, in — Physical units
Relative Sizes (Scale with context):
Unit Relative To Use Case
% Parent element’s dimension Fluid layouts
em Font size of the element itself Component scaling
rem Font size of root element Consistent scaling
(<html>)
vw 1% of viewport width Full-width elements
vh 1% of viewport height Full-height elements
html { font-size: 16px; }
Generated by [Link]
.parent { font-size: 20px; }
.child-em { font-size: 1.5em; } /* 30px (1.5 × 20px) */
.child-rem { font-size: 1.5rem; } /* 24px (1.5 × 16px) */
.hero { width: 100vw; height: 100vh; } /* Full viewport */
.container { width: 80%; margin: 0 auto; } /* Fluid width */
5.2 Position Attribute
.static { position: static; } /* Default - normal flow */
.relative { position: relative; top: 10px; left: 20px; } /* Offset from normal position */
.fixed { position: fixed; top: 0; right: 0; } /* Relative to viewport, stays on scroll */
.absolute { position: absolute; top: 0; left: 0; } /* Relative to nearest positioned ancestor */
.sticky { position: sticky; top: 0; } /* Sticks when scrolling past */
Key Rules:
• top, left, right, bottom only work when position is NOT static
• absolute positions relative to the nearest ancestor with position: relative/absolute/fixed/sticky
• fixed positions relative to the viewport
• sticky requires a threshold (e.g., top: 0) to activate
5.3 Z-Index
Controls the stacking order of positioned elements.
.box1 { position: absolute; z-index: 1; }
.box2 { position: absolute; z-index: 2; } /* Appears on top of box1 */
Z-Index Rules:
• Only works on positioned elements (relative, absolute, fixed, sticky)
• Higher value = closer to viewer
• Creates a new stacking context when combined with opacity, transform, or filter
• Child elements cannot escape parent’s z-index context
5.4 Flexbox
One-dimensional layout system for rows or columns.
.container {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
justify-content: center; /* flex-start | center | flex-end | space-between | space-around |
↪ space-evenly */
align-items: center; /* flex-start | center | flex-end | stretch | baseline */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
gap: 20px; /* Space between items */
}
Generated by [Link]
.item {
flex-grow: 1; /* Grow ratio */
flex-shrink: 0; /* Shrink ratio */
flex-basis: 200px; /* Base size before grow/shrink */
/* Shorthand: flex: 1 0 200px; */
align-self: flex-end; /* Override align-items for this item */
order: 2; /* Visual order (default: 0) */
}
Reference: CSS-Tricks Flexbox Guide
5.5 CSS Grid
Two-dimensional layout system for rows AND columns.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: auto 1fr auto; /* Header, content, footer */
gap: 20px;
/* Named grid areas */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
/* Item placement */
.item {
grid-column: 1 / 3; /* Span columns 1 to 3 */
grid-row: 2 / 4; /* Span rows 2 to 4 */
}
5.6 Fixed vs Fluid Layouts
Fixed Layout:
.container {
width: 960px;
margin: 0 auto;
}
/* Does not adapt to screen size */
Fluid Layout:
.container {
Generated by [Link]
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Adapts to screen width */
6. Responsive Design
6.1 Media Queries
Apply styles based on device characteristics.
/* Mobile First - Base styles for small screens */
.container {
width: 100%;
padding: 15px;
}
/* Tablet */
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
.nav { display: flex; }
}
/* Desktop */
@media screen and (min-width: 1024px) {
.container { width: 960px; }
.sidebar { display: block; }
}
/* Large Desktop */
@media screen and (min-width: 1200px) {
.container { width: 1140px; }
}
Common Breakpoints:
• Mobile: < 576px
• Tablet: 576px - 991px
• Desktop: 992px - 1199px
• Large: � 1200px
6.2 Responsive Best Practices
• Use relative units (%, rem, vw, vh)
• Set max-width: 100% on images
Generated by [Link]
• Avoid horizontal scrolling (overflow-x: hidden on body if needed)
• Test on actual devices
• Use meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7. Git & Version Control
7.1 What is Version Control?
A system that records changes to files over time, allowing you to recall specific versions later.
7.2 Repository
A storage space where your project files and their version history live.
• Local Repository: On your computer (.git folder)
• Remote Repository: On platforms like GitHub, GitLab, Bitbucket
7.3 Basic Git Commands
# Configuration (one-time setup)
git config --global [Link] "Your Name"
git config --global [Link] "your@[Link]"
# Initialize a new repository
git init
# Check status
git status
# Add files to staging area
git add [Link] # Add specific file
git add . # Add all changes
# Commit changes
git commit -m "Descriptive message about changes"
# View commit history
git log
git log --oneline # Compact view
# Connect to remote repository
git remote add origin [Link]
# Push to remote
git push -u origin main # First push
git push # Subsequent pushes
# Pull latest changes
git pull origin main
Generated by [Link]
# Create and switch branch
git branch feature-name # Create branch
git checkout feature-name # Switch to branch
# OR: git checkout -b feature-name (create + switch)
# Merge branches
git checkout main
git merge feature-name
# Discard changes
git checkout -- [Link] # Discard file changes
git reset --hard HEAD # Discard all changes
Reference: FreeCodeCamp Git Basics
8. CSS Animations & 3D
8.1 Transitions
Smooth change between property values.
.button {
background: blue;
transition: background 0.3s ease, transform 0.3s ease;
}
.button:hover {
background: red;
transform: scale(1.1);
}
/* Transition shorthand: property duration timing-function delay */
.box {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
Timing Functions:
• ease — Slow start, fast middle, slow end
• linear — Constant speed
• ease-in — Slow start
• ease-out — Slow end
• ease-in-out — Slow start and end
• cubic-bezier(x1, y1, x2, y2) — Custom curve
8.2 Transforms
Modify element appearance without affecting document flow.
Generated by [Link]
.box {
transform: translate(50px, 100px); /* Move */
transform: rotate(45deg); /* Rotate */
transform: scale(1.5); /* Scale */
transform: skew(10deg, 5deg); /* Skew */
transform: translateX(-50%) translateY(-50%); /* Centering trick */
}
8.3 Keyframes & Animations
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.element {
animation: slideIn 1s ease-out forwards;
/* animation: name duration timing-function delay iteration direction fill-mode */
}
.loader {
animation: bounce 1s ease infinite;
}
/* Multiple animations */
.animated {
animation:
slideIn 0.5s ease-out,
fadeIn 0.3s ease-in 0.5s; /* Second animation starts after 0.5s */
}
8.4 3D Cube Example
<div class="scene">
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
Generated by [Link]
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</div>
.scene {
perspective: 600px;
width: 200px;
height: 200px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotateCube 10s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
opacity: 0.8;
}
.front { transform: translateZ(100px); background: red; }
.back { transform: rotateY(180deg) translateZ(100px); background: blue; }
.right { transform: rotateY(90deg) translateZ(100px); background: green; }
.left { transform: rotateY(-90deg) translateZ(100px); background: yellow; }
.top { transform: rotateX(90deg) translateZ(100px); background: purple; }
.bottom { transform: rotateX(-90deg) translateZ(100px); background: orange; }
@keyframes rotateCube {
from { transform: rotateX(0) rotateY(0); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
8.5 [Link] Library
Pre-built animation library. [Link]
<!-- Include CDN -->
<link rel="stylesheet" href="[Link]
↪ [Link]"/>
<!-- Usage -->
<h1 class="animate__animated animate__bounce">Bouncing Text</h1>
<div class="animate__animated animate__fadeInUp animate__delay-1s">Fade In Up</div>
Generated by [Link]
9. Bootstrap Framework
9.1 Framework vs Library
Framework Library
Provides structure and guidelines Provides reusable functions/components
Inversion of control (framework calls you) You call the library
Complete solution (routing, state, UI) Specific functionality
Examples: Bootstrap, Angular, Django Examples: jQuery, React, Lodash
9.2 Bootstrap Setup
<!-- CSS -->
<link href="[Link] rel="stylesheet">
<!-- JavaScript Bundle -->
<script src="[Link]
<!-- Your custom stylesheet (MUST be AFTER Bootstrap to override) -->
<link rel="stylesheet" href="[Link]">
9.3 Bootstrap Grid System
<div class="container"> <!-- Fixed width container -->
<div class="row"> <!-- Row (display: flex) -->
<div class="col-12 col-md-6 col-lg-4">
<!-- 12 cols mobile, 6 cols tablet, 4 cols desktop -->
</div>
<div class="col-12 col-md-6 col-lg-4">...</div>
<div class="col-12 col-md-6 col-lg-4">...</div>
</div>
</div>
Grid Classes: .col, .col-1 to .col-12, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-*, .col-xxl-*
9.4 Bootstrap Components
Buttons:
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>
Generated by [Link]
Cards:
<div class="card" style="width: 18rem;">
<img src="[Link]" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Dropdown:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Modal:
<!-- Trigger -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">Content here...</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
Collapse (Accordion):
<div class="accordion" id="accordionExample">
<div class="accordion-item">
Generated by [Link]
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
↪ data-bs-parent="#accordionExample">
<div class="accordion-body">Content for item 1.</div>
</div>
</div>
</div>
Navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
10. Projects & Assignments
10.1 Resume Project Sketch
Structure:
┌─────────────────────────────────────┐
│ HEADER (Name, Title, Contact) │
├─────────────────────────────────────┤
│ SUMMARY / OBJECTIVE │
├─────────────────────────────────────┤
│ ┌─────────────┐ ┌───────────────┐ │
│ │ EXPERIENCE │ │ EDUCATION │ │
│ │ │ │ │ │
│ │ - Job 1 │ │ - Degree 1 │ │
│ │ - Job 2 │ │ - Degree 2 │ │
│ └─────────────┘ └───────────────┘ │
├─────────────────────────────────────┤
│ SKILLS (Progress bars / Tags) │
├─────────────────────────────────────┤
│ PROJECTS │
Generated by [Link]
├─────────────────────────────────────┤
│ FOOTER (Social Links) │
└─────────────────────────────────────┘
Implementation Tips:
• Use semantic HTML5 tags (<header>, <main>, <section>, <article>, <footer>)
• CSS Grid for the two-column layout (Experience + Education)
• Flexbox for skill tags and social links
• Responsive: Stack columns on mobile using media queries
10.2 Practice Checklist
• Build a personal resume page (HTML + CSS)
• Create a responsive navigation bar
• Build a product card grid using Flexbox
• Build a dashboard layout using CSS Grid
• Implement a 3D rotating cube
• Create a landing page with Bootstrap components
• Practice Git: Initialize repo, make commits, create branches, merge
• Build a form with validation styling
• Create an animated loading spinner
• Build a responsive photo gallery
Reference Websites
Website URL Purpose
W3Schools [Link] HTML/CSS/JS tutorials
CSS-Tricks (Flexbox) [Link]/ Flexbox reference
snippets/css/
a-guide-to-flexbox
CSS-Tricks (Grid) [Link]/ Grid reference
snippets/css/
complete-guide-grid
[Link] [Link] Animation library
UI Gradients [Link] Gradient inspiration
Bootstrap Docs [Link] Bootstrap documentation
FreeCodeCamp Git [Link]/ Git basics
news/learn-the-basics-
of-git-in-under-10-
minutes-da548267cc91
Stack Overflow (Z-Index) [Link]/ Z-index explained
questions/9191803/
why-does-z-index-not-
work
Generated by [Link]
Table 6 – continued
Website URL Purpose
Coding Ninjas [Link] Web development courses
Study Material compiled for Web Development Course — 2026
Generated by [Link]