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 Mesa
@Lara-artAll comments
- @konradbaczykSubmitted 3 months agoWhat challenges did you encounter, and how did you overcome them?@Lara-artPosted 3 months ago
Heeey! 👋 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!
1 - @Teboho-XabaSubmitted over 1 year ago@Lara-artPosted 3 months ago
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.
0 - @Eslam-Mohamed-GSubmitted 4 months ago@Lara-artPosted 4 months ago
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 helpful0 - @RajKumar-612Submitted 4 months agoWhat 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-artPosted 4 months agoHi! 👋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 helpful0 - @CodewithfizaSubmitted 4 months ago@Lara-artPosted 4 months ago
Hi 👋 I think your solution is perfect. Congratulations! I just wanted to let you know that there's now something new that replaces: justify-content: center; align-items: center; and it's: place-content: center in case you want to use it from now on.
Marked as helpful0 - @ezequielastradaSubmitted 5 months ago@Lara-artPosted 5 months ago
Hellooo 👋 I really like your solution, it's exactly what they asked for. But I wouldn't have used the h4 and h5 tags because you haven't used any h1, h2, or h3 tags yet. In that case, I might have used a <span>Learning</span> and <p class="colorBlack">Published 21 Dec 2023</p> I hope this helps you, and congratulations!
Marked as helpful0 - @saiesh619Submitted 5 months ago@Lara-artPosted 5 months ago
Hey there! 👋,
- Personally, I would have placed all the CSS in style.css instead of using inline CSS.
- Also, the "Improve your front-end skills by building projects" div is more important than the next one, but it looks smaller.
- Maybe setting border-radius: 50px for the container is a bit too much.
Hope my feedback is helpful!
Marked as helpful0