HTML & CSS Basics

🚀 Getting Started

Basic Setup

Install a code editor (VS Code recommended)(..Or Cursor..It Has AI!)
Learn to create and organize files
Understand file extensions (.html, .css)

Basic HTML Template:




    
    My First Page
    


    
        We cant show the code here because it will break the website.!
 But Click The Button Below To See The Code!W3Schools is awsome beacuse they have code windows that dont mess with the website!

📝 HTML Fundamentals

Week 1: Basic Elements

Text elements (h1-h6, p)
Links (a href)
Images (img)
Lists (ul, ol, li)

Mini Project: Personal Bio Page

Create a simple page about yourself with:

Heading with your name
Short bio paragraph
List of hobbies
A profile picture

Week 2: Structure

Semantic elements (header, nav, main, footer)
Divs and spans
Classes and IDs
Basic forms

Mini Project: Recipe Page

Build a recipe page with:

Recipe title and image
Ingredients list
Step-by-step instructions
Simple contact form

🎨 CSS Fundamentals

Week 3: Styling Basics

Colors and backgrounds
Font properties
Margins and padding
Borders and box model

Basic CSS Example:

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
}

.text-content {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

Week 4: Layout

Display properties
Basic positioning
Simple flexbox
Media queries intro

Mini Project: Business Card

Create a digital business card with:

Centered content
Profile image
Contact details
Social media links

🎯 Practice Projects

1. Portfolio Page

Create a simple portfolio showcasing your projects

Navigation menu
About section
Projects grid
Contact form

2. Product Landing Page

Build a page for a fictional product

Hero section with CTA
Features list
Pricing table
Testimonials

Code Your Own!

3. Restaurant Menu

Design a responsive restaurant menu

Categories
Item cards
Prices
Responsive layout

HTML & CSS Learning Path