Skip to content
Submitted 3 months ago

QR code component solution

Franqie•20
@franklobsty25
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 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,820
    @TedJenklerPosted 3 months 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
    0
  • Julian Balaguera•40
    @julianchoripanPosted 3 months 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
    0
    Franqie•20
    @franklobsty25Posted 3 months ago

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

    0
  • Boris•2,880
    @mkborisPosted 3 months 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
    0
    Franqie•20
    @franklobsty25Posted 3 months 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.

    1

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