This is a single interactive informational webpage that provides users with a selection of cars to learn more about.
The webpage has two areas:
- User Interface – A selection of four vehicles that the user can interact with.
- Display Area – When the user selects a vehicle, information about it is displayed here.
The minimalist design helps to accentuate the main feature of this webpage: a light and dark dual-mode color scheme. The webpage is automatically set to light/dark mode based on the user’s device settings. For example, on a Windows operating system, go to Settings --> Personalization --> Colors --> choose/toggle between light and dark default app mode to see effect.
- Light mode and dark mode, set by the user’s device settings.
| Light Mode | Dark Mode |
|---|---|
 |
 |
The webpage is designed and coded to be WCAG 2.0 Level AA compliant. Text contrast also meets Level AAA. I used a web accessibility evaluation tool to double check my work for accuracy.
The webpage is fully responsive, utilizing grid layout to resize at different breakpoints.
- HTML
- CSS
- Bootstrap
- jQuery
- I opted to use this opportunity to apply jQuery, as opposed to plain JavaScript and the Fetch API, so that I learn how to work with legacy technology to support legacy projects that may still run on an older JavaScript library.
- I also used this opportunity to practice applying custom CSS properties. The dual-color mode fits the use case for applying custom properties, which allow a value to be stored in one place and referenced in two places (i.e., one for light mode and one for dark mode). This brings a bit of variable usage to CSS.
- GitLab