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.
HTML Basics
Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page.
CSS Basics
Learn the basics of CSS, one of the core technologies for designing and building websites and applications.
CSS Flexbox Layout
Flexbox is a set of CSS properties that give you a flexible way to lay out content.
Mobile-First CSS Layout
Practice using CSS layout techniques such as a CSS Reset with Normalize, a layout wrapper, a sticky footer, and centered content with a full-width header.
CSS Selectors
Besides the common ways to select elements with type, ID and class selectors, we're able to target elements based on their attributes, position in the HTML document, even their relation to other elements.
CSS Grid Layout
CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser.
JavaScript Basics
In this course, you'll learn the fundamental programming concepts and syntax of the JavaScript programming language.
Interacting with the DOM
Along with selecting DOM elements in JavaScript we can also write code that gives elements behavior. In this course we will first explore how to watch for interaction and respond using the method addEventListener.
-
0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
-
1
Use CSS Flexbox or Grid to layout the elements on the page.
-
2
Use semantic elements to structure the page, ensuring accessibility and SEO optimization.
-
3
Use CSS variables to store the color palette.
-
4
Use JavaScript to toggle the light and dark modes.
-
5
Extra Challenge: Make the page mobile and tablet responsive.
-
6
Extra Challenge: Use Font Awesome to add icons to the page instead of the provided PNG files.