Results Summary Component

Community feedback

• 

  Carlos Henrique•200

  @devriquesant

  Posted about 2 years ago

  Hello pauullamm

  Congratulations for completing this challenge!!

  ✏️ Here are some tips and suggestions for this and your future projects ;) ✏️

  1. 🚀 Contain your "main" content in a "main" tag:

  • <div> do is a joker element and can be to a general container, but it does not provide, alone, a semantic value.
  • <main> is a semantic element from HTML which provides accessibility and organization for your web page;
  • Semantic elements provides detailed info about the contents in your page.
  • Others semantic elements includes: <header>, <footer>, <figure>, <figcaption> ...
  • To implement this, you should exchange the <div class="outerouterContainer"> for <main> and wrap all the necessary and main content of your page.

  1.1. ✅ Use the right attributes:

  • I noticed you used fixed position attribute to keep the contents in your page.

  • position: fixed; maintains the element fixed in a certain position of the page and it won't move.

  • 🧪 As a experiment you should try putting the body height with 100000px and see what happens as you scroll down 🧪

  • As your content is right there on the screen and it's needed to be responsive with the screen, position is not necessary to be set, but you can adjust with the display property and the values you give to them.

  2. 📱 Build a responsive web page:

  • Use px unit to dimension your components in the page gives it a appearance of static.
  • To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.
  • To deeper details, take a look at it

  ❓ THE PROBLEM ❓

  • The div.attribution element won't fit the right and will be still overlaping the main content if it doesn't have a container to set it in the right place.
  • This can be done by using <footer> element and extend it to the screen width and set the div.attribution in the center. (It is just a pobbile solution) :)

  Overall you did great with this project, keep coding! I'm sure you will discover new things and become even better

  Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)

  02

  Marked as helpful