1.
Introduction to Web Development
What is Web Development?
Creating websites that people can see and interact with using a browser.
Three Main Parts of a Website
o HTML → Structure of the page (skeleton).
o CSS → Style and design (clothes & colors).
o JavaScript → Adds interactivity (brain).
Example Website Skeleton
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2. Basics of HTML
What is HTML?
HTML (HyperText Markup Language) = structure of web pages.
A webpage is made of tags.
Common HTML Tags
<h1> to <h6> → Headings
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p> → Paragraph
<p>This is a paragraph.</p>
<a> → Link (Anchor tag):=Embed Link in webpage
<a href="https://example.com">Visit Example</a>
<img> → Image
<img src="photo.jpg" alt="My Photo" width="200">
<ul>:- Unordered List
<ol>:- Ordered List
<li> → Lists
<ul>
<li>Milk</li>
<li>Bread</li>
</ul>
<ol>
<li>Milk</li>
<li>Bread</li>
</ol>
<div> → Container (group elements)
<div>
<h2>Box Title</h2>
<p>Content inside a box.</p>
</div>
HTML Attributes
Attributes give extra information about an element.
They are always written in the opening tag.
Syntax:
<tagname attribute="value">Content</tagname>
✅ Common Attributes:
href → Link URL (used with <a>)
src → Image source (used with <img>)
alt → Alternate text for image (used with <img>)
HTML Layout Elements:- are special tags that help organize the
structure of a webpage. They don’t change how things look (that’s CSS’s
job) but tell the browser and developers how the content is divided. These
are also very important for SEO and accessibility.
Common HTML Layout Elements
<header> → Top section of a page (logo, navigation, title)
<nav> → Navigation links (menus, navbar)
<main> → The main content of the page (unique content)
<section> → A group of related content
<article> → Independent piece of content (like blog post, news item)
<aside> → Sidebar content (ads, related links)
<footer> → Bottom section (copyright, contact info)
<div> → Generic container (used for grouping, styling, layout)
Forms (HTML)
Forms are used to collect input from users.
Common Tags:
<form> → Wraps all input fields
<input> → Text, email, number, checkbox, radio, etc.
<textarea> → Multiline text input
<button> → Form button (submit/reset)
<label> → Describes input fields
<select>, <option> → Dropdowns
Example:
<form>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
<label for="message">Message:</label>
<textarea id="message" rows="4"></textarea>
<button type="submit">Submit</button>
</form>
Tables (HTML)
Tables are used to display structured data.
Common Tags:
<table> → Table container
<tr> → Table row
<td> → Table data cell
<th> → Table header cell
<thead>, <tbody>, <tfoot> → Table sections
Example:
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>20</td>
<td>CS</td>
</tr>
<tr>
<td>Alice</td>
<td>22</td>
<td>Math</td>
</tr>
</tbody>
</table>
3. Basics of CSS
What is CSS?
CSS (Cascading Style Sheets) → Controls colors, fonts, layout, etc.
Ways to Add CSS
1. Inline CSS → Inside HTML tag
<h1 style="color: red;">Hello</h1>
2. Internal CSS → Inside <style>
<style> p { color: blue; } </style>
3.External CSS → In style.css file
<link rel="stylesheet" href="style.css">
CSS Selectors
1. Element Selector
Definition: Selects all elements of a given type (e.g., all <p> tags).
Syntax:
p {
color: blue;
}
Specificity: 0-0-1 (lowest, because it just matches by tag).
2. Class Selector
Definition: Selects elements with a specific class attribute. Can be reused across
multiple elements.
Syntax:
.box {
border: 1px solid black;
}
Specificity: 0-1-0 (higher than element).
3. ID Selector
Definition: Selects an element with a unique id. Should only be used once per page.
Syntax:
#header {
background: lightgray;
}
Specificity: 1-0-0 (higher than class & element).
Common CSS Properties
1. Text Styling
color → Sets the text color.
h1 { color: navy; }
font-size → Sets the size of text (px, em, rem).
p { font-size: 18px; }
font-family → Sets the font style.
body { font-family: Arial, sans-serif; }
text-align → Aligns text (left, center, right, justify).
h1 { text-align: center; }
2. Background
background-color → Sets background color.
body { background-color: lightgray; }
background-image → Adds an image as background.
div { background-image: url("bg.jpg"); }
3. Effects
border-radius → Rounds corners.
box-shadow → Adds shadow.
:hover → Changes style when hovered.
button {
background: blue;
border-radius: 10px;
box-shadow: 2px 2px 5px gray;
}
button:hover {
background: darkblue;
color: white;
}
4.Positioning
position → Controls element placement.
o static (default), relative, absolute, fixed, sticky.
nav {
position: fixed;
top: 0;
width: 100%;
}
🔹 5. Overflow & Visibility
overflow → What happens if content is too big?
o visible, hidden, scroll, auto.
visibility → visible or hidden (still takes space).
display: none → Hides element completely.
6.CSS Pseudo-Classes
🔹 What are Pseudo-Classes?
A pseudo-class is a keyword added to a selector that specifies a special state of the
element.
They always start with a colon :.
🔹 Common Pseudo-Classes
1. User Interaction States
:hover → When the mouse is over the element.
:active → When the element is being clicked.
:focus → When an element (like an input) is selected.
button:hover { background: darkblue; }
button:active { background: navy; }
input:focus { border: 2px solid blue; }
4. Linking HTML & CSS
In HTML:
<link rel="stylesheet" href="style.css">
In style.css:
body {
background-color: lightgray;
}
5. Layout & Flexbox
The Box Model
display → Defines how an element is shown.
o block → takes full width (like <div>).
o inline → sits in line (like <span>).
o inline-block → inline but respects width/height.
o flex → enables flexbox layout.
div { display: flex; }
justify-content (Flexbox) → Aligns items horizontally.
o flex-start (default), center, flex-end, space-between, space-around.
div {
display: flex;
justify-content: center;
}
✅ Example Combining Everything:
h1 {
color: navy;
text-align: center;
}
p {
font-size: 18px;
font-family: Verdana, sans-serif;
}
.container {
display: flex;
justify-content: space-between;
background-color: lightblue;
padding: 20px;
border-radius: 8px;
}
button:hover {
background: darkblue;
color: white;
}
6. Using ChatGPT for Web Development 🧠💻
✅ Why Use ChatGPT?
ChatGPT can be your coding buddy. It helps when:
You're stuck
You don't know what to write
You want to learn something new
You want to save time
🧾 What You Can Ask ChatGPT
Task Sample Prompt
Basic HTML
Give me a basic HTML5 template
Template
Navigation Bar Create a responsive navigation bar using CSS
Image Gallery Make a grid layout image gallery using flexbox
Center a Div How do I center a div using flexbox?
Styling Tips Suggest color scheme for a portfolio website
Font Suggestions Best Google Fonts for a personal blog website?
Responsive Design Make this layout mobile-friendly using media queries
Debugging Fix this CSS: my navbar is overlapping
Code Explanation Explain this HTML form code in simple terms
File Structure How to structure files for a personal website
🛠️Best Practices for Beginners
✅ Start small: Ask for one feature at a time (e.g., a navbar, then another section).
👀 Always read the code carefully before using. Try to understand it.
🧪 Copy → Paste → Test → Modify: Try the code in your own file.
🧠 Ask for an explanation: Don’t just copy — learn what it does.
📱 Ask for mobile responsiveness:
Example: "Make this section look good on mobile too"
🛑 Don't assume it's 100% correct: There may be mistakes — test it!
🌐 Check in your browser: See how it looks in Chrome or Firefox.
🎨 Ask for design ideas:
Example: "Suggest a color palette for a travel website"
💬 Ask follow-ups:
o "Can you improve this code?"
o "Add hover effects"
o "Explain this in beginner-friendly terms"
Good vs. Bad Prompts
❌ Bad
✅ Better Prompt
Prompt
“Create a simple HTML page with an image and 2
“Write HTML”
paragraphs”
“Create a contact form with name, email, message
“Make a form”
fields”
“Make a rounded CSS button that changes color on
“CSS button”
hover”
“Website “Give me a 3-section layout using flexbox and media
layout” queries”
Pro Tip
Ask ChatGPT to build a component, explain it, then tweak it yourself. This teaches
exploration and learning at the same time.
Mini Project – Personal Portfolio Website
Students will build a Portfolio Website with:
1. Home Page → Name + Intro
2. About Me → Small bio, photo
3. Projects Section → List of work
4. Contact Section → Links, email
Structure Example:
<nav>Navigation Bar</nav>
<section>About Me</section>
<section>Projects</section>
<footer>Contact</footer>
Resources for Learning More
MDN Web Docs – HTML
MDN Web Docs – CSS
W3Schools HTML & CSS
Flexbox Froggy (Game to learn Flexbox)
