Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CSS Styles

@jvondungen

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P

@Sherrisa

Posted

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

Posted

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

0

@khanwelcomes

Posted

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

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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