Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
When doing this challenge, I learned about the ":first-child" CSS pseudo-class to apply a specific style to the first image within a container, without affecting the avatar image that appears next, ensuring different sizes for two images within the same block
What challenges did you encounter, and how did you overcome them?As mentioned, I had difficulty applying different sizes to two images that were inside the same container. By changing one, it changed the other.
I spent a few hours on this until I found the ''first-child'' solution.
What specific areas of your project would you like help with?i'd like to receiv some feedback about my code structure
Community feedback
- @dylan-dot-cPosted 5 days ago
Well done on this solution!!
It looks great.
Here are a few improvements you can make:
- Currently the card isn't aligned vertically. I suggest you do this to your body along with what you already have there. Only thing to do is remove padding.
body { display: flex; align-items: center; min-height: 100vh; }- The h2 shouldn't come before the h1! The learning isn't really a heading but more like a tag that is there, so you can just use a p/span but make the real header an h1.
- I see that you were able to use the
first-childCSS selector but you actually didn't need it. If you wanted to you could just add a class to the image/image-wrapper and use that to style the top img. You don't have to worry about that. Thats why we have class names in HTML.
Overall everything is good, all the best!
Marked as helpful0@senabytesPosted 4 days ago@dylan-dot-c Thank you so much for the tips! I'll apply it next!
0
Please log in to post a comment
Log in with GitHub
Join 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