Submitted 22 days ago

QR code component solution

Franqie• 20

@franklobsty25

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?

I'm proud of my outcome

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

Challenges were overcome with resources from Codecademy

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

Feedback on solution

Community feedback

Teodor Jenkler• 3,720

@TedJenkler

Posted 20 days ago

Hi @franklobsty25,

Nice project! Here are a few additional recommendations:

HTML and Body Styling: Consider setting height: 100vh; width: 100vw; on your <html> and <body> elements and applying margin: 0; to remove default spacing.

OG Meta Tags: I strongly recommend using OG (Open Graph) meta tags to improve SEO and the shareability of your site. Proper OG tags can significantly impact how your site appears when shared on social media and can make a difference in search engine ranking, potentially even affecting whether your site appears in search results.

ARIA Labels: When semantic HTML elements aren't applicable, make sure to add aria-label attributes to your <div> elements. This practice enhances accessibility and contributes positively to SEO by helping screen readers understand the content and purpose of these elements.

Keep up the great work!

Best, Teodor

Marked as helpful

Julian Balaguera• 40

@julianchoripan

Posted 21 days ago

The solution is very nice. I'd recommend using the suggested color for the main text: hsl(212, 45%, 89%) and changing the main div height to something like "height: 100vh" to properly center the card vertically. I'd also recommend checking the margins because when you reduce the window width, the card shrinks too, causing it to behave unintentionally.

Marked as helpful

Franqie• 20

@franklobsty25

Posted 21 days ago

@julianchoripan Thank you for the feedback. The code improved with the suggestion provided. Thank you!

Boris• 2,870

@mkboris

Posted 21 days ago

Hi @franklobsty25 great job completing your first challenge, here are a few things to review

You don't need any media query for this challenge, Remove the media query and change the width of the main to max-width: 20rem;
To properly center the card, add this on your body and remove the the margin property from the main

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
    min-height: 100vh;

Your image needs a more descriptive alt attribute like so alt="Qr Code to Frontendmentor.io"
The google fonts links in the head is enough, you don't have to still include include it in the CSS
Font-sizes should be defined in rem not px
Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

Hope this helps, Good luck!

Marked as helpful

Franqie• 20

@franklobsty25

Posted 21 days ago

@mkboris Thank you for the feedback provided and for the great resource shared. Changes were made, and the outcome was great without the media query. I'm grateful. Thank you.

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