Submitted about 2 months ago

Responsive Article preview component

🔅 Yuliya 🐈• 240

@O-Julia-O

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

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-1

Posted 6 days 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.

Pattaraporn Tulathum• 200

@rainof

Posted about 1 month 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.

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