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 Challenge using HTML 5 and CSS

@superuser2345

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 have found it difficult to give my divs full page heights. I will be grateful to get a solution to this.

I want to know the basics of Web Designs need to be consider everytime we make one?

Community feedback

Saulius K. 560

@TH3RIV

Posted

Hi, @superuser2345!

I have a few suggestions for you:

  • Your page should contain landmarks, so it makes your code easier to read on what content is what and also helps screen-readers to figure out what is what. In this case your card should be wrapped withing main tags and your attribution should be wrapped within footer tags.
  • You are writing your CSS within the HTML, I would suggest making a separate file for CSS. Imagine this was a big website with a lot of styling and markup.
  • You have separate index files for desktop and mobile, your page should be one file and responsive based on the screen width. I would suggest looking up "Media Queries". Currently your page is not looking good on a mobile screen. Use browser inspect tools to test different screen widths and responsiveness.
  • Centering elements using margins is considered bad practice, I would suggest looking up "Flexbox" as an approach to aligning elements.
  • Try to avoid using px values as much as possible and use rem instead.
  • Try to start using "custom CSS properties". While this is not essential in this project, it is a good habit to develop.
  • I would also suggest using a CSS reset.

Hope this helps!

Marked as helpful

0

@superuser2345

Posted

@TH3RIV Hi Saulius,

Thanks for taking the time out and helping me with your valuable feedback. I will be definitely keeping note of each and everything you have suggested. Thanks again for the help. :)

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