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

QR code component

Justyna• 20

@JustynaAleks

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


I am not sure if this project is written properly. I would like to know what to change in this basics for better future practices.

Community feedback

P
Fluffy Kas• 7,735

@FluffyKas

Posted

Heyo, it looks really good! Few small things to correct here:

  • no need for a homepage div, those styles can be applied straight on the body element
  • it's best to not set a any width on the body, it takes up a 100% by default and thats what you'll need
  • for height, you could set a min-height: 100vh on the body (min-height is always preferred here over height for responsiveness reasons)
  • no need to set a fixed height on the card itself: html elements have their own natural height, which you can increase by adding margin, if needed
  • for better responsiveness, use max-width instead of width on the card, this way it will resize on smaller screens

Other than these, it looks very much like the original design, so well done! ^^

Marked as helpful

2

Mayyar Zidane• 200

@MayyarZidane

Posted

That's great!, Thanks@FluffyKas

0
Justyna• 20

@JustynaAleks

Posted

Thank you so much!! :) @FluffyKas

1
Mayyar Zidane• 200

@MayyarZidane

Posted

I tried to enhance it a little bit, Can you take a look to the code?@FluffyKas

0
P
Fluffy Kas• 7,735

@FluffyKas

Posted

@MayyarZidane

Sure, I'll leave a comment at your solution

1
Justyna• 20

@JustynaAleks

Posted

So I fixed all these things and sent it on GitHub(it has the same repo and url), but i don't know if it'll update here automatically? @FluffyKas

0
P
Fluffy Kas• 7,735

@FluffyKas

Posted

@JustynaAleks

Yeah, it should update automatically if you deploy with github pages, it might just take some time. ^^

It looks a lot better, the only thing I'd suggest now is to make this image itself responsive too, so it can resize when the screen gets smaller. This could be done like this:

max-width: 100%;
display: block;
margin: 0 auto;

This code snippet works for most images you'll come across so it's nice to remember it.

Marked as helpful

0
Justyna• 20

@JustynaAleks

Posted

Yay! Many, many thanks for your help! :))) I made changes and pushed it on github :) @FluffyKas

0
Kelvin• 915

@Kl3va

Posted

Using semantic(main,section) html to avoid something popularly called div soup where you ve divs littered in your code. Also, for styling you would want to adopt relative units(rems,%,vw) and dump absolutes(px), cause they aid in building responsive sites cause they adapt to width/height changes of a screen. Absolutes are generally fixed so they play well when styling something like border-radius.

Marked as helpful

1

Mayyar Zidane• 200

@MayyarZidane

Posted

Thanks!, I will try this in the next projects.@Kl3va

1
Justyna• 20

@JustynaAleks

Posted

Many thanks! @Kl3va

2
Mayyar Zidane• 200

@MayyarZidane

Posted

I tried to enhance it a little bit, Can you take a look to the code?@Kl3va

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