Design comparison
Solution retrospective
Hello everyone, Here is Elisabeth, I just created the solution for this very first app. It's not sure if it's 100% perfect - I am still learning ๐ Please feel free to share any suggestions or comments you may have ๐ Kind regards, Elisabeth
Community feedback
- @Ranty09Posted over 1 year ago
Great job, Elisabeth! I noticed that you skipped the edges of the image, just a small suggestion. Why not add some border radius to the image edges, just like you did for the main card? Overall, though, I must say this design is looking fantastic, keep up the amazing work.
Marked as helpful0@elic4vetPosted over 1 year ago@Ranty09 Hello :) that's true !! I did not realize it ! I will definitely fix it ! Thanks for your help :)
0 - @atif-devPosted over 1 year ago
Hi, congrats on completing the challenge. Better take care about following points:
- For centering the card do as:
body { min-height: 100vh; display: grid; place-content: center; }
- Use semantic tags to fix accessibility issues.
- It is preferred to use responsive units(
rem
for font size andem
for margin and padding) - When we open GitHub repository link, at right side you will find an About Section. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.
- Write your own README file in your GitHub project's solution and write about your working flow, findings, newly learned things, useful resources, etc.
Hope you will find this Feedback Helpful.
Marked as helpful0@elic4vetPosted over 1 year ago@atif-dev Thanks for your detailed and helpful answer. I changed my App again, and I will definitely add a customized README file ASAP. Thanks again for your answer :)
0 - @numuriPosted over 1 year ago
Hello greetings ๐๐ป.
Great job for your challanges, but i want to corrected some ur desain.
First, at the your card use very radius big, maybe u can add 10px or 5px for the better then.
Second, at the shadows for make a better shadow you can follow my tips, example: box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
First zero it's mean position for a shadow to right (positive value) and left (negative value), example like if you add 10px for the first zero, mean you add a position of shadow to right some 10px.
Second zero same like first zero, but for the second zero make move to top (negative value) and bottom (positive value), how to use same like first zero.
Third '20px' it's mean for size the shadow
and the last one is rgba for the color, triple zero for color and the last value is alpha or opaciry from the color.
Third, maybe u can use width with % value for make a responsive, like width: 80% and for height u can set everything u want. dont forget too add some border radius like example in desain.
Fourh, author you dont make some author just change the default style.
Thanks, I hope this make help you for the better coders ๐๐ป
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