Solution for a challenge from frontendmentor.io
This is a perfect challenge to test your layout skills. The card layout doesn't shift, so it's also great for those that haven't dived into responsive websites yet! The main challenge is to build out this profile card 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.
Your users should be able to:
- View the optimal layout depending on their device's screen size
I do not have access to the Figma sketch so the design is not pixel perfect.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Desktop-first workflow
The project was fun to build and did not require a lot of experience. The hardest part was making the background images fit the design requirements and make them responsive. I made additional media queries to change sizes however I believe there should be better ways to optimize images. Probably it was a little harde than usual as there are two of them and I haven't worked with backgrounds that contain over one image.
- Figma - Paste your design image to check the size of containers, width, etc.
- Perfect Pixel - Awesome Chrome extension that helps you to match the pixels of the provided design.
A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!