
Design comparison
Solution retrospective
I am most proud of myself for coming back to this project. It was very hard for me, and i stopped for a few weeks after feeling frustrated. Came back three weeks later to continue, started over and finished it!
Community feedback
- @YacoubDweikPosted 22 days ago
Good job!
I don't want to make you upset, but I believe this is the best way for you to get better and improve your skills.
Look, your design looks exactly like the original design, like pixel perfect design, this is amazing, but this is only valid on screens larger than 770px, your design is not responsive and therefore it's not good on mobiles, and man it's easy to tell why is that, because you simply kill the flexibility of the elements by giving them fixed heights and widths, forget about width: bla bla or height: bla bla, use max-width and min-height instead, in your way you tell the design to be always 730px let's say so on mobiles (360px let's say) you will see a portion of your design only.
You have used some HTML elements in a wrong way, the ingrediants are not <p> or paragraphs they are only <span> or <strong> if you want to emphasize them, also it's not right to give them fixed width just to get the exact space between them, the idea is to give the whole container div or section a 100% width (which is the default of any block element) then you have a div that contains two spans, fat and 22g then you give that div a flex space between and here you go, keep it up!
** BTW you should not feel frustrated cuz u r in your beginning but I gotta say that maybe it's the source that u r learning from, if u don't feel comfortable till now then YouTube is there!
Marked as helpful1P@oryanhachPosted 22 days ago@YacoubDweik Thank you so much for the feedback! You are 100% right about the pixels! working on responsive designs is my next task, so this came right on time!
Much appreciate the comments and will work on them, thanks a lot!
0 - @MS-80Posted 20 days ago
"Your attention to detail is amazing—looks so professional! 👌"
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