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

Página simple utilizando Display Flex para el centrado.

TITOR 340

@hectorestebanm

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


Nuevo desafío completado. Simple página utilizando display flex para el centrado del card, y text-align para en centrado de los textos dentro de la misma.

Community feedback

PhoenixDev22 16,950

@PhoenixDev22

Posted

Hi TITOR,

Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

Question: why did you use a <section>?

  • According to MDN , <section> is a generic sectioning element that is used whenever it doesn’t make sense to use the other more semantic ones.It is a container that stores self-contained content that still makes sense when placed in a different context. If you are only using the element as a styling wrapper, use a <div>. It’s all one component.
  • In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.
  • height: 490px;It's not recommended to set height to component, let the content of the component define the height.
  • Consider including a git ignore. Less important in this challenge but will become extremely important as you move onto larger projects with build steps
  • Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices
  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

Overall, Excellent work! Hopefully this feedback helps.

0

TITOR 340

@hectorestebanm

Posted

@PhoenixDev22 Muchas gracias por los tics, los estoy incorporando de a poco. Con respecto a los height ya no los defino, sino que dejo que el contenido vaya incrementándose solo. Me di cuenta que siempre trabaja con height fijos. Estoy tratando de no usar los <section>, aunque a veces se me dificulta realizar las divisiones, trato de incorporar <div> cuando lo veo necesario. Una vez más gracias por los tics.

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