Submitted 4 months ago

Responsive Article preview component

🔅 Yuliya 🐈•240

@O-Julia-O

Preview site View code

This is a solution for...Article preview component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of using flexbox and grid a lot here, i learnt a lot about it thanks to this project.

What challenges did you encounter, and how did you overcome them?

I encountered with placing all items with grids, I spent a lot of time to understand how to do it like in design. But the most helpful was site where i could create similar schema of grid.

What specific areas of your project would you like help with?

I need help with creating the message share. How did you guys created in your project? Have you used clip-path? Or you just downloaded the message picture and put in html?

Also I'm still struggling with positioning, how can I improve it ?

Also I had problem with border-radius, i did it for block div "content", and added overflow:hidden, but it cut the message "share", so I deleted it. I added left border-radius to picture and deleted overflow: hidden. Please, share your experience, how did you solve this problem?

Community feedback

rahmatshoh-1•40
@rahmatshoh-1Posted 2 months ago
Does the solution include semantic HTML? Yes, the HTML document uses <main> and <article>, which are semantic elements in HTML5 Is it accessible, and what improvements could be made? could add the aria-labelledby attribute to <article> and an id to <h1> for better screen reader support. could add in alt attributes that provide more descriptive text for images. Does the layout look good on a range of screen sizes? Yes look good on a range of screen sizes Does the solution differ considerably from the design? There is a slight difference in font weight for the H1 and the color contrast.
0
Pattaraporn Tulathum•200
@rainofPosted 4 months ago
Great work! In my case:

I implemented the message message using a div that toggles visibility.

I used clip-path to trim the image and adjusted the text position with transform: translate(), though I’m not sure it was the most effective approach.
0

Please log in to post a comment

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