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

simple html and css page

CyPhEr420β€’ 380

@CyPhEr420

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Adrianoβ€’ 34,090

@AdrianoEscarabote

Posted

Hi CyPhEr420, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

As you know this project is based only on one page component, so no h1 is needed! because we don't know if this page will have a more important component, but it's always good to prevent accessibility errors so I think it would be good for you to add an h1 in this component, besides being a good practice for when you are developing larger sites, don't worry forget about h1.

<h1 class="qr-title">Improve your front-end skills by building projects</h1>

Add a padding to the body, so that the content in lower resolutions doesn't hit the edge of the screen!

The rest is great!

I hope it helps... πŸ‘

Marked as helpful

0

CyPhEr420β€’ 380

@CyPhEr420

Posted

@AdrianoEscarabote thnx for that am just starting to focus more on the accessibility

1
Edwin Boonβ€’ 30

@brwmaster

Posted

Hello, Nice work! 😁

Here is a little feedback to improve the code even more

  • Wrap all your code in <main></main> tags
  • Change the div class="title"> to a `<h1 class="title">
  • Change the div class="text"> to a <p class="text"> or just style the <p></p>`
  • Add a . to the end of the alt text to improve Accessibility

And some advice I got on my solution is to change all the px values to rem values. link here

I hope this feedback will help you!

Marked as helpful

0
Travolgi πŸ•β€’ 31,420

@denielden

Posted

Hello, You have done a good work! 😁

Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
  • instead of using px use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help πŸ˜‰ and Happy coding!

Marked as helpful

0

CyPhEr420β€’ 380

@CyPhEr420

Posted

@denielden so should I be using rem for height, widths, and sizes oo and the padding, margin all those

1
Travolgi πŸ•β€’ 31,420

@denielden

Posted

@CyPhEr420 you are welcome and keep it up :)

Yea rem it's good for all

0
CyPhEr420β€’ 380

@CyPhEr420

Posted

@denielden thx

1
Travolgi πŸ•β€’ 31,420

@denielden

Posted

@CyPhEr420 you are welcome and keep it up :)

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