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.
The following designs were given to build the project:
The Desktop design with a shown width of 1440px
Intelligent Tab Design
Share your bookmarks Tab Design
Hover states on desktop
The Mobile design with a shown width of 375px
Navigation menu on mobile
- Getting the interactive elements to work
- Having the blue background pills work on all screen sizes
- Working with two different navigation menus
- First time making a FAQ section in vanilla JavaScript
- First time making a carousel in vanilla JavaScript
- HTML
- CSS
- JavaScript
All was written in plain HTML, CSS and JavaScript.
- Fontawesome
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.
Accessibility was checked with the browser extension of the WAVE validator and came back with contrast errors for the text which is given from the design and one label error for the email input which is not needed.
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