Submitted 6 months ago

Landing page with one card using flexbox

Rwmya• 10

@Rwmya

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

it's almost the same as mockup ver but not 100% same, next time I'm gonna try to use grid, I guess

What challenges did you encounter, and how did you overcome them?

centering the card and sizing them, using margin and flexbox to center the card, and trying around different size to make it similar

What specific areas of your project would you like help with?

How to write better than this? More clean and simpler than this. Also, are there unnecessary css there?

Community feedback

Harsh Kumar Dwivedi• 740

@Harsh-Kumar-Dwivedi

Posted 6 months ago

Hi @Rwmya ,

Nice Solution !

I would suggest following:-

1.Only 1 container would be sufficient. <div class="card-container"> is redundant.

2.Prefer replacing <div class="card"> with <main> element and <p>Improve your front-end skills by building projects</p> with <h1>Improve your front-end skills by building projects</h1>.

These will enhance your code, improve accessibility and make your markup more semantic.

Hope these suggestions are helpful !

Stay Happy & Healthy !

Happy Coding !

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord