Design comparison
Solution retrospective
Sorry for the previous wrong code. I wasn't sure how to place number 76 in the circle and not still sure about that if I placed "of 100" right or not. I'll also appreciate it if you give me some feedback and advice on my media query since there is an empty part between results and browser bar. ( I really have no idea about how I should fix it)
Community feedback
- @SutonTochPosted over 1 year ago
Congrats on completing the challenge! Good Job!
Addressing your Questions:
- How to place number 76
- You already did most of the work! Instead of,
justify-content: flex-endyou could usejustify-content: center. After that, maybe increase the font-size of your #SeventySix and reduce the margin.
- You already did most of the work! Instead of,
- Media query → empty part between results and browser bar
margin: 0on body. The body has a default margin of 8px, that you almost always want to override
Feedback:
- Style really shouldn't be in the HTML. While you mainly used it for typography, there is also typography in the .css, which makes it inconsistent.
- You could have included the font-family via @font-face instead of Google Fonts, because this is one of the rare projects where the font was already provided.
- Currently your container is not vertically centered. Instead of,
top: 50pxyou could usetop: 50%if you addheight: 100vhto the body. Another way would be to scrap theposition: relativealtogether and use the following on your body:display: flex; flex-direction: column; justify-content: center; height: 100vh.- 100vh basically means 100% of your viewport height, no matter the screen size.
- Your button should also have the linear-gradient on :hover, so that it is clearer for the user that it can be clicked.
Nitpicking (and therefore not really important):
- spacing in the .html is a little bit all over the place and makes it harder to read
- e.g. 2 <link>-Tags are not indented in the <head>, 2 line-breaks separate the .result while .summary has 4 line-breaks at the bottom
- also spacing the in .css (e.g. .summary and .component are more indented than .container)
- class naming:
- while a class like '.hundred' is very descriptive for static values, imaging making this component dynamic. You should use more general descriptions on these things, e.g. 'subscore-max' or 'score-max'
- Your "summary"-title should be "Summary"
- You have some unnecessary CSS. Try using the Dev-Tools in your browser (should be F12) to see if your declared styles make any difference.
Tips:
- Use * {box-sizing: border-box} to create a more intuitive layout. This way, padding and margin aren't increasing the box they are applied to, but instead shrink the content-size while the box-size stays the same. But I don't think that it changes anything in your case.
- I recommend a mobile-first approach in terms of CSS. First do the HTML for the Desktop-Layout, but then the CSS for the Mobile-Layout first. This way you take advantage of
display: blockdefault behavior of many elements (such as div's) because in Mobile-Layout most elements aredisplay: blockand if not, that also applies to the Desktop-Layout. The result is less written CSS and less bulky media-queries. Just try it for yourself and see if you like it :).
I really like:
- your GitHub (you did the README + have multiple commits → that's rarer than you think)
- you used a box-shadow (it could use a little more contrast tho)
Sadly, I've limited time. If you want, I can take another look at it in the near future, or somebody else can provide further feedback. If you have any questions, feel free to throw them my way :) I'll do my best to answer them.
Be proud of yourself! You completed this challenge AND submitted it to the public!
I hope you learned something, and have a wonderful day :).
Marked as helpful1@saina-sPosted over 1 year ago@SutonToch Thanks a lot! Your advice and expertise is invaluable for me! I will fix my code as soon as possible.
0 - How to place number 76
Please log in to post a comment
Log in with GitHub
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