Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

qr code component

@Zahid9985

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm most proud of successfully completing my website project despite facing challenges, especially with div arrangement. Next time, I'd focus more on improving the layout and organization from the start.

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

I faced challenges with arranging divs correctly, but I overcame them by problem-solving on my own, experimenting with different layouts until I achieved the desired result.

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

I'd like help with refining the layout and improving the color gradients to enhance the overall design.

Community feedback

Huy Phan 1,940

@huyphan2210

Posted

Hi, @Zahid9985

I checked out your solution and I have some thoughts:

  • Frontend Mentor provides a feature to review your HTML after submission. It may highlight errors or warnings, so try resolving these for a cleaner solution.
  • For better semantic HTML, consider using meaningful elements instead of divs. For example, .container could be a main element, and other sections can use more descriptive tags.
  • Your card heading uses an h2, but there’s no h1 on the page. Ideally, every page should start with an h1 to establish a clear heading hierarchy, which improves both accessibility and readability.
  • You’ve used fixed widths and heights throughout, which can limit responsiveness. I’d recommend exploring responsive design techniques, such as media queries, CSS relative units (like em, rem, and %), built-in functions (clamp, calc, min, max), and concepts like the mobile-first approach.
  • The challenge design doesn’t include a gradient, nor did you add one. It’s usually best to focus on matching the provided design first before adding extra elements.

Hope this helps!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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