Developer: Robin Bosch
Designed by Frontend Mentor
- The user should be able to view the page correctly on the most common devices and on every screen size.
- Hover states should be reflected accurately.
- Calculations need to be correct.
The following designs were given to build the project:
The Desktop design theme 1 with a shown width of 1440px
The Desktop design theme 2 with a shown width of 1440px
The Desktop design theme 3 with a shown width of 1440px
Hover states for theme 1
The Mobile design with a shown width of 375px with theme 1
- Getting the calculator to work correctly
- Have switching between themes and selecting the theme based on user preference
- Making sure the text sizes are correct according to the design
- The important difference between CSS variables and SCSS variables.
- Theming apps and how to get the user theme preference from the API.
- First time deploying on vercel (very easy and intuitive)
- HTML
- CSS
- TypeScript
- React (Vite)
- SASS
HTML validation was done with the W3 HTML validator and came back with no warnings.
CSS validation was done with the W3 CSS validator and came back with warnings regarding the variables which are currently not checked and the missing quotes around the font name which get lost during the build.
Accessibility was checked with the browser extension of the WAVE validator and came back with no warnings.
The website was tested on the following devices:
- Windows 11 PC (Screen resolution: 2560x1440)
- Xiaomi MI 9 with Android 11 (Screen resolution: 1080x2280)
- Xiaomi Pad 6 with Android 12 (Screen resolution: 1800x2880)
Other screen resolutions were tested in the browser with dev tools from 2560x1440 down to 320x568.
Two helpful reference guides I use:
- Frontend mentor - For providing me with this challenge and the designs.
- Reset CSS from Andy Bell
This project is published under the MIT license.
The challenge itself is excluded from this license.
License