Unit I – Web Fundamentals & HTML5.
1. Introduction to Modern Web Development
Definition
Web development is the process of designing, building, and
maintaining websites and web applications that run on the
Internet. It involves creating web pages, adding styles,
implementing functionality, and managing servers and
databases.
Types of Web Development
a) Front-End Development
Front-end development focuses on the user interface (UI) of a
website. It is the part that users see and interact with.
Technologies Used:
HTML5 – Creates the structure of the webpage.
CSS3 – Styles the webpage.
JavaScript – Adds interactivity.
Example: Login page, navigation menu, image gallery.
b) Back-End Development
Back-end development manages the server, database, and
application logic. It processes user requests and stores data.
Technologies Used:
[Link]
PHP
Python
Java
MySQL, MongoDB
c) Full-Stack Development
A Full-Stack Developer works on both the front-end and
back-end of a web application.
2. How the Web Works (Client-Server Model)
The Client-Server Model explains how a web browser
communicates with a web server.
Components
Client
A client is the user's web browser.
It sends a request to access a webpage.
Examples: Google Chrome, Mozilla Firefox, Microsoft Edge.
Server
A server stores website files and responds to client
requests.
It sends HTML, CSS, JavaScript, images, and other
resources to the browser.
Working Process
1. The user enters a website URL.
2. The browser sends a request to the web server.
3. The server processes the request.
4. The server sends the requested webpage.
5. The browser displays the webpage.
3. Web Browsers
Definition
A web browser is software used to access and display
websites on the Internet.
Popular Browsers
Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Opera
Functions
Displays web pages.
Executes JavaScript.
Stores browsing history.
Supports extensions.
Provides security while browsing.
4. Developer Tools
Definition
Developer Tools are built into modern browsers to help
developers inspect, debug, and test websites.
Shortcut
F12
Ctrl + Shift + I
Features
Inspect HTML elements.
Edit CSS styles.
View JavaScript errors in the Console.
Monitor network requests.
Debug JavaScript code.
5. HTML5 Structure
Definition
HTML (HyperText Markup Language) is the standard
language used to create web pages.
HTML5 is the latest version of HTML that introduces
semantic elements, multimedia support, and improved form
controls.
Basic Structure
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first webpage.</p>
</body>
</html>
Explanation
<!DOCTYPE html> – Declares HTML5 document.
<html> – Root element.
<head> – Contains metadata and title.
<title> – Displays the page title.
<body> – Contains visible webpage content.
6. Semantic HTML Elements
Definition
Semantic elements clearly describe the purpose of the content,
improving readability, accessibility, and SEO.
Common Semantic Elements
Element Purpose
<header> Header section
<nav> Navigation links
<section> Groups related content
<article> Independent content
<aside> Sidebar content
<footer> Footer information
Advantages
Improves webpage structure.
Better accessibility.
Better search engine optimization (SEO).
Easier maintenance.
7. HTML Forms
Definition
HTML forms are used to collect user input.
Common Form Elements
<form>
<label>
<input>
<textarea>
<select>
<button>
Input Types
text
email
password
number
date
radio
checkbox
file
8. Validation Attributes
Validation ensures that users enter valid information before
submitting a form.
Common Validation Attributes
Attribute Purpose
required Makes a field mandatory
minlength Minimum number of characters
maxlength Maximum number of characters
pattern Matches a specific format
placeholder Displays hint text
min Minimum value
max Maximum value
Advantages
Prevents invalid input.
Improves data quality.
Reduces server-side errors.
9. Multimedia Elements
HTML5 allows audio and video to be embedded without
external plugins.
Audio
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
Video
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Advantages
Built-in multimedia support.
No additional plugins required.
Supports multiple media formats.
10. Accessibility Basics
Definition
Accessibility means designing websites that can be used by
everyone, including people with disabilities.
Best Practices
Use semantic HTML elements.
Add alt text to images.
Use labels for form controls.
Ensure keyboard accessibility.
Maintain sufficient color contrast.
Use meaningful headings.
Benefits
Improves user experience.
Makes websites inclusive.
Enhances SEO.
Meets accessibility standards.
FRONT-END WEB DEVELOPMENT LAB – Practical
Explanations
Practical 1: Create a Semantic HTML5 Webpage with
Header, Footer, and Sections
Aim
To create a webpage using HTML5 semantic elements.
Explanation
Semantic HTML5 elements describe the purpose of the
content. They improve webpage structure, accessibility, and
SEO. Common elements include <header>, <nav>, <section>,
<article>, and <footer>.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML5</title>
</head>
<body>
<header>
<h1>ABC College</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<section>
<h2>Welcome</h2>
<p>This is a semantic HTML5 webpage.</p>
</section>
<footer>
<p>© 2026 ABC College</p>
</footer>
</body>
</html>
Practical 2: Design a Form with Validation Attributes
Aim
To create an HTML form with built-in validation.
Explanation
HTML forms collect user information. Validation attributes
such as required, minlength, maxlength, pattern, min, and max
ensure that users enter valid data before submitting the form.
Program:
<!DOCTYPE html>
<html>
<body>
<h2>Student Registration</h2>
<form>
Name:
<input type="text" required><br><br>
Email:
<input type="email" required><br><br>
Age:
<input type="number" min="18" max="60"><br><br>
<input type="submit">
</form>
</body>
</html>
Practical 3: Apply Advanced CSS Selectors and Pseudo-
Classes
Aim
To style webpage elements using advanced CSS selectors.
Explanation
CSS selectors identify HTML elements for styling. Pseudo-
classes such as :hover, :focus, :first-child, and :nth-child()
apply styles based on user interaction or the element's
position.
Program:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:blue;
}
p:hover{
color:red;
}
input:focus{
background-color:yellow;
}
</style>
</head>
<body>
<h1>CSS Demo</h1>
<p>Move the mouse here.</p>
<input type="text">
</body>
</html>
Practical 4: Style a Webpage Using CSS Variables and
Custom Fonts
Aim
To create a consistent webpage design using CSS variables
and custom fonts.
Explanation
CSS variables store reusable values such as colors and font
sizes. Custom fonts improve the appearance of webpages and
provide better typography using services like Google Fonts.
Program:
<!DOCTYPE html>
<html>
<head>
<style>
:root{
--maincolor:green;
}
body{
font-family:Arial;
}
h1{
color:var(--maincolor);
}
</style>
</head>
<body>
<h1>CSS Variables Example</h1>
</body>
</html>
Practical 5: Create Layouts Using Flexbox
Aim
To design flexible webpage layouts using CSS Flexbox.
Explanation
Flexbox is a one-dimensional layout model used to align and
distribute items efficiently. It simplifies horizontal and vertical
alignment and creates responsive layouts.
Program:
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display:flex;
justify-content:space-around;
}
.box{
background:skyblue;
padding:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>
</div>
</body>
</html>
Practical 6: Design a Responsive Grid Layout Using CSS
Grid
Aim
To create a webpage layout using CSS Grid.
Explanation
CSS Grid is a two-dimensional layout system that arranges
content into rows and columns. It is useful for creating
structured and responsive webpage layouts.
Program:
<!DOCTYPE html>
<html>
<head>
<style>
.grid{
display:grid;
grid-template-columns:auto auto auto;
gap:10px;
}
.item{
background:orange;
padding:20px;
text-align:center;
}
</style>
</head>
<body>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
Practical 7: Build a Responsive Webpage Using Media
Queries
Aim
To make a webpage responsive for different screen sizes.
Explanation
Media queries apply different CSS rules based on screen
width. They allow webpages to adapt to desktops, tablets, and
mobile devices, improving user experience.
Program:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:lightblue;
}
@media(max-width:600px){
body{
background:pink;
}
</style>
</head>
<body>
<h2>Responsive Webpage</h2>
</body>
</html>
Practical 8: Create a Navigation Bar (Mobile + Desktop
View)
Aim
To develop a responsive navigation menu.
Explanation
A navigation bar helps users move between webpages.
Responsive navigation adjusts its layout for different screen
sizes using CSS and media queries.
Program:
<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style:none;
display:flex;
gap:20px;
}
@media(max-width:600px){
ul{
flex-direction:column;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</body>
</html>
Practical 9: Write JavaScript for Dynamic Content
Update
Aim
To update webpage content dynamically using JavaScript.
Explanation
JavaScript allows webpage elements to change without
reloading the page. DOM methods such as getElementById()
and innerHTML are commonly used to update content
dynamically.
Program:
<!DOCTYPE html>
<html>
<body>
<h2 id="demo">Welcome</h2>
<button onclick="changeText()">
Click
</button>
<script>
function changeText(){
[Link]("demo").innerHTML="Hello
Students";
</script>
</body>
</html>
Practical 10: Implement Event Handling (Button Clicks
and Form Inputs)
Aim
To handle user interactions using JavaScript events.
Explanation
Events are actions performed by users, such as clicking
buttons or entering text. Event handling executes JavaScript
functions in response to these actions, making webpages
interactive.
Program:
<!DOCTYPE html>
<html>
<body>
<button onclick="show()">
Click Me
</button>
<script>
function show(){
alert("Button Clicked");
</script>
</body>
</html>
Practical 11: Create a Form Validation System Using
JavaScript
Aim
To validate user input using JavaScript.
Explanation
JavaScript validation checks form data before submission. It
verifies conditions such as empty fields, email format,
password length, and numeric ranges, providing immediate
feedback to users.
Program:
<!DOCTYPE html>
<html>
<body>
<form onsubmit="return validate()">
<input type="text" id="name">
<input type="submit">
</form>
<script>
function validate(){
let name=[Link]("name").value;
if(name==""){
alert("Enter Name");
return false;
return true;
</script>
</body>
</html>
Practical 12: Fetch and Display Data from a Sample API
Aim
To retrieve and display data from a web API.
Explanation
An API (Application Programming Interface) allows
applications to exchange data. JavaScript uses the fetch()
method to request data from an API and display it
dynamically on the webpage.
Program:
<!DOCTYPE html>
<html>
<body>
<button onclick="loadData()">Load</button>
<p id="demo"></p>
<script>
function loadData(){
fetch("[Link]
.then(response=>[Link]())
.then(data=>{
[Link]("demo").innerHTML=[Link];
});
</script>
</body>
</html>
Practical 13: Debug Errors Using Browser Developer
Tools
Aim
To identify and fix webpage errors.
Explanation
Browser Developer Tools help inspect HTML, CSS, and
JavaScript. The Console displays errors, while the Elements,
Network, and Sources tabs assist in debugging and improving
webpage performance.
Program:
<!DOCTYPE html>
<html>
<body>
<h2>Hello Students</h2>
<script>
[Link]("Developer Tools Demo");
</script>
</body>
</html>
Practical 14: Upload Project to GitHub Repository
Aim
To store and manage project files using GitHub.
Explanation
GitHub is a cloud-based platform for version control and
collaboration. Developers upload projects to repositories,
track changes, and work together efficiently using Git.
Program:
Create a project folder containing:
[Link]
[Link]
[Link]
Git Commands
git init
git add .
git commit -m "First Commit"
git branch -M main
git remote add origin [Link]
git push -u origin main
Practical 15: Deploy a Website Using GitHub Pages
Aim
To publish a static website online.
Explanation
GitHub Pages is a free hosting service that publishes websites
directly from a GitHub repository. It allows developers to
share their projects publicly and test websites in a live
environment.
Program:
1. Upload your project to GitHub.
2. Open the repository.
3. Go to Settings → Pages.
4. Under Source, select Deploy from a branch.
5. Choose the main branch and the /root folder.
6. Click Save.
7. Your website will be published with a GitHub Pages
URL.