🚀 Week 1: HTML & CSS Study Guide

🏗️ Elements vs Tags

Opening Tag    Content      Closing Tag
    ↓            ↓              ↓
  <p>     Hello World!      </p>
  └────────────┬────────────┘
         Complete Element
                    

📝 Headings and Paragraphs

                            Heading Examples (h1 to h6)
                            Copy
                        

<h1>Main Title - Most Important</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Minor Heading</h4>
<h5>Small Heading</h5>
<h6>Smallest Heading</h6>

<!-- Real Example: Blog Post -->
<h1>How to Learn Web Development</h1>
<h2>Step 1: Learn HTML</h2>
<h3>Understanding Tags</h3>
<h3>Creating Your First Page</h3>
<h2>Step 2: Learn CSS</h2>

📋 Lists

                                Unordered List Example
                                Copy
                            

<h3>My Favorite Fruits</h3>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

<!-- Nested List -->
<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ul>

🔗 Hyperlinks

                        Link Examples
                        Copy
                    

<!-- External Link (to another website) -->
<a href="https://www.google.com">Visit Google</a>

<!-- Open in new tab -->
<a href="https://www.google.com" target="_blank">Open Google in New Tab</a>

<!-- Internal Link (same website) -->
<a href="about.html">About Us</a>
<a href="/contact.html">Contact</a>

<!-- Jump to section on same page -->
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>

<!-- Email Link -->
<a href="mailto:someone@example.com">Send Email</a>

<!-- Phone Link -->
<a href="tel:+919876543210">Call Us</a>

<!-- Download Link -->
<a href="document.pdf" download>Download PDF</a>

🖼️ Images

                        Image Examples
                        Copy
                    

<!-- Basic Image -->
<img src="photo.jpg" alt="A beautiful sunset">

<!-- Image with size -->
<img src="photo.jpg" alt="Sunset" width="300" height="200">

<!-- Image from URL -->
<img src="https://example.com/image.jpg" alt="Description">

<!-- Clickable Image (Image as Link) -->
<a href="https://www.google.com">
    <img src="logo.png" alt="Google Logo">
</a>

<!-- Responsive Image (adapts to screen size) -->
<img src="photo.jpg" alt="Sunset" style="max-width: 100%; height: auto;">

<!-- Image with title (tooltip) -->
<img src="photo.jpg" alt="Sunset" title="Beautiful sunset at beach">

📱 Responsive Images

                        Responsive Image Techniques
                        Copy
                    

<!-- Method 1: CSS max-width -->
<img src="photo.jpg" alt="Photo" style="max-width: 100%; height: auto;">

<!-- Method 2: Picture element (different images for different screens) -->
<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive image">
</picture>

<!-- Method 3: srcset attribute -->
<img src="small.jpg"
     srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
     alt="Responsive image">

📝 Form Basics

┌─────────────────────────────────────┐
│  <form>                              │ ← Form container
│    ├─ <label> Name: </label>        │ ← Label (describes input)
│    ├─ <input type="text">           │ ← Input field
│    │                                 │
│    ├─ <label> Email: </label>       │
│    ├─ <input type="email">          │
│    │                                 │
│    └─ <button> Submit </button>     │ ← Submit button
│  </form>                             │
└─────────────────────────────────────┘
                    

                        Basic Form Structure
                        Copy
                    

<form action="/submit" method="POST">
    <!-- Text Input -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <!-- Email Input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- Submit Button -->
    <button type="submit">Submit</button>
</form>

⌨️ Input Types

                        All Input Types
                        Copy
                    

<form>
    <!-- Text Input -->
    <input type="text" placeholder="Enter your name">
    
    <!-- Password (hidden text) -->
    <input type="password" placeholder="Enter password">
    
    <!-- Email (validates email format) -->
    <input type="email" placeholder="email@example.com">
    
    <!-- Number -->
    <input type="number" min="1" max="100" step="1">
    
    <!-- Date -->
    <input type="date">
    
    <!-- Time -->
    <input type="time">
    
    <!-- Color Picker -->
    <input type="color">
    
    <!-- File Upload -->
    <input type="file" accept="image/*">
    
    <!-- Checkbox -->
    <input type="checkbox" id="agree">
    <label for="agree">I agree to terms</label>
    
    <!-- Radio Buttons (choose one) -->
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    
    <!-- Range Slider -->
    <input type="range" min="0" max="100" value="50">
    
    <!-- URL -->
    <input type="url" placeholder="https://example.com">
    
    <!-- Tel (Phone) -->
    <input type="tel" placeholder="+91 98765 43210">
    
    <!-- Search -->
    <input type="search" placeholder="Search...">
</form>

📋 Other Form Elements

                                Textarea Example
                                Copy
                            

<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="5" cols="30" placeholder="Write your message here...">
</textarea>

✅ Form Validation

                        Validation Attributes
                        Copy
                    

<form>
    <!-- Required field (must be filled) -->
    <input type="text" name="username" required>
    
    <!-- Minimum length -->
    <input type="password" minlength="8" required>
    
    <!-- Maximum length -->
    <input type="text" maxlength="50">
    
    <!-- Pattern (regex) -->
    <input type="text" pattern="[0-9]{10}" placeholder="10-digit phone">
    
    <!-- Min and Max for numbers -->
    <input type="number" min="18" max="100">
    
    <!-- Disabled (cannot interact) -->
    <input type="text" value="Cannot edit" disabled>
    
    <!-- Readonly (can see but not edit) -->
    <input type="text" value="Read only" readonly>
    
    <!-- Placeholder (hint text) -->
    <input type="email" placeholder="Enter your email">
    
    <!-- Autofocus (cursor starts here) -->
    <input type="text" autofocus>
    
    <button type="submit">Submit</button>
</form>

🎯 What is Semantic HTML?

<div id="header">...</div>
<div class="article">...</div>
<div id="footer">...</div>
                            

<header>...</header>
<article>...</article>
<footer>...</footer>
                            

🏛️ Semantic Tags

┌─────────────────────────────────────────┐
│  <header>                                │ ← Top section (logo, nav)
│    <nav> Navigation Links </nav>         │ ← Navigation menu
│  </header>                               │
├─────────────────────────────────────────┤
│  <main>                                  │ ← Main content area
│    ├─ <section>                          │ ← Thematic grouping
│    │    <article> Blog Post </article>   │ ← Independent content
│    │    <article> Blog Post </article>   │
│    │  </section>                         │
│    │                                     │
│    └─ <aside> Sidebar </aside>          │ ← Related/side content
│  </main>                                 │
├─────────────────────────────────────────┤
│  <footer>                                │ ← Bottom section
│    Copyright, Links, Contact            │
│  </footer>                               │
└─────────────────────────────────────────┘
                    

                                Structural Tags Example
                                Copy
                            

<!-- Header: Top section of page/section -->
<header>
    <h1>My Website</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
    </nav>
</header>

<!-- Main: Primary content (only one per page) -->
<main>
    <!-- Section: Thematic grouping -->
    <section>
        <h2>Latest News</h2>
        
        <!-- Article: Independent, self-contained content -->
        <article>
            <h3>Article Title</h3>
            <p>Article content...</p>
        </article>
    </section>
    
    <!-- Aside: Related/sidebar content -->
    <aside>
        <h3>Related Links</h3>
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
        </ul>
    </aside>
</main>

<!-- Footer: Bottom section -->
<footer>
    <p>© 2024 My Website. All rights reserved.</p>
</footer>

♿ Accessibility Importance

                        Accessibility Examples
                        Copy
                    

<!-- Skip to main content link (for keyboard users) -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Proper heading structure -->
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

<!-- Descriptive link text -->
<a href="article.html">Read our accessibility guide</a>
<!-- NOT: <a href="article.html">Click here</a> -->

<!-- Form with proper labels -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required aria-required="true">

<!-- Button with clear purpose -->
<button type="submit" aria-label="Submit contact form">Submit</button>

🎵 Audio Element

                        Audio Examples
                        Copy
                    

<!-- Basic Audio -->
<audio src="song.mp3" controls>
    Your browser does not support audio.
</audio>

<!-- Audio with all controls -->
<audio controls autoplay loop muted>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

<!-- Preload options -->
<audio src="song.mp3" controls preload="auto"></audio>
<!-- preload: "none" | "metadata" | "auto" -->

🎬 Video Element

                        Video Examples
                        Copy
                    

<!-- Basic Video -->
<video src="movie.mp4" controls width="640" height="360">
    Your browser does not support video.
</video>

<!-- Video with multiple sources and poster -->
<video controls width="640" height="360" poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

<!-- Video with subtitles/captions -->
<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles_hi.vtt" kind="subtitles" srclang="hi" label="Hindi">
</video>

<!-- All attributes -->
<video 
    src="movie.mp4"
    controls
    autoplay
    loop
    muted
    poster="thumbnail.jpg"
    width="640"
    height="360"
    preload="metadata">
</video>

🎯 Embedding External Media

                        Iframe Examples
                        Copy
                    

<!-- YouTube Video -->
<iframe 
    width="560" 
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

<!-- Google Maps -->
<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy">
</iframe>

<!-- Responsive iframe (maintains aspect ratio) -->
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
    <iframe
        src="https://www.youtube.com/embed/VIDEO_ID"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        frameborder="0"
        allowfullscreen>
    </iframe>
</div>

🚀 Complete Personal Webpage Project

                        Complete Personal Webpage Code
                        Copy
                    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Personal webpage of John Doe">
    <title>John Doe - Personal Webpage</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background: #f4f4f4;
        }
        header {
            background: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        nav {
            background: #444;
            padding: 10px;
            text-align: center;
        }
        nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
        }
        main {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: white;
        }
        section {
            margin-bottom: 30px;
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        input, textarea {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            background: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <header>
        <h1>Welcome to My Personal Webpage</h1>
        <p>Hi, I'm John Doe - Web Developer & Designer</p>
    </header>

    <!-- Navigation Menu -->
    <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#hobbies">Hobbies</a>
        <a href="#contact">Contact</a>
    </nav>

    <!-- Main Content -->
    <main>
        <!-- About Section -->
        <section id="about">
            <h2>About Me</h2>
            <figure>
                <img src="profile.jpg" alt="John Doe profile picture" width="300">
                <figcaption>That's me!</figcaption>
            </figure>
            <p>
                Hello! I'm a passionate web developer with <strong>3 years of experience</strong> 
                in creating beautiful and functional websites. I love learning new 
                technologies and solving complex problems.
            </p>
            <p>
                I graduated from <em>XYZ University</em> with a degree in Computer Science.
                Currently, I work as a freelance developer helping businesses establish 
                their online presence.
            </p>
        </section>

        <!-- Skills Section -->
        <section id="skills">
            <h2>My Skills</h2>
            <h3>Technical Skills</h3>
            <ul>
                <li>HTML5 & CSS3</li>
                <li>JavaScript (ES6+)</li>
                <li>React & Node.js</li>
                <li>Responsive Web Design</li>
                <li>Git & GitHub</li>
            </ul>

            <h3>Soft Skills</h3>
            <ul>
                <li>Problem Solving</li>
                <li>Team Collaboration</li>
                <li>Time Management</li>
                <li>Communication</li>
            </ul>
        </section>

        <!-- Hobbies Section -->
        <section id="hobbies">
            <h2>My Hobbies</h2>
            <ol>
                <li>
                    <strong>Photography</strong> - I love capturing beautiful moments
                </li>
                <li>
                    <strong>Reading</strong> - Especially tech blogs and sci-fi novels
                </li>
                <li>
                    <strong>Gaming</strong> - Strategy and puzzle games
                </li>
                <li>
                    <strong>Traveling</strong> - Exploring new places and cultures
                </li>
            </ol>
        </section>

        <!-- Contact Form Section -->
        <section id="contact">
            <h2>Contact Me</h2>
            <p>Feel free to reach out! I'd love to hear from you.</p>
            
            <form action="/submit" method="POST">
                <label for="name">Your Name:</label>
                <input 
                    type="text" 
                    id="name" 
                    name="name" 
                    placeholder="Enter your name"
                    required>

                <label for="email">Your Email:</label>
                <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    placeholder="your.email@example.com"
                    required>

                <label for="subject">Subject:</label>
                <select id="subject" name="subject" required>
                    <option value="">Select a subject</option>
                    <option value="project">Project Inquiry</option>
                    <option value="job">Job Opportunity</option>
                    <option value="other">Other</option>
                </select>

                <label for="message">Your Message:</label>
                <textarea 
                    id="message" 
                    name="message" 
                    rows="5"
                    placeholder="Write your message here..."
                    required></textarea>

                <button type="submit">Send Message</button>
            </form>
        </section>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>© 2024 John Doe. All Rights Reserved.</p>
        <p>
            Connect with me: 
            <a href="https://github.com/johndoe" target="_blank" style="color: white;">GitHub</a> | 
            <a href="https://linkedin.com/in/johndoe" target="_blank" style="color: white;">LinkedIn</a> | 
            <a href="https://twitter.com/johndoe" target="_blank" style="color: white;">Twitter</a>
        </p>
    </footer>
</body>
</html>