Solution for a challenge from frontendmentor.io
This component has some interesting CSS challenges in the design. If you're looking to test your CSS skills, this will be a great project for you! The main challenge is to build out this data storage component and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
The optimal layout depending on the used device's screen size should be shown.
This challenge was completed without access to the Figma design file.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Desktop-first workflow
- Media query's
During this challenge I practiced the use of Flexbox and Media Query's. I also took a different approach to sizing the different elemenst by make more use of padding. The "speech bubble" was an interessting part of this challenge and the first time I tried to position something like it by using position:releative. Pretty happy with the endresult.
- Perfect Pixel - Great Chrome(also available for other browsers) extension that helps to match the pixels of a design image.
- Debug CSS - Another great Chrome(and other browsers) extension for a quick view of all your elements by outlining them.
- MDN Web Docs - The Mozilla Web Docs are a treasure trove of infromation on CSS and more.