Submitted over 1 year ago

Result summary Thomas NIGON

Thomas-Nigon•30

@Thomas-Nigon

Preview site View code

This is a solution for...Results summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi guys this is my first project. I'm learning on my own before starting a 5 month course in September.

It's far from Pixel perfect I know that. The scaling is off and colors/font size/font weight are not matching. I know it's important but I think it's better to focus on the big picture instead of having a pixel perfect project that lack essential features.

For this project I had a hard time to: _Adjust the text position especially inside the circle _The footer (that doesn't show at all with vercel - why? I can see it on all my previews is vscode and chrome dev mode) did not went to the bottom of my body. I tried to have the footer inside or outside of the body or main flex container. _I have a hard time in general with the scaling (units, font size and when to use for say height min/max-height) to fit responsive requirement. _Lastly I think I struggle with my html arrangement and when or where to use a tag or a class/ID. (Like I said text position was a problem sometimes, so i'm not sure I did things properly)

My next step is to add the JS and fetch the data from the json file; Same a the general looks of the project I felt that being close enough manually was better that struggling for 2 days on fetching the data.

Thank you for reading me, Thomas.

Community feedback

Clinto Bean•130
@clinto-beanPosted over 1 year ago
Hey Thomas, good work on this.

For the circle, what I think would help is to structure the circle itself as a container, with the text being its contents, rather than trying to add borders to the text elements. Something like this may be helpful:

<div id="circle">

<div class="score"><span>76</span> of 100</div>

</div>

Then,

#circle {display-flex; flex-wrap: wrap; }

This sets the circle element as a flex container and wraps the items vertically should they exceed the width of the parent.

.score span {font-size: 40px, color: white }

This selects only the text within the span element (76) and applies a larger font size and color to it.

By default, the footer will not go to the bottom of the page, since your body element does not take up 100% of the viewport's height. You can change this by adding height: 100vh if you want to, but that's not necessary.

For sizing and positioning, I definitely recommend reading through the MDN documentation on it or watching tutorials from someone. Particularly, I watch Kevin Powell, but there are countless great creators who are invaluable resources for learning.
Marked as helpful
1

Please log in to post a comment

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