🧱 1. What is HTML?
HTML (HyperText Markup Language) is the standard language for creating the structure of web pages.
🔹 Key Concepts:
- Elements and tags:
<html>,<head>,<body>,<h1>,<p>, etc. - Attributes:
href,src,alt,id,class - Nesting and semantic structure
💡 Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML page.</p>
</body>
</html>🎨 2. What is CSS?
CSS (Cascading Style Sheets) is used to style and visually format HTML content.
🔹 Key Concepts:
- Selectors: element, class (.class), ID (#id)
- Properties: color, font-size, margin, padding, etc.
- Cascading and specificity
- Inline, internal, and external styles
💡 Example:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}📐 3. The Box Model
Every HTML element is a box with four layers: Content → Padding → Border → Margin
- padding: space inside the element, around content
- border: visible frame
- margin: space outside the element
[ margin ]
[ border ]
[ padding ]
[ content ]📌 4. Layout Techniques
🔹 Block vs Inline Elements:
- Block:
<div>,<section>,<p> - Inline:
<span>,<a>,<strong>
🔹 Layout Systems:
- float: legacy system
- position: static, relative, absolute, fixed, sticky
- flexbox: modern layout system
- grid: advanced layout system (optional)
⚙️ 5. Responsive Design
Responsive websites adapt to different screen sizes and devices.
🔹 Tools and Techniques:
Media Queries:
@media (max-width: 600px) {
body {
font-size: 16px;
}
}- Flexible units: %, em, rem, vw, vh
- Mobile-first approach
🌐 6. Semantic HTML
Use meaningful, descriptive tags for better structure and accessibility:
<header>,<footer>,<main>,<nav>,<section>,<article>
✅ Benefits:
- Accessibility
- SEO
- Clear code structure
🧰 7. File Structure of a Website
project/
├── index.html
├── about.html
├── contact.html
├── styles/
│ └── main.css
├── images/
│ └── logo.png
└── scripts/
└── script.js🛠 8. Developer Tools
- VS Code – code editor
- Live Server – live preview in browser
- DevTools – inspect and debug pages
- Git & GitHub – version control and deployment
🚀 9. Publishing with GitHub Pages
🔹 Steps:
- Push your site to a public GitHub repository
- Go to Settings → Pages
- Choose the branch (main) and folder (/root or /docs)
- GitHub provides a live link like:
https://yourusername.github.io/your-project/
🎯 Summary
- Write well-structured HTML documents
- Apply CSS to style and layout pages
- Build responsive designs for different devices
- Publish your project using GitHub Pages
➡️ Now you're ready to move on to examples and exercises to reinforce what you've learned.