Skip to content
Submitted 14 days ago

HTML, CSS for structure and styling, google fonts and VS code editor

Matilda•50
@Til-da
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 am proud of the fact that i could figure out the size of the QR-code picture and also place it in the right place. Also glad i wrote the code by myself.

What i would do differently:

  • To list out the elements
  • Write the whole HTML out before i start designing
  • Pick the fonts and colors.
What challenges did you encounter, and how did you overcome them?

The challenges i encountered are: Sizing of the card div, sizing of the QR-code picture, placing the card div at the center.

How i went about it:

  • Tried using Justify-content, Justify-items, Justify-self
  • Asked ChatGPT for help at some point.
What specific areas of your project would you like help with?
  • The placing of a div
  • Website transitioning

Community feedback

  • P
    idev_cloud•60
    @CodeNautiquePosted 7 days ago

    Hi,

    Here a tips for sizing the QR-code picture :

    First: Create the content like you did in the HTML file. Second: Add the width and the height of you content in the CSS file. Third: Add a display: flex; and a flex-direction: column; the QR-code picture will be in the content because you did a div who is a parent.

    You don't need to add a class to your images here because you don't have lot of picture.

    Marked as helpful
    0
  • Paul Cabot•30
    @LonelyWizbotPosted 14 days ago

    Hi Til-da,

    Nice work! I just have a couple of points:

    • In the naming of your CSS file, it would be best to simply name it "styles.css" as you only have one CSS file. If you have a project with multiple files, you can create a folder "styles" and put inside all the specific CSS files (like qr.css, for example).
    • It seems that there is a few issues with the space attributed to the QR code image in your card container. You don't need position or place-items in your css to accomplish that. Also, you can use the display: flex directly in your card, instead of using it in your qrcode image in the css file.

    Have a nice day!

    Marked as helpful
    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