Product Preview Card Component HTML CSS3 - Mobile First Approach

My process

1. Slicing UI into HTML Structure

• Card (<main>)
• Image (<figure>)
• <img>
• Content (<section>)
• Overline (<h2>)
• Title (<h1>)
• Description (<p>)
• Price Section (<section>)
• Final Price (<h3>)
• Initial Price (<span>)
• Button (<button>)
• Icon (<img>)
• Text ()

2. Define Styleguide as variable in CSS (color, font, typography)
3. Styling using CSS

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first approach

What I learned

• REM and EM: use rem for font-size and em for others