Heads up! To embark on an Adventure or participate further, sign in with your Treehouse account or enroll in your free, 7-day trial.

Treehouse Code Adventures > UI with a Dark Mode

UI with a Dark Mode

UI with a Dark Mode

A UI with a Dark and Light Modes is an HTML and CSS-heavy code adventure with a very small amount of JavaScript to toggle the light and dark modes respectively.

Created: 11/06/2023 by Dustin Usey

Skill level: intermediate

Topics used: HTML CSS JavaScript

Estimated completion time: 5 Hours

    Create the landing page for the fictitious "Lightz.js", a cutting-edge web development framework. The design emphasizes minimalistic aesthetics, intuitive navigation, and clear call-to-action elements.

  1. 0

    To begin, click "Start Adventure" at the top of the page and then download your starter files.

  2. 1

    Use CSS Flexbox or Grid to layout the elements on the page.

  3. 2

    Use semantic elements to structure the page, ensuring accessibility and SEO optimization.

  4. 3

    Use CSS variables to store the color palette.

  5. 4

    Use JavaScript to toggle the light and dark modes.

  6. 5

    Extra Challenge: Make the page mobile and tablet responsive.

  7. 6

    Extra Challenge: Use Font Awesome to add icons to the page instead of the provided PNG files.