Skip to content
Submitted almost 2 years ago

Frontend Mentor QR-code Challenge

Colin Meehan•40
@ucolinmee
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Although I have been learning HTML and CSS for a while, I felt most of my coding experience was through tutorials. I wanted to escape tutorial hell, so this is one of the first times that I have built a project from scratch. I chose a simple challenge first so as to not get demoralized and over-confident, but I still ran into some challenges that I had to google search while building this. More specifically:

  1. How do you center an image in a div (I found myself calculating the values manually for the padding-top so the spacing looks even all around the 4 edges of the image, so maybe there is an easier way to resolve this)
  2. How do I check what fonts/colour codes are used in the final solution preview? I ended up using colour hunt to get the rough colour but I am slightly colour deficient LOL

Overall, good challenge and I am excited to try more challenges in the future and escape tutorial hell!!!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • IryDev•1,580
    @IryDev

    Hey @ucolinmee well done for completing this challenge 😄

    I will try to answer your questions:

    • Centering an Image in a Div: You're on the right track by looking for a better way to center an image within a div. Instead of manually calculating padding values, you can use CSS Flexbox or Grid. For Flexbox, you could set the parent div's display property to flex and use justify-content: center; and align-items: center;. For Grid, you can set the parent div's display property to grid and use place-items: center;.

    • Font and Color Codes: If you're curious about the fonts and colors used in a webpage, you can use browser developer tools. Right-click on an element and select "Inspect" or "Inspect Element" to open the dev tools. There, you can explore the CSS applied to different elements, including fonts and colors. You can also use browser extensions like "WhatFont" to identify fonts and color picker extensions to get color codes.

    I hope you'll find this helpful😄

  • Andrew Allen•10
    @AdditionAddict

    For 2 you can use the provided figma files (not sure about sketch). Figma has added a developer view so you can inspect the css. The style guide has the font details.

  • Safni Nazar•80
    @shafni50

    center a image in a div :

    justify-content : center; align-items: center;

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