Submitted over 1 year ago

Simple HTML and CSS solution to QR code component

Clare Parkes• 40

@Clare1950

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Tried to write as little code as possible to do this so I would appreciate feeback as to how to make it as simpel as possible!

Community feedback

PhoenixDev22• 16,990

@PhoenixDev22

Posted over 1 year ago

Hi Clare Parkes,

Congratulation on completing this frontend mentor challenge. Your solution looks great. I see you have received some incredible feedback if you don't mind , I have some more suggestions:

You should use <main> for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

Images must have alt attribute. In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.

In order to center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser noneed for absolute positioning.

width: 270px; an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem instead .

height: 430px;It's not recommended to set height to component, let the content of the component define the height.

Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices

Consider including a git ignore. Less important in this challenge but will become extremely important as you move onto larger projects with build steps

Using percentages for widths, using max-width and avoiding to set heights for the components, with these things is the key to mastering responsive layouts.

Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

Overall, Excellent work! Hopefully this feedback helps.

Marked as helpful

imad• 3,310

@imadbg01

Posted over 1 year ago

Greeting Clare Parkes!! Congratulations for completing Your challenge, 👏👏👏 well done.

you did great work on this one, and your solution match the design, however reading your code I saw that your using position to center the card which is work's, but it's a letter bit tricky to get it right maybe it's hidden on this small component but it's increase complexity on large project, an alternative way and more robust way is to use either grid or flex when working with layout,

a simple example using grid.


body {
 
  display: grid;
  place-content: center;
  min-height: 100vh;
}

#card {
   /* position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); */
 
}

you apply this changes, and you will notice that there's no difference, but if you opened the devtool and go to the body, you will see a grid system that you can easily manipulate.

Hope this give you some hints!!

but overall you did great job matching the design, Happy Codding, and have a Good Day/Night

Marked as helpful

David• 8,000

@DavidMorgade

Posted over 1 year ago

Hello Clare, congratulations on finishing the challenge! good job!

If you don't mind I have a little advice that I would like to give to you.

Instead of using position: absolute and transform to get your component in the middle on the screen, try using flex-box on the parent element (the body) to center it!, you just need to set your body min-height: 100vh with this your body will take all the screen and your flex will center the component in the middle, try something like this after removing the position and the transform props:

body {
  background-color: hsl(212, 45%, 89%);
  font-family: "Outfit", sans-serif;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Hope my feedback helps you in future challenges!

Marked as helpful

Please log in to post a comment

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