Pure HTML and CSS

Community feedback

• 

  Caroline•210

  @CarolkiariePosted about 2 years ago

  Hello Pedro good job on the challenge. I have some few suggestions that could possibly help.

  1. You should use Semantic HTML in your file. semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries. it is also easier for someone who is going through your code to know what the content is.

  2. include a css reset in your css file. All browsers have default rules with properties and values applied to all pages before loading files. Due to the cascading nature of CSS, any styles the browser uses will remain unless explicitly overridden. A CSS Reset file targets all rules that the different browsers apply defaults to and resets them to their minimum possible value. my favourite css reset is from https://www.joshwcomeau.com/css/custom-css-reset/ you can just copy and paste it in your code

  and lastly, the image should be in your html file and not set on your css file as a background image.

  happy coding and good work!

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @pedrohfarantes 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="qrcodecomponent"> to improve the accessibility of the website.

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.

  • Setting a defined height for the card component is not recommended. The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications and the content can overflow. Alternatively, you can use min-height. Note: On my computer, the madeby section is floating outside the container

  • In this challenge, you should not use the background property to set the image because this image has semantic meaning. Use the CSS background property if the image is not part of the content.

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  0