Design comparison
Solution retrospective
- How to know font sizes?
- How to identify if an element has a box-shadow of with very low opacity?
- How to know the exact spaces between different elements of the same parent?
Community feedback
- @MrSoykaPosted over 2 years ago
Hi! Congrats on finishing the challenge!
When you download files for challenge, you get file called
"style-guide.md"
.In this file you can get some answears to your questions:
- Colors for fonts and backgrounds
- Font family and font weight
- Some font sizes
Also you can add
alt="#"
atribute to yourimg
tag to solve accesability and HTML issues.Marked as helpful1@AmandagnePosted over 2 years ago@MrSoyka Thank you very much for replying and reviewing my solution. I'll definitely use all the ideas you mentioned in the next challenges. Thank you again!
0 - @FalejevVPosted over 2 years ago
Hi! Ill try to answer your questions ;)
How to know font sizes?
- If your reference is an image, i think only by changing multiple times until it looks +- same. If you want to check font from other website, there is a website extention "WhatFont" that gives selected text information.
How to identify if an element has a box-shadow of with very low opacity?
- If im not sure, i use browser inspector.
How to know the exact spaces between different elements of the same parent?
- I use browser extention "Ruler" that shows width and height in pixels of your selected box. If you have an image and you need to measure spaces on it, you can drag it in browser and it will be displayed in new window. I work this way. You can use ruler and color picker extention on image that you open in browser.
Marked as helpful1@AmandagnePosted over 2 years ago@FalejevV Thank you. it's really helpful. the tools you mentioned are gonna solve most of the problems I faced.
0 - @M0hamedMagdyPosted over 2 years ago
How to know font sizes?
- There is a website called fontsquirrel, where you upload the image and it'll identify the fonts. It might help you.
How to identify if an element has a box-shadow with very low opacity?
- I don't know an exact way but I guess you have to look closer.
How to know the exact spaces between different elements of the same parent?
- I use the select tool in paint 3d on windows to calculate the spaces between -and the size of- elements. But you shouldn't worry about it too much, your implementation looks very good and is nearly a pixel-perfect one.
Marked as helpful1@AmandagnePosted over 2 years ago@M0hamedMagdy Thank you for answering the questions and reviewing my solution. I will use all the answers you gave in the next challenges. Thank you!
1 - Account deleted
Hi Aman 👋 Congrats on finishing the challenge!
To answer all of your questions:
If you don't have the Figma/Sketch files - you don't know.
With the jpg image provided all you can do is take a guess and use your best judgment. Try a different ideas and see which one works.
And you did great there, your design looks almost same I would say.
Keep up the good work! 👨💻
Marked as helpful1@AmandagnePosted over 2 years ago@kom42ec Thank you very much. I appreciate you took a time to review my solution.
0
Please log in to post a comment
Log in with GitHubJoin 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