Skip to content
Submitted 3 months ago

QR Code using HTML, CSS

Akira Chan•30
@akiracodeninja
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I’m proud of creating a responsive, fast-loading landing page and offers clear CTAs for better user engagement. The design is clean and optimized for both desktop and mobile devices. Next time, I’d focus on A/B testing key elements, adding interactive product previews, integrating user reviews for social proof, and improving accessibility for all users.

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

he biggest challenge was the lack of a clear Figma design for the project. I had to develop the UI based on images and my own sense of design, which made it difficult to ensure consistency and align with the intended vision.

To overcome this, I carefully analyzed the images for layout, colors, and structure, and translated them into a working frontend design. I relied on my experience and intuition to recreate elements that looked aesthetically pleasing and functional, while ensuring responsiveness across devices. Regular testing and iteration helped refine the design and ensure it met the project’s needs.

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

As I developed the UI based on images and my own judgment, I’d like assistance in refining the design to ensure it aligns more closely with industry standards or best practices.

Community feedback

  • P
    Odiesta Shandikarona•300
    @OdiestaPosted 3 months ago

    Hi Akira Chan, Great for completing the challenge. i want to give little improvement. instead of using px you can try using rem to make it more responsive and accessible. when using rem i recommend setting html tag font size to 62.5% to easily convert px to rem. 62.5% is equal to 10px so for example 16px is equal to 1.6rem.

    html {
  font-size: 62.5% // 10px
}

h1 {
  font-size: 2.1rem;
}

    One thing that might be helpful is using CSS custom properties (like the var() function) to manage your colors. This can make them easier to remember and update. You could define these variables in the :root pseudo-class, for instance.

    :root {
  --white: hsl(0, 0%, 100%);
  --slate-300: hsl(212, 45%, 89%);
  --slate-500: hsl(216, 15%, 48%);
  --slate-900: hsl(218, 44%, 22%);
}

body {
  background-color: var(--white);
}

    i hope it helps👍

    Marked as helpful
    1
  • BLÅÇKØÜT•250
    @FopefoluwaIkufisilePosted 3 months ago

    Great Job!

    0

Please log in to post a comment

Log in with GitHub

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