Problem 1: Interactive Resume Website

Objective:

Build a one‑page interactive resume that highlights your skills, experience, and education while demonstrating semantic HTML and clean CSS styling.

Requirements:

HTML:
- Use a basic document structure with semantic tags such as <header>, <nav>, <main>, <section>, and <footer>.
- Include an “About Me” section with a profile image, a skills list (using <ul> or <ol>), and a work history section (using <article> or <section>).
- Add links to download your resume (PDF) and to your social media profiles.
CSS:
- Apply custom typography (import a Google Font for headings and body text).
- Use margins, padding, and borders to neatly space out sections.
- Style links and images to match a professional color scheme using named colors, hex codes, or RGB values.

Expected Outcome:

A clean, interactive resume page that uses semantic structure and visually appealing CSS styling while offering clear navigation and downloadable content.

Problem 2: Personal Portfolio Home Page

Objective:

Create a multi‑page personal portfolio website showcasing your work and projects.

Requirements:

HTML:
- Use a basic document structure with semantic elements (e.g., <header>, <nav>, <main>, <section>, <footer>).
- Include an image (such as a profile picture) and a list of projects with brief descriptions.
- Use relative links to navigate between pages (e.g., Home, About, Contact).
CSS:
- Apply a consistent color scheme and custom typography (via a Google Font).
- Style the navigation and content sections using margins, padding, and appropriate selectors.

Expected Outcome:

A professional, multi‑page portfolio that demonstrates organized structure, clear navigation, and cohesive CSS styling.

Problem 3: Accessible Contact Form

Objective:

Design a contact page featuring a fully accessible form.

Requirements:

HTML:
- Create a form with text inputs (e.g., Name, Email) and a <textarea> for messages.
- Use <label> elements and include HTML5 validation attributes (like required).
- Incorporate ARIA attributes (e.g., aria-required="true") to enhance accessibility.
CSS:
- Use the box model to style the form inputs and ensure consistent spacing.
- Apply clear typography and a simple color scheme for readability.

Expected Outcome:

An accessible, well‑styled contact form that demonstrates proper form markup, validation, and CSS layout techniques.

Problem 4: Product Catalog Table

Objective:

Develop a product catalog page that displays products in an HTML table.

Requirements:

HTML:
- Build a table using <table>, <thead>, <tbody>, and optionally <tfoot> to list product details (e.g., Name, Price, Availability).
- Include product images using <img> tags within table cells.
- Utilize semantic tags to provide context (e.g., <caption> for the table title).
CSS:
- Style the table with borders, padding, and margins to enhance readability.
- Apply background colors or gradients to header cells for visual appeal.
- Use selectors to target table elements effectively.

Expected Outcome:

A neatly organized product catalog that uses a semantic table layout and is styled with clear, consistent CSS.

Problem 5: Responsive Navigation Menu

Objective:

Create a fixed navigation bar that works across multiple pages.

Requirements:

HTML:
- Build a navigation menu using semantic elements (e.g., <nav> within <header>), including links such as Home, About, Services, and Contact.
- Structure links for a multi‑page website using relative paths.
- Include accessibility features (e.g., ARIA roles or labels).
CSS:
- Use position: fixed; to keep the navigation bar visible on scroll.
- Style the menu with custom typography, colors, and spacing (using margins/padding).
- Add hover effects using pseudo‑classes.

Expected Outcome:

A responsive, fixed navigation bar that remains at the top of the viewport, offering accessible, well‑spaced links across pages.

Problem 6: Blog Post with Embedded Media

Objective:

Design a blog post page that features an article with text, images, and embedded media.

Requirements:

HTML:
- Use semantic elements such as <article>, <header>, <section>, and <footer> to structure the blog post.
- Include an image and an embedded video (or placeholder) within the content.
- Add links to related posts or external resources.
CSS:
- Apply typography rules (font-family, font-weight, text-align) for readability.
- Use CSS gradients or background images to style headings or sections.
- Manage spacing with proper use of the box model.

Expected Outcome:

A well‑structured blog post that integrates text, images, and media, with clear typography and visually engaging background styling.

Problem 7: Interactive Image Gallery with Hover Effects

Objective:

Build an interactive image gallery where each image reveals an overlay caption on hover.

Requirements:

HTML:
- Create a grid of gallery items using either <ul>/<li> or <div> elements.
- Each gallery item should include an image and a hidden caption.
CSS:
- Use background-image (or <img>) and CSS transitions to reveal a semi‑transparent gradient overlay on hover.
- Position the caption absolutely within the gallery item so it centers on hover.
- Apply smooth transitions using pseudo‑classes and selectors.

Expected Outcome:

An engaging image gallery that uses hover effects to reveal captions, demonstrating advanced CSS transitions, positioning, and layout techniques.

Problem 8: Multi‑Page Business Website

Objective:

Develop a small business website with multiple pages (e.g., Home, Services, Testimonials, Contact).

Requirements:

HTML:
- Organize the site with separate HTML files and a clear folder structure (e.g., for images and CSS).
- Use semantic elements (<header>, <main>, <footer>) and structured navigation.
- Incorporate lists (for services or testimonials) and images to enrich content.
CSS:
- Apply consistent styling across pages using an external stylesheet.
- Use background images, gradients, and custom typography to reflect the business’s branding.
- Ensure responsiveness using media queries.

Expected Outcome:

A coherent multi‑page business website that demonstrates organized file structure, semantic HTML, and advanced CSS styling.

Problem 9: Modal Popup for Newsletter Signup

Objective:

Create a modal popup that invites users to sign up for a newsletter.

Requirements:

HTML:
- Design a modal overlay using a <div> that covers the viewport.
- Inside the modal, include a simple newsletter signup form (e.g., an input for the email and a submit button) with proper <label> elements.
- Use ARIA attributes to enhance accessibility.
CSS:
- Use position: fixed; for the overlay and center the modal content using absolute positioning or flexbox with transform: translate(-50%, -50%).
- Style the form using the box model (padding, border, margin) and apply a gradient or custom colors.
- Add smooth transition effects for the modal’s appearance/disappearance.

Expected Outcome:

An attractive, accessible modal popup that overlays the main content and includes a fully styled newsletter signup form, demonstrating your skills in positioning, box model, and accessibility.

Problem 10: Dashboard with Fixed Sidebar and Content Area

Objective:

Build a dashboard layout featuring a fixed sidebar and a main content area that adjusts responsively.

Requirements:

HTML:
- Create a dashboard with a sidebar (using <aside> or a <div>) and a main content area (using <main>).
- Use semantic HTML elements to structure the header, sidebar, content, and footer.
- Include a list of navigation links in the sidebar and sample content (e.g., a table or list) in the main area.
CSS:
- Use position: fixed; for the sidebar to keep it visible as the user scrolls.
- Offset the main content with appropriate margins so it does not overlap the fixed sidebar.
- Apply the box model to style elements with padding, borders, and margins.
- Use custom typography and a cohesive color scheme for both the sidebar and main content.
- Implement media queries to adjust the layout on smaller screens (e.g., collapsing the sidebar into a top menu).

Expected Outcome:

A functional dashboard layout with a fixed sidebar and a responsive main content area that demonstrates advanced CSS positioning, layout techniques, and consistent styling.

Review Problems Of everything we've learned so far