D. Jaime Blockton• 180
@digigrrl525
Posted
I think this is bang on. Awesome job!
Marked as helpful
2
Reno G• 50
@pamplito
Posted
@digigrrl525 Thank you !
0
Design comparison
Solution retrospective
What are you most proud of, and what would you do differently next time?
I'm proud to have completed this challenge and, above all, to have kept looking for solutions until I finally achieved what I wanted to provide.
This chalmlenge made me learn and progress and I'm sure I'll begin the next one with more confidence.
What challenges did you encounter, and how did you overcome them?
I had trouble with the image's responsiveness. I wanted the height to be fixed but the sides to be responsive without distorting the image.
I finally managed to find a solution with OBJECT-FIT, which allowed me to crop the image in a fluid way.
What specific areas of your project would you like help with?
As I've only recently started to learn programming on the web on my own, I'd love to get feedback and advice from more experienced people to help me progress more quickly.
Community feedback
rezanahi• 60
@rezanahi
Posted
Great! In my opinion, it would be even better if you also add hover effects.
Marked as helpful
1
P
Øystein Håberg• 9,450
@Islandstone89
Posted
Hi Reno, great job.
You have included:
- The
mainlandmark - A proper CSS Reset
- Custom Properties
font-sizein rem instead ofpx
Well done!
Here are some suggestions to improve your code even further. I hope you find them helpful :)
HTML:
-
Never have text in divs alone. "Learning" is a
<p>, and I don't think it needs to be wrapped in a<div>. -
The publish date is a good opportunity to use the
<time>element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>. -
Don't use words like "photo" or "image" in the alt text. A more descriptive sentence would be "Headshot of Gary Hooper".
CSS:
-
The
mainshouldn't have any properties, move them to.container. -
max-widthon the card should be in rem. -
Remove all heights in
px. -
Media queries should also be in rem.
Marked as helpful
0
Reno G• 50
@pamplito
Posted
Hi @Islandstone89,
Thank you for this great feedback. It will be really helpful. As an example, and I'm a bit ashamed of this, I didn't know about <time>. And no more properties on the .main now.
Thanks again !
1
P
Øystein Håberg• 9,450
@Islandstone89
Posted
@pamplito My pleasure :)
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