Skip to content
Submitted about 1 month ago

CSS Styles

jvondungen•110
@jvondungen
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?

Most proud that I figured out how to use Github, create a webpage and get the thing to look something like the sample. Next time I would start with the mobile view and work from there using either Flexbox or Grid (still learning both).

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

I had a lot of difficulty learning how to push files to Github and even get it to work in the first place. Somehow I figured things out with some querying on the web. Also had a lot of trouble getting the spacing to work. I managed this mostly through trial and error, which was very time consuming. Finally had difficulty getting the page to be responsive. I used @media queries, which improved, but didn't totally get it to be responsive. (some sizes didn't look right).

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

Learning how to get it to be responsive.

Community feedback

  • Sherrisa Classon•80
    @SherrisaPosted about 1 month ago

    Have you tried examining the file in Figma? You can select specific elements and see the exact dimensions. Using Figma would reduce your trial-and-error time. This is a great article on working with design files in Figma: Figma for developers: How to work with a design file.

    Also, you could simplify your code by working with either margin or padding on your heading and paragraph elements rather than using both.

    Marked as helpful
    0
    jvondungen•110
    @jvondungenPosted about 1 month ago

    @Sherrisa thanks so much for this feedback. I really appreciate it! I will definitely try Figma!

    0
  • khanwelcomes•60
    @khanwelcomesPosted about 1 month ago

    Hi, Overall the result is job done. However, to match the exact spacing between elements and fonts try using the figma design for exact details.

    Marked as helpful
    0
    jvondungen•110
    @jvondungenPosted about 1 month ago

    @khanwelcomes thank you, I appreciate that feedback. I will try figma.

    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