Skip to content
Submitted over 1 year ago

Frontend Mentor QR-code Challenge

Colin Meehan•40
@ucolinmee
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

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!!!

Community feedback

  • IryDev•1,580
    @IryDevPosted over 1 year ago

    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😄

    1
  • Andrew Allen•10
    @AdditionAddictPosted over 1 year ago

    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.

    0
  • Safni Nazar•80
    @shafni50Posted over 1 year ago

    center a image in a div :

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

    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