This project is based on a challenge for Front End Mentor. The challenge was to create a landing page for a company called Manage. The design files were provided and the aim was to match the design and the features as close as possible.
- I undertook this project in order to solidify my knowledge about working with plain CSS
- In particular I wanted to learn how to create a design system with custom properties and utility classes
- Another focus was to build the page mobile-first with accessibility in mind
- I strongly followed a YouTube tutorial from Kevin Powell to learn how he is tackling different challenges within CSS with modern and out-of-the-box solutions
- Vite 3.0.0
- a11y-slider
- Displaying information about a company
- Desktop / mobile versions
- Accessible slider for displaying recommendations
Live demo here.
The dependencies which are necessary to run this app can be found in the package.json file.
- Clone the repo
- Navigate to the project folder in the terminal and install the necessary NPM dependencies
npm install
- Run the app typing
npm run dev
in your terminal and visit localhost:3000 in your browser.
- Building an application with Vite
- Creating and working with a design system based on own custom properties and utility classes
- Implementing and working with SVGs
- Making design decisions which help in the long-term (make adjusting styles in the future easier)
- Creating blobs via pseudo-elements and bringing them in via background-image or content
- Creating an accessible slider / carousel with the help of an external library (making decisions abount creating on your own or importing via library)
The project is finished.
- This project was based in parts on this tutorial from Kevin Powell.