Frontend Mentor - QR code component
This is a solution to the Product QR code component challenge on Frontend Mentor, which aims to help developers improve their coding skills by building realistic projects.
Overview
Users should be able to:
- View the optimal layout depending on their device's screen size.
- See hover and focus states for interactive elements.
Links
- Challenger URL: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H
- Solution URL: https://github.com/Marilzon/qrcode-component
- Live Site URL: https://marilzon.github.io/qrcode-component/
My Process
To complete this challenge, I followed these steps:
- Created a clear structure for the component using semantic HTML5 markup.
- Used BEM methodology to create CSS tags with clear and concise names.
- Added CSS properties and definitions for fluid and responsive attributes.
Built With
- Semantic HTML5 markup
- CSS custom variables
- Flexbox
- CSS Grid
What I Learned
Through this project, I learned how to:
- Create a responsive and interactive product preview card component.
- Use BEM methodology to write clean and maintainable CSS code.
Continued Development
There are a few areas where this component could be further improved:
- Add more detailed hover and focus states for interactive elements.
- Include additional styles for different screen sizes and device types.
Useful Resources
Here are some helpful resources that I used while working on this project: