@AymanSdqSubmitted 6 months ago
Mirko Bozzetto
@mirkobozzettoAll comments
- @mirkobozzettoPosted 6 months ago
Well done with react and tailwind!
You're very close to the original result, but there are some small visual differences that I noticed when I went to look at your render page!
To start with the photo: on the original version there's no border radius on it, but you've put some on the whole image so it's rounded on the inside you could have done By using the rounded-r-lg class instead of rounded-t-lg, you only apply the border radius to the right-hand side of the image.
also on the "p" that begins with "Discover the benefits of" . you could have applied the same colour but with a little very light transparency to make it look more like the one on the mock-up
and finally, the purple you've used on the image is lighter than the original COMPANIES , TEMPLATES & QUERIES are not really as white in the original version either
but apart from that your design is excellent, BRAVO to you :)
0 - @surpoxiaSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I think it's allright.
What challenges did you encounter, and how did you overcome them?No accurate measurements in the MockUp and I wasn't able to make the image and headline shrink correctly as shown in the design file for mobile devices.
What specific areas of your project would you like help with?None
@mirkobozzettoPosted 6 months agocongratulations here too!
You've got the proportions just right, the padding and border are very slightly different on yours, but it looks great too! Then I see that you've used the nester css technique in vanilla css, well done!
Marked as helpful0 - @surpoxiaSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I think it's pretty close to the MockUp
What challenges did you encounter, and how did you overcome them?None. In fact it was done pretty fast.
What specific areas of your project would you like help with?None.
@mirkobozzettoPosted 6 months agocongratulations, it's 99% pixel perfet and I can barely see the difference between your model and the one from front end mentor!
Personally, I can't recommend anything you've done, apart from one, but that's just my personal taste:
That's the only thing I've got to say, though. You could have added a slight transition on the hover effect, which would have added a slightly smoother user experience, but otherwise that's it, you've done really well, congratulations!
Marked as helpful0 - @omk1rSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I'm mostly proud of the design and implementation of the design. I would like to make the card with grid instead of flex.
What challenges did you encounter, and how did you overcome them?I encountered challenge with matching the fonts. I overcome it with trial and error.
What specific areas of your project would you like help with?I want help with the structure of the project. Specifically, CSS part like how can I structure it more efficiently.
@mirkobozzettoPosted 6 months agofirst of all I congratulate you on having carried out this challenge because ilo is very similar!
I think it's almost perfect honestly, visually I think you haven't forgotten anything apart from one thing, yes the numbered list, the numbers in this list should be in a brown colour that you forgot to provide, you could have put the colour class in a span for example.
Otherwise, in terms of SEO, you could have included a main tag, as is recommended. In any case, I tend to forget this too, and frontendmentor often reminds me at the bottom of the page after I've shipped my exercise!
Honestly it's to find something to say and try to find a way to improve it, but honestly I find your work super well done,
Congratulations again!
0 - @marc115Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Like always, I'm becoming more familiar with the flex layout
What challenges did you encounter, and how did you overcome them?I didn't encounter any significant challenge
What specific areas of your project would you like help with?Nothing in particular, but any sugestion is welcome.
@mirkobozzettoPosted 6 months agoFirst of all, well done for the effort, you've done your design in react!
As far as the details of the appearance of your code are concerned, I think you could have used more space in terms of the px you used,
There's a little problem with the cards overflowing, the svg overflows at times when you inspect them at different sizes
When you switch to mobile responsive mode I'd have liked the font size to adapt and change with the layout too.
Maybe if you'd separated your react components better it would have been easier to change the style as needed.
Overall, I think you've done a good job, So congratulations!
0 - @Asv000Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
That I think I nailed that layout, I'm happy about that
What challenges did you encounter, and how did you overcome them?RWD for mobile devices. Overcomed by try and check if that's gonna help me or not
What specific areas of your project would you like help with?CSS code
@mirkobozzettoPosted 6 months agoI don't know what to say, the difference is almost imperceptible, the perfume font weight must be lighter I think, and the spacing is almost the same too, maybe there's also an effect that darkens the original photo very slightly on the example shown,
but in any case it's almost pixel perfect, congratulations on the job.
0 - @aliosmanbaskurtSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I feel that things are getting easier as I work with tailwind.
What challenges did you encounter, and how did you overcome them?@mirkobozzettoPosted 6 months agofirst of all, well done, your code looks very similar to the model, dana lamaquette the words "total, preparation & cooking" are in bold mode but in bold black, whereas they are the same colour as the rest of the line. I also noticed that the radio border of the card is normally more accentuated than yours
you've also used a darker colour in the instructions with the numbered list instead of the basic colour, which was the same in different places
and finally there was also the image of the omelette which had a bit more border radius, but that's really to share a few details about the visual aspect
as for the code, I didn't have access to your github and got a 404 error, so I'd have been interested to see your code.
Well done to you in any case
0 - @Med-evSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
To be able to take a look at the design and starting to picture the structure of it before even to write a single code line it feels good.
What challenges did you encounter, and how did you overcome them?So far I didn't count any challenges along the way.
What specific areas of your project would you like help with?You should probably notice that the design isn't responsive on small screens if you've got any feedback in this specific area that would be helpful.
@mirkobozzettoPosted 6 months agoEverything is almost the same, well done to you
except for the border-radius which is a bit more pronounced on yours, the spacing between the buttons is a bit bigger too, and the avatar which is a bit bigger, otherwise everything else seems very similar,
I noticed a small bug in the hover effect when I switch to mobile mode and click, at which point the border radius suddenly disappears and reappears, maybe you should go and have a look and try to understand why this happens, I might have made the transition a little less than half a second to make it smoother. congratulations on your work in any case
0 - @kepper104Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Once again, I really enjoyed the design and the color palette of the card and the hover effect was just *chef's kiss*. Nothing outstanding on the technical side, pretty simple project.
What challenges did you encounter, and how did you overcome them?It was my first project without Figma files, so I had to eyeball some spacings and font sizes and weights, but it turned out alright.
I had some trouble with setting the correct width and making it scale correctly, in the end I think it was just my monitor scaling up the page size and displaying 481 pixels (calculated in inspect tools in Firefox) as 601 pixels (measured by the ruler from Windows PowerToys).
What specific areas of your project would you like help with?Nothing in particular, though open to any feedback!
@mirkobozzettoPosted 6 months agoWell done, the design is really close, and I really like the fact that you took advantage of this challenge to integrate the other challenges you've done,
It allowed me to discover some vuejs code that I'd never read before,
I see that you've made some small transitions using the hover effect, which softens the transitions. I really don't have anything to say, you've done a great job!
0 - @arvind3598Submitted 6 months ago@mirkobozzettoPosted 6 months ago
everything works superbly well and the style is respected, The js code works well too!
as for the display, I'm on a 16" macbook pro and the inputs are too big compared to the parent. for example, in my case, the year is overflowing the box and it shouldn't have happened. be careful, they're encoded with the flex flex-cop gap-1 class.
you could have added a width in % to avoid this for example or media queries
: )
Marked as helpful1 - @mcancetinSubmitted 6 months ago@mirkobozzettoPosted 6 months ago
some curved lines are missing from the layout and the colour gradients are a little different, but overall it's pretty good
there's also a bit of padding missing, as everything sticks to the example provided in the resources
and you did provide the inputs for the bmi, but I'd have liked the bmi result to be displayed after you'd provided the information in the welcome block, even if that wasn't requested, it might have been nice to use js ;-)
PS: well done for the scss, everything is well organised and very clear!
Marked as helpful0 - @savaliyaalpeshSubmitted 6 months ago@mirkobozzettoPosted 6 months ago
Hello, this is not exact style reference like in the doc <h2>HTML & CSS foundations</h2>
in the style guide you can find the references about that
- Weights: 500, 800
this one is normally smaller than your , attention
<p>Greg Hooper</p>and the color of this one is not the same <p> Published 21 Dec 2023</p>
I hope it will help : )
0
