First attempt at using HTML and CSS

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  Hello there, Riley! 👋

  Congratulations on completing your first Frontend Mentor challenge! Good effort on this challenge! 👍 It's great that you are able to finish this challenge without any media query! 👏

  Three things that can be improved.

  • First, put all the styling on the styles.css. I notice an inline styling on the body element. It's a good thing to always separate the styling from the HTML. In a big project, it can prevent a lot of issues because inline styling has the highest specificity.
  • Second, the QR code is the main content of this page. It should not be hidden from screen reader users. Add an alternative text that says something like, "QR code for Frontend Mentor".
  • Third, I would highly suggest using flexbox to center the card. Absolute positioning is not a good choice if flexbox and grid can do the job. Also, add max-width to the card element to prevent the card from becoming too large on the widescreen.

  That's it! I hope this information is useful! 😁

  10

  Marked as helpful
• 

  Arthur Roberts•410

  @arfarobs

  Posted over 3 years ago

  Hey. If i was designing this just from the picture. I would use the text as a method to scale a close size. In the downloaded files for the project there should be one that tells you what styles to use. This will tell you the font sizes, colors, etc.

  In the design picture you can see that the heading is two lines. After the word "front-end" you will see that the line breaks. By looking at it this way you can make a better estimation for the components width.

  In a project like this i think its best to try and style things in relation to the information that you are given in the style guide.

  10

  Marked as helpful