This is a solution to the Browser Extensions Manager UI challenge on Frontend Mentor. The challenge is to build a responsive user interface for managing browser extensions using HTML, CSS, and JavaScript.
The project consists of a browser extensions manager UI that allows users to toggle, filter, and manage extensions. The layout is responsive and adapts to different screen sizes.
- Toggle extensions between active and inactive states.
- Filter extensions by active or inactive status.
- Remove extensions from the list.
- Select a color theme for the UI.
- Responsive design for both mobile and desktop views.
- Interactive hover and focus states for all interactive elements.
Eventhough this project would've been easily created with React, making it in Vanilla JS gave me a first-hand experience of the under-the-hood operations of React such as re-rendering with state change
- Semantic HTML5 markup
- CSS custom properties
- JavaScript for interactivity
- Flexbox and Grid for layout
- Mobile-first workflow
The design includes:
- Neutral 900:
hsl(227, 75%, 14%) - Neutral 800:
hsl(226, 25%, 17%) - Neutral 700:
hsl(225, 23%, 24%) - Neutral 600:
hsl(226, 11%, 37%) - Neutral 300:
hsl(0, 0%, 78%) - Neutral 200:
hsl(217, 61%, 90%) - Neutral 100:
hsl(0, 0%, 93%) - Neutral 0:
hsl(200, 60%, 99%)
- Red 400:
hsl(3, 86%, 64%) - Red 500:
hsl(3, 71%, 56%) - Red 700:
hsl(3, 77%, 44%)
- Light Gradient:
linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%) - Dark Gradient:
linear-gradient(180deg, #040918 0%, #091540 100%)
- Font size (paragraph): 16px
- Family: Noto Sans
- Weights: 400, 500, 700
- Frontend Mentor - @boompow
Designs provided by Frontend Mentor.
Special thanks to the Frontend Mentor community for their support and feedback.