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 challenge

P
Kyle Deguzmanā€¢ 110

@CSE-Kyle

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


after completing this project, here's my reflection based on the following questions :

  • What did you find difficult while building the project?

A: a difficulty I experienced was figuring out how to align the component exactly to the center of the webpage. Took me a while alongside a few attempts to get it right but eventually I was able to figure it out.

  • Which areas of your code are you unsure of?

A: so far, I didn't have much issues coming into this challenge other than feeling skeptical of how I aligned the qr code component as a whole.

  • Do you have any questions about best practices?

A: what are some resources that I can refer to for me to improve my html/css positioning? as I continue my learning I want to improve the way I position elements and learn the best practices in doing so.

Community feedback

AEXā€¢ 250

@dev-aex

Posted

Here some suggestions:

Always write a alternative text to <img>'s tags:

HTML Line 17 <img src="./images/image-qr-code.png" alt=""> For example, your can write there alt="QR code"

To the .container, you can remove the margin = 0 auto; and center it with the body:

CSS Line 17 body { display: flex; flex-direction: column; justify-content: center; align-items: center; }

  • Put a little smaller the header
  • Use the hsl(220, 15%, 55%) color to the <p> text.
  • hsl(218, 44%, 22%) color for the header.

šŸ‘šŸ‘šŸ‘

Marked as helpful

1

P
Kyle Deguzmanā€¢ 110

@CSE-Kyle

Posted

@AEXdes thank you for your suggestions šŸ‘šŸ¼

0
Alok Sumanā€¢ 2,380

@Alokray007

Posted

Hello there šŸ‘‹

Good job on completing the challenge !

Your project looks really good!

I have a suggestion about your code that might interest you.

There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

šŸ“Œ Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page. This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope this suggestion is useful for future projects.

Other than that, great job!

Happy coding.

Marked as helpful

1

P
Kyle Deguzmanā€¢ 110

@CSE-Kyle

Posted

@Alokray007 thank you for your input, I'll get into trying out Perfect Pixel!

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