Skip to content
Submitted 3 days ago

used flexbox and some prev knowledge to make qr code component

Vivi L.J.•10
@ViviLeJeune
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?

im proud that i was mostly able to do this without googling anything. despite being very new to this stuff im proud of it.

i think i went about it rather efficiently. it took about 2 hours to do with scattered focus. irl stuff happened. i think i got caught up in the secondary text's font a bit too much, since it wasn't provided. i decided to ignore it which i think was a good decision. i tend to get caught up in details like that and get lost/out of focus.

thanks for providing this service. i had fun. :)

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

i had trouble with centering the main div element (the white container) and had trouble realizing i needed to use flex-direction to get the text to align under the image - forgot flex-direction existed. probably lost like 30 mins to that and quite a bit of mood. not that it's a race or anything but im glad i got it done within the evening.

i also noticed the drop-shadow around the main div and i got kinda frustrated when the color/blur wasn't showing right. it seemed way too dark. again, just me being particular. i settled on "good enough".

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

ive recently learned about media queries, and im struggling to get the them to function properly. with that, i had to forego them. it kept messing up my centering on the parent element and im just ready to call it a night and look for feedback.

it kept detecting larger smartphone and tablet sizes as equal to my laptop screen size and throwing everything off.

i was referring to this reference for screen sizes and i think its kind of messed up because some kept bleeding into other classes.

anyway, if theres a better guide on how to check for screen sizes/write styles for responsive design, please let me know.

please let me know if i did alright or have constructive criticism, i know you've seen it a thousand times but its encouraging.

Community feedback

  • Boris•3,120
    @mkborisPosted 3 days ago

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

    • You don't need any media queries for this challenge because the styles are the same for all screen sizes. Remove the media queries
    • All content should be wrapped within landmarks. Wrap a main tag around the card and a footer for the attribution
    • Your image is missing an alt attribute like so alt="Qr Code to Frontendmentor.io"
    • The texts should be wrapped in more semantic elements like h1 for the heading and a p for the paragraphs not divs
    • Using flexbox on the body already centers the card perfectly you don't to add a margin-top again on the .qr-border, remove it.
    • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Change the width of the .qr-border to max-width and it should be defined in rem. Also, remove the height property completely
    • Font-size should be written 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.
    • Add a min-height: 100dvh; on the body.
    • Use a separate file for your CSS as it improves maintainability.

    Hope this helps, Good luck!

    Marked as helpful
    1
    Vivi L.J.•10
    @ViviLeJeunePosted 2 days ago

    @mkboris Thank you. I've added the suggested changes and I think it's a big improvement :) especially the Modern CSS Reset. much appreciated.

    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