This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
In this challenge, I replicated the design of a product preview card component using HTML and crude CSS properties to make the style and design.
In the challenge, users will be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Desktop View
- Mobile View
- Solution URL: View solution
- Live Site URL: View live site
To kickstart the development process, I began by creating the HTML markup for the card component.
Moving on to the stylesheet, I took a systematic approach to styling the component. I focused on one component at a time, ensuring its visual appearance and functionality before moving on to the next.
I also added media queries for the desktop view responsiveness
Throughout the process, I maintained a keen eye for aesthetics and user experience, striving to create a visually pleasing and intuitive QR code component. By following this systematic and meticulous approach, I ensured that every aspect of the design was thoughtfully implemented.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
In this challenge, I learnt center items in a box with grid and place-items properties. Below is the code snippet I used for this.
main{
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
padding: 20px;
}
- Website - Olubodun Taiwo
- Frontend Mentor - @bolowys33
- Twitter - @bolowystaiwo