Web Development Basics - Syllabus
with Examples
1. Introduction to Web Development
Web development refers to building and maintaining websites. It consists of three main
categories:
1.1 Frontend Development
• Deals with everything the user sees on the browser.
• Technologies: HTML, CSS, JavaScript, Bootstrap, React, Angular.
• Role: Responsible for design, structure, interactivity, responsiveness.
Example: A login page with input fields and buttons.
1.2 Backend Development
• Works behind the scenes — server, database, and logic.
• Technologies: Node.js, Python (Django/Flask), PHP, Java (Spring), Databases.
• Role: Data storage, authentication, APIs, server handling.
Example: When you click 'Login', backend checks credentials in the database.
1.3 Full Stack Development
• Combination of Frontend + Backend.
• Technologies: MERN Stack (MongoDB, Express.js, React.js, Node.js).
• Role: Can build complete applications (UI + server + database).
Example: A shopping website with both UI and backend order system.
2. HTML / HTML5 Basics
2.1 Structure of an HTML Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to Web Development</h1>
<p>This is my first paragraph.</p>
</body>
</html>
2.2 Common HTML Tags
<h1>Main Heading</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">Click Here</a>
<img src="image.jpg" alt="Sample Image" width="200">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
2.3 Forms Example
<form>
<label>Name:</label>
<input type="text" name="username" required>
<label>Email:</label>
<input type="email" name="email">
<label>Password:</label>
<input type="password" name="password">
<button type="submit">Submit</button>
</form>
2.4 Media Tags
<img src="nature.jpg" alt="Nature" width="300">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<audio controls>
<source src="song.mp3" type="audio/mp3">
</audio>
2.5 Semantic Elements
<header>Website Header</header>
<nav>Navigation Menu</nav>
<main>
<article>Article Content</article>
<section>Section Content</section>
</main>
<footer>Website Footer</footer>
3. CSS / CSS3 Basics
3.1 Selectors Example
<style>
h1 { color: blue; }
.highlight { background: yellow; }
#main { font-size: 20px; }
</style>
3.2 Box Model Example
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
</style>
<div class="box">Box Model Example</div>
3.3 Flexbox Example
<style>
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
}
.item { background: lightblue; padding: 20px; }
</style>
<div class="flex-container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</div>
3.4 Grid Example
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
.grid-item { background: lightgreen; padding: 20px; }
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
3.5 CSS Animation Example
<style>
.animate {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: move 3s infinite alternate;
}
@keyframes move {
from { left: 0; }
to { left: 200px; }
}
</style>
<div class="animate"></div>
4. Bootstrap Basics
Include Bootstrap using CDN:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
4.1 Container & Grid Example
<div class="container">
<div class="row">
<div class="col bg-primary text-white">Column 1</div>
<div class="col bg-success text-white">Column 2</div>
<div class="col bg-danger text-white">Column 3</div>
</div>
</div>
4.2 Navbar Example
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">MySite</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" 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>
</nav>
4.3 Card Example
<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a sample card using Bootstrap.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
