Part 2 Exercises - Front-End Development - Full-Stack Web Development Course

Exercises Overview

Welcome to the Part 2 exercises! These hands-on activities will help you master HTML5 and CSS fundamentals. Complete each exercise to build your skills and confidence in front-end development.

Your Progress

Complete exercises to track your progress

HTML5 Structure Exercises

1

Basic HTML5 Document

Create your first HTML5 document

Beginner

Create a complete HTML5 document with proper structure. Include a title, heading, paragraph, and a list. This exercise will help you understand the basic HTML5 document structure.

Detailed Instructions

Save your file: Save your HTML document with a .html extension (e.g., "my-first-page.html")
Create the basic structure: Start with DOCTYPE, html, head, and body tags
Add meta information: Include charset, viewport, and description meta tags
Create a meaningful title: Use a descriptive title for your page
Add content sections: Include a main heading (h1), several paragraphs, and a list
Use semantic elements: Consider using main, section, or article tags to structure your content
Test your document: Open it in a browser to see how it renders

Complete HTML5 Template with Examples

<!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="My first HTML5 webpage">
    <title>My First HTML5 Page</title>
</head>
<body>
    <main>
        <h1>Welcome to My Website</h1>
        <p>This is my first HTML5 webpage. I'm learning web development and excited to create amazing websites!</p>
        <p>HTML5 provides many new semantic elements that make web pages more accessible and easier to understand.</p>
        <h2>What I'm Learning</h2>
        <ul>
            <li>HTML5 structure and semantics</li>
            <li>CSS styling and layout</li>
            <li>JavaScript interactivity</li>
            <li>Responsive web design</li>
        </ul>
    </main>
</body>
</html>

What to Include

Required elements: DOCTYPE, html, head, body, title, meta charset, meta viewport
Content elements: At least one h1 heading, 2-3 paragraphs, one ordered or unordered list
Semantic structure: Use main, section, or article tags to organize content
Proper nesting: Ensure all tags are properly closed and nested

Challenge Yourself

Add a footer with your name and date (use <footer> tag with copyright information)
Include a link to an external website (use <a href="https://example.com"> with target="_blank" for new tab)
Add an image (use <img src="https://via.placeholder.com/300x200" alt="description"> with proper alt text)
Create a simple navigation menu (use <nav> with <ul> and <li> elements)

Submit Your Work

2

Semantic HTML5 Layout

Build a semantic webpage structure

Intermediate

Create a webpage using semantic HTML5 elements. Include a header, navigation, main content area, sidebar, and footer. Use appropriate semantic tags for each section. This exercise will teach you how to structure web pages semantically for better accessibility and SEO.

Detailed Instructions

Save your file: Save your HTML document with a .html extension (e.g., "semantic-layout.html")
Create the header section: Include your site title/logo and main navigation menu
Build the navigation: Create a navigation menu with at least 4-5 links
Structure the main content: Use main tag with multiple sections or articles
Add a sidebar: Include related content, links, or additional information
Create a footer: Add contact information, social links, or copyright notice
Use proper heading hierarchy: Start with h1, then use h2, h3 for subsections
Add meaningful content: Write actual content, don't just use placeholder text

Complete Semantic Layout Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Semantic Website</title>
</head>
<body>
    <header>
        <h1>My Awesome Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
</header>

    <main>
        <section id="home">
            <h2>Welcome to Our Site</h2>
            <p>This is the main content area where you'll find the most important information about our website.</p>
        </section>

        <section id="about">
            <h2>About Us</h2>
            <p>Learn more about our company and what we do.</p>
        </section>
    </main>

    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Support</a></li>
        </ul>
    </aside>

    <footer>
        <p>© 2024 My Awesome Website. All rights reserved.</p>
        <p>Contact: <a href="mailto:info@example.com">info@example.com</a></p>
    </footer>
</body>
</html>

Required Elements

Header: Must contain h1 title and navigation menu
Navigation: At least 4 navigation links in a list structure
Main content: Use main tag with 2+ sections, each with h2 headings
Sidebar: Include related links or additional information
Footer: Copyright notice and contact information
Semantic structure: Proper use of header, nav, main, aside, footer, section tags

Challenge Yourself

Add breadcrumb navigation below the header (use <nav aria-label="breadcrumb"> with <ol> and <li> elements)
Include a search form in the sidebar (use <form> with <input type="search"> and <button type="submit">)
Create multiple article elements within sections (use <article> tags with <header>, <section>, and <footer>)
Add figure and figcaption elements for images (use <figure> containing <img> and <figcaption> for image descriptions)
Include address element in the footer (use <address> tag for contact information like email and phone)
Add time elements with datetime attributes (use <time datetime="2024-01-01"> for dates and <time datetime="14:30"> for times)

Submit Your Work

3

HTML5 Forms and Inputs

Create interactive forms with modern HTML5

Intermediate

Build a complete HTML5 contact form page using modern form elements. Include various input types like text, email, tel, date, select, checkbox, radio buttons, and textarea. Add proper labels, validation attributes, and organize the form with fieldsets and legends. This exercise will teach you how to create user-friendly, accessible forms.

Detailed Instructions

Save your file: Save your HTML document with a .html extension (e.g., "contact-form.html")
Create the basic HTML structure: Start with DOCTYPE, html, head, and body tags
Add meta information: Include charset, viewport, and description meta tags
Create a meaningful title: Use a descriptive title like "Contact Form"
Build the form structure: Create a form with action="#" and method="post"
Add personal information fields: Include name, email, phone, and date of birth
Include selection fields: Add dropdown menus for country and preferred contact method
Add choice fields: Include radio buttons for gender and checkboxes for interests
Include a message area: Add a textarea for comments or messages
Add form controls: Include submit and reset buttons
Test your form: Open it in a browser and test all input types

Complete HTML5 Form Page Template

<!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="Contact form with HTML5 form elements">
    <title>Contact Form - HTML5 Forms Exercise</title>
</head>
<body>
    <main>
        <h1>Contact Form</h1>
        <p>Please fill out the form below to get in touch with us.</p>

        <form action="#" method="post">

            <fieldset>
                <legend>Personal Information</legend>

                <div>
                    <label for="firstname">First Name:</label>
                    <input type="text" id="firstname" name="firstname" required placeholder="Enter your first name">
                </div>

                <div>
                    <label for="lastname">Last Name:</label>
                    <input type="text" id="lastname" name="lastname" required placeholder="Enter your last name">
                </div>

                <div>
                    <label for="email">Email Address:</label>
                    <input type="email" id="email" name="email" required placeholder="Enter your email address">
                </div>

                <div>
                    <label for="phone">Phone Number:</label>
                    <input type="tel" id="phone" name="phone" placeholder="Enter your phone number">
                </div>

                <div>
                    <label for="birthdate">Date of Birth:</label>
                    <input type="date" id="birthdate" name="birthdate">
                </div>
            </fieldset>

            <fieldset>
                <legend>Additional Information</legend>

                <div>
                    <label for="country">Country:</label>
                    <select id="country" name="country">
                        <option value="">Select a country</option>
                        <option value="us">United States</option>
                        <option value="ca">Canada</option>
                        <option value="uk">United Kingdom</option>
                        <option value="other">Other</option>
                    </select>
                </div>

                <div>
                    <label>Gender:</label>
                    <input type="radio" id="male" name="gender" value="male">
                    <label for="male">Male</label>
                    <input type="radio" id="female" name="gender" value="female">
                    <label for="female">Female</label>
                    <input type="radio" id="other" name="gender" value="other">
                    <label for="other">Other</label>
                </div>

                <div>
                    <label>Interests:</label>
                    <input type="checkbox" id="webdev" name="interests" value="webdev">
                    <label for="webdev">Web Development</label>
                    <input type="checkbox" id="design" name="interests" value="design">
                    <label for="design">Design</label>
                    <input type="checkbox" id="marketing" name="interests" value="marketing">
                    <label for="marketing">Marketing</label>
                </div>

                <div>
                    <label for="message">Message:</label>
                    <textarea id="message" name="message" rows="5" cols="50" placeholder="Enter your message here..."></textarea>
                </div>
            </fieldset>

            <div>
                <button type="submit">Submit Form</button>
                <button type="reset">Reset Form</button>
            </div>
        </form>
    </main>
</body>
</html>

Required Form Elements

Text inputs: First name, last name (required)
Email input: Email address (required, with email validation)
Tel input: Phone number (optional)
Date input: Date of birth (optional)
Select dropdown: Country selection
Radio buttons: Gender selection
Checkboxes: Multiple interests selection
Textarea: Message/comments field
Form controls: Submit and reset buttons
Organization: Use fieldsets and legends to group related fields

Challenge Yourself

Add a file upload input for profile picture (use type="file" with accept="image/*")
Include a range input for age or rating (use type="range" with min and max attributes)
Add a color picker input (use type="color" for selecting colors)
Include a search input field (use type="search" with placeholder text)
Add a URL input for website (use type="url" for web address validation)
Include a number input for quantity (use type="number" with min and step attributes)
Add a time input for preferred contact time (use type="time" for time selection)

Submit Your Work

CSS Styling Exercises

4

CSS Fundamentals

Apply basic CSS styling

Beginner

Take your HTML5 document from Exercise 1 and add CSS styling. Change colors, fonts, spacing, and add borders to make it visually appealing. This exercise will teach you how to use CSS selectors, properties, and values to style your HTML content.

Detailed Instructions

Create a CSS file: Create a separate styles.css file and link it to your HTML
Style the body: Set a background color, font family, and basic spacing
Style headings: Use different colors, sizes, and alignments for h1, h2, h3
Style paragraphs: Set line height, margins, and text color for better readability
Style lists: Add custom bullets, spacing, and hover effects
Add borders and shadows: Use border, border-radius, and box-shadow properties
Create hover effects: Add interactive states for links and buttons

Complete CSS Styling Template

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    padding: 20px;
}

h1 {
    color: #2563eb;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

h2 {
    color: #1e40af;
    font-size: 1.8rem;
    margin: 1.5rem 0 1rem 0;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #4b5563;
}

ul, ol {
    margin: 1rem 0 1rem 2rem;
    padding: 0.5rem 0;
}

li {
    margin-bottom: 0.5rem;
    color: #6b7280;
}

a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

Required CSS Properties

Typography: font-family, font-size, font-weight, line-height, text-align
Colors: color, background-color for text and backgrounds
Spacing: margin, padding for element spacing
Borders: border, border-radius for element borders
Effects: text-shadow, box-shadow for visual depth
Interactivity: :hover pseudo-class for interactive elements
Layout: display, width, height for element sizing

Advanced Styling Challenges

Create a gradient background for the body (use background: linear-gradient(to right, #667eea, #764ba2) for a beautiful gradient)
Add custom bullet points for lists using ::before pseudo-element (use li::before { content: "→ "; color: #3b82f6; })
Create a card-like design for your content sections (use border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px;)
Add smooth transitions for all interactive elements (use transition: all 0.3s ease; on hover states)
Implement a dark/light theme toggle (use CSS custom properties with --bg-color and --text-color)
Add CSS animations for page load effects (use @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } })
Create a responsive design that works on mobile devices (use @media (max-width: 768px) { /* mobile styles */ })

Color Scheme Suggestions

Professional: Blues (#2563eb, #1e40af, #1e3a8a)
Warm: Oranges (#f97316, #ea580c, #c2410c)
Nature: Greens (#16a34a, #15803d, #166534)
Modern: Grays (#6b7280, #4b5563, #374151)
Creative: Purples (#8b5cf6, #7c3aed, #6d28d9)

5

CSS Box Model and Layout

Master spacing and positioning

Intermediate

Create a card-based layout using CSS box model properties. Build multiple cards with proper spacing, borders, and shadows. Use margin, padding, and border properties effectively.

Tips

Use box-sizing: border-box for predictable sizing
Create cards with consistent spacing using margin and padding
Add subtle shadows with box-shadow property
Use border-radius for rounded corners

Card Layout CSS

.card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

6

Flexbox Layout

Create flexible layouts with CSS Flexbox

Intermediate

Build a responsive navigation bar and a flexible card grid using CSS Flexbox. Learn how to control alignment, distribution, and wrapping of flex items.

Tips

Use display: flex to create flex containers
Control alignment with justify-content and align-items
Use flex-wrap for responsive behavior
Experiment with flex-grow and flex-shrink

Flexbox Layout CSS

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

Responsive Design Exercises

7

CSS Media Queries & Responsive Design

Make your layouts responsive

Intermediate

Take your existing layout and make it responsive using CSS media queries. Ensure it looks great on mobile, tablet, and desktop devices. This exercise will teach you mobile-first design principles and how to create adaptive layouts.

Detailed Instructions

Mobile-first approach: Start with mobile styles as your base CSS
Set up breakpoints: Use min-width media queries for progressive enhancement
Adjust typography: Scale font sizes appropriately for each screen size
Modify layouts: Change from single-column to multi-column layouts
Optimize navigation: Convert horizontal nav to mobile-friendly formats
Adjust spacing: Modify margins, padding, and gaps for different screen sizes
Test thoroughly: Use browser dev tools to test various screen sizes

Complete Responsive CSS Template

/* Mobile-first base styles (default) */
.container {
    max-width: 100%;
    padding: 1rem;
    margin: 0 auto;
}

.nav-menu {
    flex-direction: column;
    gap: 0.5rem;
}

.nav-menu li {
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

h1 {
    font-size: 1.8rem;
    text-align: center;
}

h2 {
    font-size: 1.4rem;
}

.content-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Tablet styles (768px and up) */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
    }

    .nav-menu {
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
}

    .nav-menu li {
        width: auto;
        border-bottom: none;
    }

    h1 {
        font-size: 2.2rem;
}

    .content-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
}

    .sidebar {
        display: block;
        margin-top: 2rem;
}
}

/* Desktop styles (1024px and up) */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        padding: 3rem;
}

    h1 {
        font-size: 2.8rem;
}

    .main-layout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 3rem;
}

    .content-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
}

    .sidebar {
        position: sticky;
        top: 2rem;
}
}

/* Large desktop styles (1440px and up) */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
}

    .content-grid {
        grid-template-columns: repeat(4, 1fr);
}
}

Required Responsive Features

Mobile-first CSS: Base styles for mobile devices
Breakpoint system: At least 3 breakpoints (mobile, tablet, desktop)
Flexible navigation: Mobile hamburger menu or stacked navigation
Responsive typography: Font sizes that scale with screen size
Adaptive layouts: Single-column to multi-column grid systems
Touch-friendly elements: Appropriate button sizes for mobile
Optimized spacing: Margins and padding that work on all devices

Advanced Responsive Challenges

Create a mobile-first hamburger navigation menu
Implement CSS Grid with auto-fit for responsive card layouts
Add responsive images with srcset and sizes attributes
Create a responsive data table that stacks on mobile
Implement a responsive sidebar that becomes a dropdown on mobile
Add responsive typography using clamp() function
Create a responsive gallery with different layouts per breakpoint

Common Breakpoints

Mobile: 320px - 767px (default styles)
Tablet: 768px - 1023px (@media min-width: 768px)
Desktop: 1024px - 1439px (@media min-width: 1024px)
Large Desktop: 1440px+ (@media min-width: 1440px)
Landscape Mobile: @media (orientation: landscape) and (max-height: 500px)
High DPI: @media (-webkit-min-device-pixel-ratio: 2)

8

CSS Grid Layout

Create complex responsive grids

Advanced

Build a responsive photo gallery or product grid using CSS Grid. Learn how to create complex layouts that automatically adapt to different screen sizes.

Tips

Use grid-template-columns with repeat() function
Implement auto-fit or auto-fill for responsive columns
Use grid-gap for consistent spacing
Combine with media queries for fine control

CSS Grid Template

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

Complete Page Building Exercise

★

Build a Complete Working Page from Start to Finish

Master the complete web development workflow

Advanced

This comprehensive exercise will guide you through building a complete, professional webpage from scratch. You'll learn the entire development process: planning, HTML structure, CSS styling, responsive design, and testing. By the end, you'll have a fully functional website that showcases your skills!

Project Overview

We'll build a Personal Blog/Portfolio Website with the following features:

Responsive navigation with mobile menu
Hero section with call-to-action
About section with personal information and profile icon
Portfolio/Projects showcase with project icons
Contact form
Footer with social links
Mobile-first responsive design
Font Awesome icons instead of images for better performance

Ready to Start?

This is a comprehensive exercise with detailed step-by-step instructions, complete code templates, and testing guidelines.

View Complete Exercise Guide

The complete exercise includes detailed HTML templates, CSS code, responsive design guidelines, and testing checklists.

Bonus Challenges

Take Your Skills Further

Ready for more? Try these challenges to push your HTML5 and CSS skills to the next level.

Challenge 1: Personal Portfolio Website

Create a complete personal portfolio website using semantic HTML5 and advanced CSS. Include animations, hover effects, and a responsive design.

Challenge 2: CSS Animations and Transitions

Build an interactive interface with CSS animations, transitions, and transforms. Create smooth hover effects and loading animations.

Challenge 3: Advanced Layout Techniques

Combine Flexbox and Grid to create complex layouts. Build a dashboard or admin panel with multiple content areas and navigation.

Challenge 4: CSS Custom Properties

Use CSS custom properties (variables) to create a themeable design system. Implement dark/light mode switching.

Ready for the Next Level?

Great job completing the HTML5 and CSS exercises! You're now ready to add interactivity with JavaScript.

Continue to Part 3: JavaScript & Interactivity Back to Part 2 Content