■ Web Development

Training Program
Professional Trainer Notes & Study Material

6-Hour 3 Modules Beginner → Interview

Workshop Covered Intermediate Ready

Topics Covered in This Manual

Module 1 Introduction to Web Development

Module 2 Git & GitHub — Version Control Mastery

Module 3 HTML5 Fundamentals & Best Practices

Prepared: February 2026 | Duration: 6 Hours | Level: Beginner–Intermediate

■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Table of Contents

1. Introduction to Web Development

➤ 1.1 How the Web Works
➤ 1.2 Client-Server Architecture
➤ 1.3 Web Technologies Overview
➤ 1.4 Browsers & Developer Tools
➤ 1.5 Career Paths in Web Development
➤ 1.6 Practice Questions & Interview Notes

2. Git & GitHub — Version Control

➤ 2.1 What is Version Control?
➤ 2.2 Installing & Configuring Git
➤ 2.3 Core Git Commands
➤ 2.4 Branching & Merging
➤ 2.5 Working with GitHub
➤ 2.6 Git Workflows
➤ 2.7 Practice Questions & Interview Notes

3. HTML5 Fundamentals
➤ 3.1 HTML Document Structure
➤ 3.2 Semantic HTML5 Elements
➤ 3.3 Forms & Input Types
➤ 3.4 Media Elements
➤ 3.5 Accessibility (a11y)
➤ 3.6 HTML5 APIs Overview
➤ 3.7 Practice Questions & Interview Notes

4. Assignments & Projects

5. Quick Reference Cheat Sheets

6. Resources & Further Reading

© 2024 Training Material — Confidential & For Trainer Use Only Page 2
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Introduction to Web Development

01
How the Web Works, Technologies & Career Paths

■ TRAINER NOTE
Estimated Time: 90 Minutes | Teaching Style: Conceptual + Live Demo
Open Browser DevTools during this session. Ask students: 'What happens when you type a URL?'

1.1 How the Web Works

The World Wide Web is a system of interlinked hypertext documents accessed via the Internet. When a user
types a URL into a browser, a complex chain of events occurs behind the scenes to deliver the webpage.
Understanding this flow is fundamental for every web developer.

DNS Resolution & HTTP Request Flow

User types: [Link]

|
v
[DNS Lookup] ■■> Resolves domain to IP (e.g. [Link])
|
v
[TCP Handshake] ■■> Client <■■> Server establish connection
|
v
[HTTP Request] ■■> GET / HTTP/1.1 Host: [Link]
|
v
[Server Response] ■■> HTTP/1.1 200 OK + HTML content
|
v
[Browser Renders] ■■> Parses HTML → CSS → JS → Paints pixels

Key Concepts:
• URL (Uniform Resource Locator): The address used to access a resource on the web. Composed of:
protocol://domain:port/path?query#fragment
• DNS (Domain Name System): Translates human-readable domain names into IP addresses. Think of it as the
internet's phone book.
• HTTP/HTTPS: HyperText Transfer Protocol — the communication protocol. HTTPS adds TLS encryption for
security.
• IP Address: A numerical label assigned to each device (e.g., [Link] for IPv4).
• Port: A communication endpoint. HTTP defaults to 80, HTTPS to 443.

1.2 Client-Server Architecture

© 2024 Training Material — Confidential & For Trainer Use Only Page 3
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

The web operates on a client-server model. The client (usually a web browser) sends requests, and the server
responds with the requested resources.

Client ↔ Server Architecture

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ CLIENT (Browser) SERVER ■
■ ■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■ ■
■ Chrome / Firefox Apache / Nginx / [Link] ■
■ Safari / Edge Express / Django / Rails ■
■ ■
■ Request ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■> ■
■ GET /[Link] HTTP/1.1 ■
■ ■
■ <■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■
■ Response 200 OK + HTML / JSON / CSS / JS ■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

HTTP Methods (REST Verbs):

Method Purpose Example Use Case

GET Retrieve data from the server Fetching a webpage, API data

POST Send data to create a resource Submitting a login form

PUT Update/replace an existing resource Editing a user profile

PATCH Partially update a resource Changing just the email field

DELETE Remove a resource Deleting a post or account

HTTP Status Codes (Must Know):

Status Code Meaning Category

200 OK Request succeeded 2xx — Success

201 Created Resource successfully created 2xx — Success

301 Moved Permanent redirect 3xx — Redirection

400 Bad Request Client sent malformed request 4xx — Client Error

401 Unauthorized Authentication required 4xx — Client Error

403 Forbidden Access denied 4xx — Client Error

404 Not Found Resource doesn't exist 4xx — Client Error

500 Internal Server Error Server crashed or misconfigured 5xx — Server Error

1.3 Web Technologies Overview

Modern web development involves three core front-end technologies and a broad ecosystem of back-end tools.

© 2024 Training Material — Confidential & For Trainer Use Only Page 4
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

The Three Pillars of the Web

HTML (Structure) CSS (Presentation) JavaScript (Behaviour)

■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■
Defines content Controls visual design Adds interactivity
Headings, paragraphs Colors, fonts, layout Click handlers, forms
Links, images, forms Animations, transitions AJAX, DOM manipulation

Analogy: HTML = Skeleton | CSS = Skin & Clothes | JS = Muscles & Brain

Frontend vs Backend vs Full Stack:

Layer Technologies Responsibilities

Frontend HTML, CSS, JavaScript, React, Vue, Angular User interfaces, visual design

Backend [Link], Python, PHP, Java, Ruby, Go Business logic, databases, APIs

Database MySQL, PostgreSQL, MongoDB, Redis Data storage & retrieval

DevOps Docker, Kubernetes, AWS, CI/CD Deployment, scaling, automation

1.4 Browser Developer Tools

DevTools are built into every modern browser and are the developer's primary debugging environment. Press
F12 or Cmd+Option+I (Mac) to open.

• Elements Panel: Inspect and live-edit HTML/CSS of any webpage.

• Console Panel: Run JavaScript, view errors and logs.
• Network Panel: Monitor all HTTP requests, response headers, and load times.
• Sources Panel: Debug JavaScript with breakpoints.
• Application Panel: Inspect localStorage, sessionStorage, cookies, service workers.
• Lighthouse: Automated audit for Performance, SEO, Accessibility.

1.5 Career Paths in Web Development

Role Key Skills Salary Range Demand

Frontend Dev React, CSS, UX ■4–15 LPA High

Backend Dev Node/Python/Java, DB ■5–20 LPA High

Full Stack Dev Both Frontend + Backend ■6–25 LPA Very High

UI/UX Designer Figma, Adobe XD ■3–12 LPA Medium

DevOps Engineer Docker, AWS, CI/CD ■8–30 LPA Very High

1.6 Practice Questions — Module 1

© 2024 Training Material — Confidential & For Trainer Use Only Page 5
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Q1. What happens step-by-step when you type '[Link] and press Enter?
■ DNS lookup → TCP handshake → TLS/SSL handshake → HTTP GET request → Server response → Browser
renders HTML

Q2. What is the difference between HTTP and HTTPS?

■ HTTPS = HTTP + TLS encryption. HTTPS secures data in transit using SSL/TLS certificates preventing
eavesdropping.

Q3. Name and explain the three core technologies of web development.
■ HTML (structure/content), CSS (presentation/styling), JavaScript (behaviour/interactivity)

Q4. What does a 404 status code mean? What about 500?
■ 404 = Resource Not Found (client error). 500 = Internal Server Error (server-side problem)

Q5. What is the difference between frontend and backend development?

■ Frontend = what the user sees (browser-side). Backend = server logic, databases, APIs (server-side).

■ INTERVIEW CORNER — Module 1

• Explain REST vs SOAP
• What is a CDN and why is it used?
• Difference between HTTP/1.1 and HTTP/2
• What is CORS? How do you fix a CORS error?
• What is a cookie vs localStorage vs sessionStorage?

© 2024 Training Material — Confidential & For Trainer Use Only Page 6
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Git & GitHub — Version Control

02
Installation, Core Commands, Branching, Workflows

■ TRAINER NOTE
Estimated Time: 2 Hours | Teaching Style: Hands-On Terminal Practice
Give students a Git cheat sheet. Do a live demo: init → commit → push → pull request.

2.1 What is Version Control?

Version control is a system that records changes to files over time so you can recall specific versions later. Git is
a distributed version control system (DVCS) created by Linus Torvalds in 2005 for Linux kernel development.

Without VCS vs With Git

WITHOUT VCS WITH GIT

■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
project_v1.zip git commit -m 'Initial setup'
project_v2_final.zip git commit -m 'Add login page'
project_v2_final_REAL.zip git commit -m 'Fix auth bug'
project_PLEASE_USE_THIS.zip git branch feature/payment
project_OMG_FINAL.zip git merge feature/payment
■ No history, collaboration ■ Full history, teamwork, backup

Git vs GitHub:
• Git: A free, open-source distributed version control tool installed on your local machine.
• GitHub: A cloud-based hosting service for Git repositories. Also provides collaboration tools like Pull Requests,
Issues, Actions, etc.
• Alternatives to GitHub: GitLab, Bitbucket, Azure DevOps

2.2 Installing & Configuring Git

© 2024 Training Material — Confidential & For Trainer Use Only Page 7
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Bash / Terminal

# ----- INSTALLATION -----

# Windows: Download from [Link]
# macOS:
brew install git

# Ubuntu/Debian:
sudo apt update && sudo apt install git

# ----- INITIAL CONFIGURATION (One-time setup) -----

git config --global [Link] 'Your Full Name'
git config --global [Link] 'you@[Link]'
git config --global [Link] 'code --wait' # Use VS Code as editor
git config --global [Link] main # Set default branch name

# Verify configuration
git config --list

2.3 Core Git Commands

Git Lifecycle — Three Stages:

Git Three-Stage Architecture

Working Directory Staging Area (Index) Repository (.git)

■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■
Your local files Files ready to commit Committed snapshots
(Untracked / Modified) (git add adds here) (git commit saves here)

[Edit [Link]] ■■■ git add [Link] ■■> [Staged] ■■■ git commit ■■> [Committed]

git status shows which stage each file is in

git diff shows changes in Working Dir vs Staging Area
git diff --staged shows changes in Staging vs last commit

Essential Commands Reference:

© 2024 Training Material — Confidential & For Trainer Use Only Page 8
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Bash — Core Git Commands

# ■■ REPOSITORY SETUP ■■
git init # Initialize a new Git repo in current folder
git clone <url> # Clone a remote repository locally
git clone <url> my-folder # Clone into specific folder name

# ■■ STAGING & COMMITTING ■■

git status # Check state of working directory
git add [Link] # Stage a specific file
git add . # Stage ALL changed files
git add -p # Interactively stage chunks (advanced)
git commit -m 'message' # Commit staged files with message
git commit -am 'message' # Stage tracked files + commit in one step
git commit --amend # Modify the last commit (message or files)

# ■■ VIEWING HISTORY ■■
git log # Full commit history
git log --oneline # Compact one-line per commit
git log --oneline --graph # Visual branch graph
git log -5 # Last 5 commits only
git show <commit-hash> # Show details of a specific commit
git diff # Unstaged changes
git diff --staged # Staged changes

# ■■ UNDOING CHANGES ■■
git restore [Link] # Discard working dir changes (new syntax)
git restore --staged file # Unstage a file (keep changes)
git revert <hash> # Create new commit that undoes a commit
git reset --soft HEAD~1 # Undo last commit, keep changes staged
git reset --mixed HEAD~1 # Undo last commit, keep changes unstaged
git reset --hard HEAD~1 # ■ Undo last commit AND discard changes
git stash # Temporarily save uncommitted changes
git stash pop # Restore stashed changes

2.4 Branching & Merging

Branches allow parallel development without affecting the main codebase. Always work on a feature branch and
merge back when complete.

Git Branching Workflow

main ■■●■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■●■■ (merge) ■■●

\ /
●■■●■■● feature/login ■■●■■●

● = commit Each branch is an independent line of development.

HEAD points to the current branch tip.

Common branches: main/master | develop | feature/* | hotfix/*

© 2024 Training Material — Confidential & For Trainer Use Only Page 9
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Bash — Branching & Merging

# ■■ BRANCH OPERATIONS ■■
git branch # List all local branches
git branch -a # List all branches (local + remote)
git branch feature/login # Create a new branch
git checkout feature/login # Switch to branch (old syntax)
git switch feature/login # Switch to branch (new syntax)
git switch -c feature/signup # Create AND switch (shortcut)
git branch -d feature/login # Delete branch (safe — merged only)
git branch -D feature/login # Force delete branch

# ■■ MERGING ■■
git switch main
git merge feature/login # Merge feature into main

# ■■ RESOLVING MERGE CONFLICTS ■■

# Git marks conflicts like this in the file:
# <<<<<<< HEAD (your changes)
# ======= (separator)
# >>>>>>> feature/login (incoming changes)
# Edit the file to resolve, then:
git add [Link]
git commit

# ■■ REBASING (advanced) ■■
git rebase main # Reapply commits on top of main
git rebase -i HEAD~3 # Interactive rebase last 3 commits

2.5 Working with GitHub

© 2024 Training Material — Confidential & For Trainer Use Only Page 10
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Bash — GitHub Remote Operations

# ■■ REMOTE OPERATIONS ■■
git remote -v # View remote connections
git remote add origin <url> # Add a remote named 'origin'
git push origin main # Push local main to GitHub
git push -u origin main # Push + set upstream (first time)
git pull origin main # Fetch + merge from GitHub
git fetch origin # Download changes without merging

# ■■ SSH SETUP FOR GITHUB ■■

ssh-keygen -t ed25519 -C 'your@[Link]'
# Copy the public key:
cat ~/.ssh/id_ed25519.pub
# Paste it in: GitHub → Settings → SSH Keys → New SSH Key
# Test connection:
ssh -T git@[Link]

# ■■ PULL REQUEST WORKFLOW ■■

git switch -c feature/new-navbar
# ... make changes ...
git add . && git commit -m 'feat: add responsive navbar'
git push origin feature/new-navbar
# Then create a Pull Request on [Link]

2.6 Git Workflows

GitFlow — Enterprise Workflow

main (production) ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■>

↑ release tag
release/v1.0 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■> merged to main
↑ merged when stable
develop ■■●■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■>
\ ↑ feature merged to develop
feature/login ■■■■●■■●■■●■■●■■■■■■■■■●

Hotfix branches come off main directly for emergency production fixes.

The .gitignore File:

© 2024 Training Material — Confidential & For Trainer Use Only Page 11
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

.gitignore

# .gitignore — Tell Git what NOT to track

# Dependencies
node_modules/
vendor/

# Build output
dist/
build/
*.[Link]

# Environment variables (NEVER commit secrets!)

.env
.[Link]
.[Link]

# OS files
.DS_Store
[Link]

# IDE files
.vscode/
.idea/
*.swp

# Logs
*.log
logs/

2.7 Practice Questions — Module 2

Q1. What is the difference between git fetch and git pull?
■ git fetch downloads changes but doesn't merge. git pull = git fetch + git merge automatically.

Q2. You accidentally committed to main. How do you move it to a new branch?
■ git branch feature/fix, git reset --hard HEAD~1 (on main), git switch feature/fix

Q3. What is a merge conflict and how do you resolve it?

■ When two branches edit the same line differently. Resolve by editing the file, removing conflict markers, then git add +
git commit.

Q4. What is the difference between git reset and git revert?
■ reset rewrites history (dangerous on shared branches). revert creates a new undo-commit (safe for teams).

Q5. Explain the Git staging area (index). Why is it useful?

■ It lets you selectively choose which changes to include in a commit, giving you fine-grained control over your commit
history.

Q6. What does HEAD mean in Git?

© 2024 Training Material — Confidential & For Trainer Use Only Page 12
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

■ HEAD is a pointer to the current commit you're working on, usually pointing to the tip of the current branch.

■ INTERVIEW CORNER — Git & GitHub

• Difference between git merge and git rebase — when to use each?
• How do you squash multiple commits into one?
• What is cherry-pick and when would you use it?
• How do you revert a pushed commit that others have pulled?
• What is git stash? Real-world use case?
• Explain GitFlow vs trunk-based development.

© 2024 Training Material — Confidential & For Trainer Use Only Page 13
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML5 Fundamentals
03
Structure, Semantics, Forms, Media & Accessibility

■ TRAINER NOTE
Estimated Time: 2.5 Hours | Teaching Style: Code-Along in VS Code
Set up Live Server extension. Build a sample portfolio page step by step.

3.1 HTML Document Structure

HTML (HyperText Markup Language) is the standard markup language for web pages. HTML5 is the latest
major version, introducing semantic elements, multimedia APIs, and improved form controls. Every HTML
document follows a standard skeleton.

HTML5 — Boilerplate Structure

<!DOCTYPE html>
<html lang='en'>

<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta name='description' content='Page description for SEO'>
<meta name='author' content='Your Name'>
<title>Page Title — Appears in Browser Tab</title>
<link rel='stylesheet' href='[Link]'>
<link rel='icon' href='[Link]' type='image/x-icon'>
</head>

<body>

<!-- Visible content goes here -->

<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>

<script src='[Link]' defer></script>

</body>

</html>

Anatomy of an HTML Element:

© 2024 Training Material — Confidential & For Trainer Use Only Page 14
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML Element Structure

Opening Tag Attribute Name Attribute Value Closing Tag

| | | |
v v v v
<a href='[Link] class='btn'> Click Me </a>
■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■ ■■■■■■■■■ ■■■
| |
Element Content
Name

Self-closing element: <img src='[Link]' alt='Description'>

Void elements have no content or closing tag.

3.2 Semantic HTML5 Elements

Semantic HTML means using elements that convey the meaning of the content, not just its appearance. This
improves SEO, accessibility, and code readability.

Semantic Page Layout

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ <header> ■ Site logo, nav, hero
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ <nav> ■ Navigation links
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ <main> ■ <aside> ■
■ ■■■■■■■■■■■■■■■■■ ■ Sidebar widgets ■
■ ■ <article> ■ ■ Related posts ■
■ ■ Blog content ■ ■ Ads / widgets ■
■ ■■■■■■■■■■■■■■■■■ ■ ■
■ ■■■■■■■■■■■■■■■■■ ■ ■
■ ■ <section> ■ ■ ■
■ ■ More content ■ ■ ■
■ ■■■■■■■■■■■■■■■■■ ■ ■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ <footer> ■ Copyright, links
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

© 2024 Training Material — Confidential & For Trainer Use Only Page 15
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML5 — Semantic Structure

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Semantic Layout Example</title>
</head>
<body>

<header>
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/about'>About</a></li>
<li><a href='/contact'>Contact</a></li>
</ul>
</nav>
</header>

<main>
<article>
<header>
<h1>Article Title</h1>
<time datetime='2024-01-15'>January 15, 2024</time>
</header>
<section>
<h2>Introduction</h2>
<p>Article content goes here...</p>
</section>
<section>
<h2>Main Content</h2>
<figure>
<img src='[Link]' alt='Architecture diagram'>
<figcaption>Fig 1: System Architecture</figcaption>
</figure>
</section>
</article>

<aside>
<h3>Related Articles</h3>
<ul>
<li><a href='#'>Getting Started with CSS</a></li>
</ul>
</aside>
</main>

<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

</body>
</html>

© 2024 Training Material — Confidential & For Trainer Use Only Page 16
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Semantic vs Non-Semantic Elements:

Non-Semantic (Avoid) Semantic Replacement Purpose

<div class='header'> <header> Page/section header

<div class='nav'> <nav> Navigation links

<div class='main'> <main> Primary page content

<div class='footer'> <footer> Page footer

<div class='article'> <article> Self-contained content

<div class='sidebar'> <aside> Supplementary content

<b>bold text</b> <strong>bold text</strong> Important text

<i>italic text</i> <em>italic text</em> Emphasized text

3.2.1 Core HTML Elements Reference

© 2024 Training Material — Confidential & For Trainer Use Only Page 17
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML5 — Core Elements

<!-- HEADINGS (h1 only once per page for SEO) -->
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section</h3> <!-- h4, h5, h6 also available -->

<!-- TEXT CONTENT -->

<p>Paragraph of text. Use &amp;amp; for &, &amp;lt; for <, &amp;gt; for ></p>
<strong>Bold/important text</strong> <em>Italic/emphasized text</em>
<code>inline code</code> <pre>preformatted block</pre>
<mark>highlighted text</mark> <del>strikethrough</del> <ins>inserted</ins>
^superscript _subscript
<abbr title='HyperText Markup Language'>HTML</abbr>
<blockquote cite='[Link] long quote...</blockquote>

<!-- LINKS -->

<a href='[Link] link</a>
<a href='/about'>Internal link</a>
<a href='[Link] link</a>
<a href='[Link] link</a>
<a href='#section-id'>Anchor link (same page)</a>
<a href='[Link]' download>Download link</a>
<a href='[Link] target='_blank' rel='noopener noreferrer'>New tab</a>

<!-- IMAGES -->

<img src='[Link]' alt='Descriptive alt text' width='400' height='300'>

<!-- LISTS -->

<ul> <!-- Unordered (bullets) -->
<li>Item One</li>
<li>Item Two</li>
</ul>

<ol type='1' start='1'> <!-- Ordered (numbered) -->

<li>First step</li>
<li>Second step</li>
</ol>

<dl> <!-- Definition list -->

<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>

<!-- DIVIDERS -->

<hr> <!-- Horizontal rule (thematic break) -->
<br> <!-- Line break (use sparingly) -->

3.3 HTML Tables

© 2024 Training Material — Confidential & For Trainer Use Only Page 18
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML5 — Tables

<table>
<caption>Monthly Sales Report</caption>
<thead>
<tr>
<th scope='col'>Month</th>
<th scope='col'>Revenue</th>
<th scope='col'>Growth</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>■1,20,000</td>
<td>+12%</td>
</tr>
<tr>
<td>February</td>
<td>■1,45,000</td>
<td>+20%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='2'>Total</td>
<td>■2,65,000</td>
</tr>
</tfoot>
</table>

<!-- colspan spans columns, rowspan spans rows -->

<!-- Use tables ONLY for tabular data, NOT for layout -->

3.4 HTML5 Forms

HTML5 dramatically improved forms with new input types, built-in validation, and better semantics. Mastering
forms is essential for any web developer.

© 2024 Training Material — Confidential & For Trainer Use Only Page 19
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML5 Form — Part 1: Text Inputs

<form action='/submit' method='POST' novalidate>

<fieldset>
<legend>Personal Information</legend>

<label for='fullname'>Full Name *</label>

<input type='text' id='fullname' name='fullname' required minlength='2' maxlength='50'>

<label for='email'>Email *</label>

<input type='email' id='email' name='email' placeholder='you@[Link]' required>

<label for='phone'>Phone</label>
<input type='tel' id='phone' name='phone' pattern='[0-9]{10}'>

<label for='dob'>Date of Birth</label>

<input type='date' id='dob' name='dob' min='1900-01-01' max='2005-12-31'>

<label for='age'>Age</label>
<input type='number' id='age' name='age' min='18' max='100'>

<label for='website'>Portfolio URL</label>

<input type='url' id='website' placeholder='[Link]

<label for='password'>Password *</label>

<input type='password' id='password' required minlength='8'>

<input type='search' name='q' placeholder='Search...' autocomplete='off'>

<input type='file' name='resume' accept='.pdf,.doc' multiple>
<input type='range' name='exp' min='0' max='10' value='2'>
<input type='color' name='theme' value='#2E86AB'>
</fieldset>
</form>

© 2024 Training Material — Confidential & For Trainer Use Only Page 20
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML5 Form — Part 2: Selects, Radios, Checkboxes

<fieldset>
<legend>Preferences</legend>

<!-- Textarea -->

<label for='bio'>Bio</label>
<textarea id='bio' name='bio' rows='4' placeholder='About yourself'></textarea>

<!-- Select / Dropdown -->

<label for='country'>Country</label>
<select id='country' name='country' required>
<option value=''>-- Select --</option>
<option value='in' selected>India</option>
<optgroup label='Europe'>
<option value='uk'>United Kingdom</option>
<option value='de'>Germany</option>
</optgroup>
</select>

<!-- Radio Buttons -->

<fieldset>
<legend>Gender</legend>
<label><input type='radio' name='gender' value='m'> Male</label>
<label><input type='radio' name='gender' value='f'> Female</label>
</fieldset>

<!-- Checkboxes -->

<label><input type='checkbox' name='skills' value='html'> HTML</label>
<label><input type='checkbox' name='skills' value='css'> CSS</label>
<label><input type='checkbox' name='skills' value='js'> JS</label>

<!-- Datalist for autocomplete -->

<input type='text' list='frameworks' name='framework'>
<datalist id='frameworks'>
<option value='React'><option value='Vue'><option value='Angular'>
</datalist>

<!-- Hidden + Submit -->

<input type='hidden' name='csrf_token' value='abc123'>
<button type='submit'>Submit</button>
<button type='reset'>Reset</button>
</fieldset>
</form>

HTML5 Input Types Summary:

Input Type Description Use Case

text General single-line text Name, username

email Email with @ validation Email address

password Masked input Login forms

© 2024 Training Material — Confidential & For Trainer Use Only Page 21
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

number Numeric with spin buttons Quantity, age

tel Telephone (pattern needed) Phone number

url URL with http validation Website URL

date Date picker (browser native) Birthday, booking

time Time picker Appointment time

datetime-local Date + time picker Event scheduling

range Slider control Volume, rating

color Color picker Theme selection

file File upload (accept attr) Document upload

search Search field with clear btn Search bars

checkbox Multi-select toggle Preferences

radio Single-select from group Gender, payment

hidden Not visible to user CSRF, session data

3.5 Media Elements

© 2024 Training Material — Confidential & For Trainer Use Only Page 22
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML5 — Media Elements

<!-- IMAGES with responsive srcset -->

<picture>
<source media='(min-width: 800px)' srcset='[Link]'>
<source media='(min-width: 400px)' srcset='[Link]'>
<img src='[Link]' alt='Responsive image' loading='lazy'>
</picture>

<!-- loading='lazy' defers offscreen images — great for performance! -->

<!-- VIDEO -->

<video width='640' height='360' controls autoplay muted loop poster='[Link]'>
<source src='video.mp4' type='video/mp4'>
<source src='[Link]' type='video/webm'>
<track kind='captions' src='[Link]' srclang='en' label='English'>
Your browser does not support the video element.
</video>

<!-- AUDIO -->

<audio controls>
<source src='podcast.mp3' type='audio/mpeg'>
<source src='[Link]' type='audio/ogg'>
Your browser does not support the audio element.
</audio>

<!-- IFRAME (embeds) -->

<iframe
src='[Link]
width='600'
height='450'
style='border:0'
allowfullscreen
loading='lazy'
referrerpolicy='no-referrer-when-downgrade'>
</iframe>

<!-- SVG inline (scalable, styleable with CSS) -->

<svg width='100' height='100' viewBox='0 0 100 100' xmlns='[Link]
<circle cx='50' cy='50' r='40' fill='#2E86AB' />
<text x='50' y='55' text-anchor='middle' fill='white' font-size='20'>Hi</text>
</svg>

3.6 Accessibility (a11y)

Web accessibility ensures that websites are usable by people with disabilities. It is not just a nice-to-have — it is
often a legal requirement (ADA, WCAG 2.1).

© 2024 Training Material — Confidential & For Trainer Use Only Page 23
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML5 — Accessibility (a11y)

<!-- ARIA (Accessible Rich Internet Applications) roles & attributes -->

<!-- 1. Always provide alt text for images -->

<img src='[Link]' alt='Bar chart showing 40% increase in Q4 sales'>
<img src='[Link]' alt=''> <!-- Empty alt = decorative -->

<!-- 2. Labels for all form inputs -->

<label for='search'>Search articles:</label>
<input type='search' id='search' name='q'>

<!-- 3. ARIA roles for custom widgets -->

<div role='button' tabindex='0' aria-pressed='false'>Toggle</div>
<nav aria-label='Main navigation'>...</nav>
<nav aria-label='Breadcrumb'>...</nav>

<!-- 4. aria-label for icon buttons (no visible text) -->

<button aria-label='Close dialog'>
<svg>...</svg> <!-- X icon -->
</button>

<!-- 5. aria-live for dynamic content updates -->

<div aria-live='polite' aria-atomic='true' id='status'>
<!-- Screen reader announces when content changes -->
</div>

<!-- 6. Skip to main content link (keyboard nav) -->

<a href='#main' class='skip-link'>Skip to main content</a>

<!-- 7. Language attribute -->

<html lang='en'> <!-- Crucial for screen readers -->

<!-- 8. Heading hierarchy — NEVER skip levels -->

<h1>Page Title</h1>
<h2>Section</h2>
<h3>Sub-section</h3> <!-- Not h4 directly after h2 -->

<!-- 9. Focus management -->

<button autofocus>Primary Action</button>
<input type='text' tabindex='0'> <!-- 0 = natural order -->

WCAG 2.1 Principles (POUR):

Principle Requirement Examples

Perceivable Content must be presentable in ways Alt text, captions, sufficient color
users can perceive. contrast (4.5:1 ratio)

Operable UI components must be operable by all Full keyboard navigation, no

users. seizure-inducing content

Understandable Info and UI must be understandable. Clear language, predictable navigation,

error correction

© 2024 Training Material — Confidential & For Trainer Use Only Page 24
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Robust Content must be interpreted by assistive Valid HTML, ARIA roles, tested with
technologies. screen readers

3.7 Practice Questions — Module 3

Q1. What is the difference between , , and ?
■ = self-contained (blog post). = thematic group of content. = generic non-semantic container.

Q2. Why should you only have one per page?

■ For SEO — the tells search engines the page's primary topic. Multiple h1s confuse crawlers.

Q3. What is the purpose of the 'name' attribute in form inputs vs the 'id' attribute?
■ name is used by the server to identify form data on submission. id is used by CSS/JS and to link via 'for' attribute.

Q4. What does alt='' (empty alt) on an image mean?

■ It tells screen readers the image is purely decorative and should be skipped. Never omit alt entirely.

Q5. Explain the difference between inline and block-level elements.

■ Block elements (div, p, h1) take full width, start on a new line. Inline elements (span, a, img) flow within text.

Q6. What is the purpose of the tag?

■ Controls how the page scales on mobile devices. Without it, mobile browsers render desktop-width and shrink
everything.

■ INTERVIEW CORNER — HTML5

• What is the difference between HTML4 and HTML5?
• Explain data- attributes and their use cases
• What is localStorage vs sessionStorage vs cookies?
• What are Web Workers and when would you use them?
• Explain the Canvas API vs SVG — differences and use cases
• How do you optimise images for the web? (srcset, WebP, lazy loading)

© 2024 Training Material — Confidential & For Trainer Use Only Page 25
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Assignments & Projects

04
Hands-On Practice Tasks for All Three Modules

Assignment 1 — Web Concepts (Module 1)

■ Instructions
Answer each question in 3-5 sentences. No copy-paste from internet.
Due: Next class session.

Q1. Draw the complete lifecycle of a web request from URL entry to page display.

Q2. Create a comparison table of 5 HTTP status codes with real-world scenarios.

Q3. Research and write about the differences between HTTP/1.1, HTTP/2, and HTTP/3.

Q4. List 10 websites and identify which appear to be frontend-heavy vs backend-heavy.

Q5. What browser developer tool would you use to: (a) find why a page loads slowly, (b) inspect a button's
CSS, (c) view API responses?

Assignment 2 — Git Practice (Module 2)

■ Instructions
Complete all tasks in a terminal. Screenshot each step and submit screenshots.
Create a GitHub repo called 'git-practice'.

© 2024 Training Material — Confidential & For Trainer Use Only Page 26
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Git Assignment Tasks

# TASK 1: Initialize and make commits

mkdir my-project && cd my-project
git init
echo '# My Project' > [Link]
git add [Link]
git commit -m 'feat: initial commit with README'

# TASK 2: Create branches and simulate team collaboration

git switch -c feature/about-page
echo '<h1>About Me</h1>' > [Link]
git add . && git commit -m 'feat: add about page'
git switch main
git merge feature/about-page

# TASK 3: Push to GitHub

git remote add origin git@[Link]:yourusername/[Link]
git push -u origin main

# TASK 4: Intentionally create and resolve a merge conflict

git switch -c branch-a
echo 'Branch A version' > [Link]
git add . && git commit -m 'Branch A changes'
git switch main
echo 'Main version' > [Link]
git add . && git commit -m 'Main branch changes'
git merge branch-a # This will cause a CONFLICT - resolve it!

# TASK 5: Create a .gitignore and verify it works

echo 'node_modules/' >> .gitignore
echo '.env' >> .gitignore
mkdir node_modules && touch node_modules/[Link]
git status # node_modules should NOT appear

Project — Personal Portfolio Website (Module 3)

■ MAJOR PROJECT
Build a multi-page personal portfolio website using ONLY HTML5 (no CSS/JS required).
Commit your work to GitHub after completing each page. Use semantic HTML throughout.

Required Pages & Features:

• [Link] — Homepage with: semantic header, nav bar, hero section, skills section, footer
• [Link] — About page with: profile image + alt text, bio paragraph, table of education
• [Link] — Projects with: article elements, links to GitHub, descriptive headings
• [Link] — Contact form with: text, email, phone, textarea, dropdown, submit button — all with labels &
validation
• Accessibility — All images have alt text, all form inputs have labels, heading hierarchy is correct

© 2024 Training Material — Confidential & For Trainer Use Only Page 27
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

• GitHub — Entire project pushed to a public GitHub repository with meaningful commit messages

Submission Checklist:
Project Checklist

[ ] All 4 HTML pages created

[ ] Valid HTML5 (test at [Link])
[ ] Semantic elements used throughout (header, nav, main, article, section, footer)
[ ] Contact form has all required input types with proper labels
[ ] All images have descriptive alt text
[ ] Pushed to GitHub with 10+ meaningful commits
[ ] [Link] in repository describing the project

© 2024 Training Material — Confidential & For Trainer Use Only Page 28
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Quick Reference Cheat Sheets

05
Take-Home Reference Cards for All Modules

Git Commands Cheat Sheet

Git Cheat Sheet

# SETUP # CORE WORKFLOW

git config --global [Link] 'N' git init # New repo
git config --global [Link] 'E' git clone <url> # Copy repo
git config --list git status # Check state
git add . # Stage all
# COMMITS git commit -m '' # Save
git commit -am 'msg' git push # Upload
git commit --amend git pull # Download+merge
git log --oneline --graph

# BRANCHING # UNDOING
git switch -c feature/x git restore file # Discard
git switch main git reset --soft HEAD~1
git merge feature/x git revert <hash> # Safe undo
git branch -d feature/x git stash / pop

# REMOTE # INSPECTION
git remote add origin <url> git diff # Unstaged
git push -u origin main git diff --staged
git fetch origin git log -p -2
git pull --rebase git blame file

HTML5 Elements Cheat Sheet

© 2024 Training Material — Confidential & For Trainer Use Only Page 29
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

HTML5 Cheat Sheet

<!-- DOCUMENT --> <!-- TEXT --> <!-- LISTS -->

<!DOCTYPE html> <h1>–<h6> <ul><li>
<html lang='en'> <p> <br> <hr> <ol><li>
<head> <strong> <em> <dl><dt><dd>
<title> <code> <pre>
<meta charset='UTF-8'> <mark> <del> <ins>
<link rel='stylesheet'> <abbr title=''> <!-- MEDIA -->
<script defer> <blockquote> <img src alt>
<body> <span> <div> <video controls>
<a href target> <audio controls>
<!-- SEMANTIC --> <picture>
<header> <nav> <!-- TABLE --> <source>
<main> <aside> <table> <iframe>
<article> <section> <thead> <tbody> <tfoot> <svg>
<footer> <tr> <th scope> <td> <canvas>
<figure> <figcaption> colspan rowspan
<time datetime>

<!-- FORM -->

<form action method> <label for> <input type name id required>
<textarea> <select> <option> <optgroup> <fieldset> <legend>
<button type> <datalist> <output>

<!-- INPUT TYPES: text email password number tel url date time -->
<!-- range color file search checkbox radio hidden submit -->

<!-- KEY ATTRIBUTES: id class style href src alt title -->
<!-- data-* aria-* role tabindex autofocus disabled readonly -->

Web Development Tools & Extensions

Tool Description Use Case

VS Code Best code editor — free, extensible All development

Live Server VS Code extension — auto-reload browser HTML/CSS dev

Prettier Code formatter — consistent style All languages

ESLint JavaScript linter — catches errors JavaScript

GitLens VS Code Git integration visualiser Git workflow

Chrome DevTools Built-in — inspect, debug, audit All debugging

Postman / Insomnia API testing client Backend/API testing

Figma UI/UX design + prototyping tool Design

[Link] Official HTML5 validator HTML validation

Can I Use ([Link]) Browser compatibility checker CSS/HTML/JS

© 2024 Training Material — Confidential & For Trainer Use Only Page 30
■ Web Development Training — Professional Trainer Notes Introduction to Web Dev | Git/GitHub | HTML5

Resources & Further Reading

Resource URL Best For

MDN Web Docs [Link] Best HTML/CSS/JS reference

W3Schools [Link] Beginner tutorials with Try It

freeCodeCamp [Link] Free full courses + certifications

The Odin Project [Link] Full stack curriculum (free)

CSS-Tricks [Link] In-depth CSS articles & guides

Git Documentation [Link]/doc Official Git reference

GitHub Docs [Link] GitHub features documentation

[Link] [Link] Google's web best practices

A11y Project [Link] Accessibility patterns & checklists

Frontend Mentor [Link] Real design challenges to build

■ KEY TAKEAWAYS
Module 1: The web = HTTP requests between browsers and servers. Master DevTools.
Module 2: Git tracks every change. Commit early, commit often. Use branches always.
Module 3: HTML = structure. Use semantic elements. Forms with labels. Alt text always.

Next Steps: Learn CSS (Flexbox, Grid, Responsive Design) → Then JavaScript (DOM, Events, Fetch API)

© 2024 Training Material — Confidential & For Trainer Use Only Page 31