Submitted 9 months ago

qr code component challenge

Kyle Deguzman•110

@CSE-Kyle

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

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-aexPosted 9 months ago
Hello Kyle 👋, nice work ! 💪

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
Kyle Deguzman•110
@CSE-KylePosted 9 months ago
@AEXdes thank you for your suggestions 👍🏼
0
Alok Suman•2,380
@Alokray007Posted 9 months ago
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
Kyle Deguzman•110
@CSE-KylePosted 9 months ago
@Alokray007 thank you for your input, I'll get into trying out Perfect Pixel!
0

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