Hey there !! 👋 I'm Lucas Silva, a front-end developer based in Brazil. I'm a creative person who loves using the latest technologies to create unique websites and apps. I'm also enthusiastic about learning new skills and tackling the challenges that come with them.
I’m currently learning...React, redux and SQL (MySQL).
I'm not sure if the HTML on this page is as semantic as it should be. If anyone could take a quick look at it and tell me what changes I should make to keep it 100% semantic, I'd be very grateful.
Je suis fière d'avoir utiliser CSS GRID avec plus de facilité, cependant je voudrais savoir mieux gérer les dimensions
What challenges did you encounter, and how did you overcome them?J'ai du modifier mes dimensions CSS GRID car elle ne correspondait pas
What specific areas of your project would you like help with?Que pensez vous de ma solution? Est elle responsive ? Le code est il lisible et clair ?
Great job! I have some tips that might help make your design closer to the original one.
Instead of using
grid-template-columns: 270px 270px 255px 255px;
Use
grid-template-columns: repeat(4, 1fr);
or
grid-template-columns: 1fr 1fr 1fr 1fr;
Using units like pixels can break the page's responsiveness.
Here is a more in-depth explanation on how to use grid layout.
I highly recommend this free css grid course as well. It helped me a lot.
Overall, this is really well done project. Congrats.
I am most proud that I managed to understand and use the CSS Grid :)
What challenges did you encounter, and how did you overcome them?I didn't manage to implement the straight inner top left and top right border of the cards like the original design :(
What specific areas of your project would you like help with?How can I achieve the top left and right border just like the original design? Can someone please enlighten me? Thanks a bunch :)
Great job! I have some tips that might help make your design closer to the original design.
I would not set a min-width for the cards. When we resize the page, it breaks the responsiveness.
Since the cards don't have min-width, I'd set a 2-column grid for tablet screen sizes (between 768px and 1024px) so the card's content won't be squished.
About the top border, if you change the card's border-radius to 5px, it'll be closer to the original design.
Overall, this is really well done project. Congrats.
Nothing.
What challenges did you encounter, and how did you overcome them?Fiting the whole image whithin the height, it has some white space left in the bottom, "height: 100%" to the image helped me fit it.
What specific areas of your project would you like help with?The ratio of the image in the tablet/mobile is not good, the parfum is not centered, tried multiple thing but it didn't work.
Great job! I have some tips that might help make your design closer to the one proposed in the challenge.
<picture>
<source srcset="./images/image-product-desktop.jpg" media="(min-width: 768px)">
<source srcset="./images/image-product-mobile.jpg" media="(max-width: 767px)">
<img src="./images/image-product-desktop.jpg" alt="Gabrielle Essence Parfurm">
</picture>
Here is a more in-depth explanation of this tag.
You could also use the <figure> tag as the parent of the <picture>, thus making the code more semantic.
Neither the "green" price nor the crossed out one are using the proposed fonts ("Fraunces" and "Montserrat" respectively)
I'd add some padding at the <body> for table/mobile screen sizes so the product card doesn't touch the device edges.
Overall, this is really well done project!
This looks really good, nice job! I would just centralize the recipe container.
I really proud on this project...next time I will try my best.
What challenges did you encounter, and how did you overcome them?Faced UI, responsiveness, and performance issues. Used Flexbox, lazy loading, and API optimizations to fix them. Improved state management and security for a better experience.
What specific areas of your project would you like help with?Need help with UI/UX, responsiveness, performance, state management, or API integration? Let me know the specific issue!
This looks good, nice job! I would adjust the image path, as it's not being shown.
I tried to follow the html semantic for accessibility, normally I would have use header for the for the learning with the yellow background but instead I used span which is inline by default, which makes it easy to add padding and background styling.
I noticed some styles that are different from those proposed in the challenge. First, most of the background is black, in this case, it should be yellow (#f4d04e).
Because of the background color, we can't see the frontend mentor attribution, since there's a lack of contrast.
I also noticed that the font-family differs from the one in the challenge ("Figtree").
I believe that these small adjustments will make the project closer to the proposed challenge.
Congratulations on the project and I hope I've helped.
