Latest solutions
Testimonials-grid-section solution
Submitted 11 months agoCould I have solved it without using grid-template-areas?
Four card feature section solution
Submitted 11 months agoHow can I know the size of the exercise elements? Was there another way to place the image in that position?
Product preview card component solution
Submitted 12 months agoI'd like to know the best way to find the average of the grid.
Recipe page solution
Submitted 12 months agoI’m not sure if the solution I gave for the image in the media query is the best one. How could I improve it?
Latest comments
- @Kaviyaa88@Lara-art
Hey! 🙌
Your work is impeccable. I love that you did everything with React and Vite because it makes it reusable in other parts of the website. The only downside is that you didn’t include where you deployed it in the README, so it can’t be tested. Make sure to add it so potential clients can try it out.Great job, congratulations! 🎉
Marked as helpful - @FranekHincmann@Lara-art
Hi! 🙌
It's a good solution, but there's a problem. When you click the
.share
button, all the content shifts. After checking, I noticed it's because the.social-media
div is outside the footer. If you move it inside, the content won't shift, but you'd also need to adjust the CSS a bit:top: -70%; left: -20%; display: none;
And remove
overflow: hidden;
because it cuts off the.social-media
div if you want to move it inside the footer.And @media doesn't works
- @konradbaczykWhat challenges did you encounter, and how did you overcome them?
The biggest challenge was positioning cards with only grid on different screen sizes. I wanted to learn more using grid so I read some MDN articles to better understand how to use grid. Finally cards are on the right positions :)
@Lara-artHeeey! 👋 Yeah, grid can be tricky at first, but I think you've done a great job.
The way you did it is perfect, and you could have also solved it using grid-template-areas, which might seem a bit odd at first. Here’s a link if you want to check it out: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas.
Keep it up, your solution is awesome!
- @Teboho-Xaba@Lara-art
Heyyy! 👋 Your solution looks a lot like the one we were given, congrats!
However, I noticed the images aren't showing up because the URL is incorrect. Since they're in the same parent directory, you just need to add a "/", so it should be <img src="/images/icon-supervisor.svg" alt="">.
Everything else looks great. I did the exercise differently, but I find your approach easier.
Marked as helpful - @Eslam-Mohamed-G@Lara-art
Hey there 👋I was checking out your GitHub and it looks awesome. Your way of structuring the code is very readable, it looks a lot like the original. The only mistake I noticed is that you didn't use class="fa-solid" in the CSS, but it's no big deal. Great job!
Marked as helpful - @RajKumar-612What are you most proud of, and what would you do differently next time?
Did most of the task on my own, but took help on some of the styling.
What challenges did you encounter, and how did you overcome them?css challenges on the table,list and some alignments, took help of chatgpt and online resources
@Lara-artHi! 👋First of all, congratulations on completing the exercise. I checked your GitHub and wanted to mention a couple of things: use the <section> tag to separate each of the blocks, even if you later use <div>, because this helps other developers understand your HTML better. Also, the image appears stretched—try using: img { width: 100%; } It will look better. Good luck with the next project! ❤
Marked as helpful