Skip to main content

Phase 9 Exercises: CSS/JS Integration & Interview 💻

Mentor's Note: HTML doesn't live alone — it works with CSS and JavaScript to create real web experiences. These exercises teach you how HTML integrates with its sibling technologies, and the Hard challenge prepares you for the high-pressure environment of technical interviews. Good luck!

📍 Prerequisites​

Before attempting these exercises, complete these lessons:

🎯 Exercise Flow​

🔰 Starter Challenge: Style a Bio Page Three Ways​

Title​

Style a Bio Page Using Inline CSS → Internal Style → External CSS

Description​

Take a plain HTML bio page and apply styling using three different CSS integration methods in sequence. First, style elements using inline style attributes. Then, move the styles to an internal <style> block in the <head>. Finally, extract all styles into an external styles.css file linked via <link>. This exercise teaches the progression from quick-and-dirty inline styles to maintainable external stylesheets — and when each approach is appropriate.

Learning Objectives​

  • Apply inline CSS using the style attribute on elements
  • Create an internal stylesheet using <style> in the <head>
  • Create and link an external CSS file using <link rel="stylesheet">
  • Understand the cascade and specificity differences between the three methods
  • Know when to use each method (prototyping vs. production)
  • Verify the external stylesheet correctly overrides internal and inline styles based on specificity rules

Expected Output​

Three versions of the same bio page:

  • Version 1 (inline): All styles in style attributes on individual HTML elements
  • Version 2 (internal): All styles in a <style> block in the <head>
  • Version 3 (external): All styles in a separate styles.css file, linked from the HTML
  • Each page looks visually identical (same colors, fonts, spacing)
  • A brief note at the bottom of each page explaining which method was used and why

⭐ Medium Challenge: Add JavaScript Interactivity​

Title​

Add Interactivity with JavaScript — Button Click, Form Validation, Image Gallery

Description​

Take an HTML page and add JavaScript to make it interactive. Implement three features: (1) a button that toggles dark/light mode by adding/removing a CSS class, (2) a contact form with client-side validation (required fields, email format, character limits), and (3) a simple image gallery with thumbnails that display the full-size image when clicked. All JavaScript must be in a separate external file linked with proper <script> placement.

Learning Objectives​

  • Link an external JavaScript file using <script src=""> with defer
  • Use document.querySelector() and document.getElementById() to select elements
  • Add event listeners with addEventListener() for click, submit, and input events
  • Toggle CSS classes using classList.toggle()
  • Validate form fields (required, email pattern, minlength)
  • Prevent default form submission with event.preventDefault()
  • Manipulate DOM content and attributes (src, alt, display)

Expected Output​

A browser page showing:

  • A "Toggle Dark Mode" button that switches the page theme
  • A contact form that validates on submit:
    • Name field is required
    • Email field validates proper email format
    • Message field has a minimum character count
    • Error messages displayed next to invalid fields
  • An image gallery with 3-4 thumbnail images
    • Clicking a thumbnail displays the full-size image in a larger container
    • Clicking the large image closes it or resets to a default state
  • All JavaScript in an external script.js file
  • The <script> tag uses defer and is placed in the <head>

🏆 Hard Challenge: Mock Interview — Build from a Design Brief​

Title​

Mock Interview — Build a Complete Semantic Page from a Design Brief Under Time Pressure

Description​

Simulate a real technical interview scenario. You will receive a design brief describing a webpage that needs to be built from scratch using semantic HTML, CSS integration, and basic JavaScript. The challenge must be completed within a 45-minute time limit. Focus on semantic correctness, accessibility, clean code structure, and meeting all requirements in the brief — just like a real coding interview.

Learning Objectives​

  • Read and interpret a design brief accurately
  • Plan and execute a complete HTML page under time pressure
  • Prioritize requirements: semantic HTML > accessibility > styling > interactivity
  • Write clean, well-structured, commented code
  • Demonstrate HTML, CSS, and JavaScript integration in one page
  • Practice time management during a coding assessment

Sample Design Brief (use for practice)​

Build a "Featured Recipe" landing page

Content Requirements:

  • Recipe name: "Grandma's Apple Pie"
  • Prep time: 30 mins | Cook time: 45 mins | Serves: 8
  • Ingredients list (6+ items, unordered)
  • Steps list (4+ steps, ordered)
  • A featured image placeholder
  • A "Save Recipe" button

Technical Requirements:

  • Semantic HTML5 (header, main, section, footer)
  • External CSS file for all styles
  • External JavaScript with defer for interactivity
  • ARIA landmarks and labels
  • Page must be fully responsive (no horizontal scroll)
  • "Save Recipe" button toggles a "Saved" state
  • Lighthouse Accessibility score of 85+

Mock Interview Checklist​

  • Read the brief completely before writing any code (2 minutes)
  • Plan your HTML structure (3 minutes)
  • Write the semantic HTML skeleton (10 minutes)
  • Add CSS for layout and styling (15 minutes)
  • Add JavaScript for interactivity (10 minutes)
  • Test and validate (5 minutes)
  • Review against requirements (2 minutes)
  • Submit with time to spare (3 minutes buffer)

Expected Output​

A single responsive landing page that:

  • Matches all requirements in the design brief
  • Uses semantic HTML5 elements correctly
  • Links to an external CSS file and external JS file (with defer)
  • Includes ARIA attributes for accessibility
  • Has a working "Save Recipe" toggle button
  • Is responsive and looks good on desktop and mobile viewports
  • Scores 85+ on Lighthouse Accessibility
  • Passes W3C validation with zero errors

💡 Tips for Success​

  • In mock interviews, READ THE BRIEF TWICE before coding — missing requirements costs points
  • Start with HTML structure, then CSS, then JavaScript — never the reverse
  • Use defer for all production <script> tags to avoid blocking rendering
  • For form validation, combine HTML5 attributes (required, pattern, minlength) with JavaScript for the best UX
  • Practice the mock interview with a timer to build speed and confidence
  • Keep a "cheatsheet" of common patterns: dark mode toggle, form validation, image gallery

← Back to HTML Exercises