Design comparison
Solution retrospective
how is my first challenge project? your feedback is welcome
Community feedback
- @correlucasPosted about 2 years ago
๐พHello , congratulations for your first solution and ๐ welcome to the Frontend Mentor Coding Community!
Here's is some advice to improve even more your solution:
Give the proper alignment for the card using the tags
display: flex
andmin-height: 100vh
inside body:body { min-height: 100vh; background-color: rgba(192, 229, 252, 0.726); display: flex; align-items: center; justify-content: center; }
Remove these margins to allow the aligment:
.card { width: 210px; /* height: 364px; */ padding: 0.8em; background: white; position: relative; /* overflow: visible; */ /* margin-left: 560px; */ /* margin-top: 110px; */ border-radius: 19px; box-shadow: 0 3px 6px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); }
This is the correct color for the background
body { background-color: hsl(212deg 66% 92%);}
and you can find all these values in the file calledstyle-guide.md
.๐ I hope this helps you and happy coding!
Marked as helpful0@mahmud569Posted about 2 years ago@correlucas it was really helpful, I appreciate it. can I proceed to another challenge or need to modify this challenge's contents?
1@correlucasPosted about 2 years ago@mahmud569 You can proceed but its better you fix this challenge and update it, you'll learn a lots more fixing your own code. I did some challenges more than 3 times because theres ever something more to learn.
1 - @MamieNorrisPosted about 2 years ago
Hi Mahmud,
Great job on your first project ! For the next project I recommend to create a seperate css file for your style. Your code will be way cleaner and thus easier to read. You forgot to center your main-conatiner aswell. For that, personnaly, I create an overlay underneath to center my main-container (not sure it is the best solution though - I am a beginner aswell :D). Try to read your whole code before submitting it to fix minor coding typo such as empty <div>, forgot indents, useless spaces between elements. Oh and a last one read the report right below the design comparison to simply fix a few things.
Over all great job ! Have a good one.
Marked as helpful0 - @PhoenixDev22Posted about 2 years ago
Congratulation on completing this frontend mentor challenge. Your solution looks great. I see you have received some incredible feedback. If you don't mind adding some:
- You should use
<main>
landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like
QR code to frontend mentor
not describes the image.
- There are s me unnecessary divโs has to be removed.
- consider Indenting your code consistently. It makes it really hard to read and find bugs like this. Your code editor can even do this formatting automatically for you.
Hopefully this feedback helps.
0 - You should use
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