Create an easy-to-use overview of all our accelerators (repositories from GitHub).
Backbase wants to show an updated overview of all available accelerators on their official website. The reason for this initiative is to address the current situation on GitHub, where outdated files are still present and no longer used.
By offering an up-to-date overview, backbase ensures clarity and accessibility, so that users can easily find relevant accelerators.
The target group of the Accelerator Portal consists of companies and individuals interested in obtaining more information or examples of the apps and services that Backbase offers.
Mobile Version:
Desktop Version:
Select Menu:
Dropdown menu:
Link to my website if you want to take a look: Backbase Accelerator portal
The website is designed with a mobile-first approach, focusing on the mobile user experience. Various micro-interactions are integrated to improve interaction with the website. For example, a hamburger menu has been added to the header, allowing the user to access different sections of the site.
Another addition is the selection item, which should allow users to filter. However, this function does not yet work.
The integration of these interactive elements contributes to an improved user experience.
Success:
- Micro-interaction -> dropdown/modal menu
- Select form
- Mobile & desktop version
- All content is there
Did not succeed:
- Blur background when dropdown menu is visible
- Layout of the cards are not formatted like the design
- Sort by filter not working
- Ipad version
When creating this assignment I tried to take the semantics of the code into account. HTML:
-
Body
-
Header
-
Modal/menu (div, button, a, p, i)
-
Label -> select, options
-
Buttons
-
Section
-
Ul -> li (i, p, h2, a)
-
Footer (img, p)
CSS:
- Buttons
- Menu
- Header
- Cards
- Modal
- Sticky menu
- @media
- Footer
JS:
- AddEventListener
- QuerySelector
- Function
This project is licensed under the terms of the MIT license.