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

Results Summary Component

Pauullammβ€’ 20

@Pauullamm

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Not sure how to position the attribution div such that it does not overlap with the result summary when the window changes size...

I also feel like my use of divs may have been excessive, as it's starting to feel a bit messy with all the different class names

Community feedback

Carlos Henriqueβ€’ 200

@devriquesant

Posted

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 :)

Marked as helpful

0

Pauullammβ€’ 20

@Pauullamm

Posted

@Dev-riquesant Thank you very much! πŸ™πŸΌ

0
Carlos Henriqueβ€’ 200

@devriquesant

Posted

@Pauullamm You're welcome, I'm here to help!! 😁

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