Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article preview component solution using Flexbox

@henrikkudesu

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The padding and margins inside the article-card__content is a little bit messy in full screen desktops. I need to set better proportions on the measurements, but i think that is ok for now. The biggest problem is that so far I haven't been able to make a functional share button, because I'm still learning javascript and the way this button is modeled is kind of confusing for me.

Community feedback

@savvystrider

Posted

I think it looks really good!

My comments, hope you find them useful:

  • If you're worried about margin/padding, h1 and p elements naturally have some default margin on them.
  • You can set the margin on them to "0" initially to figure out how you actually want to style the content.
  • For the share button, you can import an icon from Font Awesome or Material. It'll save you some time.
  • Also, I'd recommend changing the text to be left-aligned instead of justified. Easier to read and less of an accessibility issue.

Marked as helpful

1

@henrikkudesu

Posted

@savvystrider Thanks for your reply! Im gonna take a look at it, but perhaps the text is already set to align on left. All i need to do now is learn how to design the share button popup and make it work. which i think this isn't a hard thing to do.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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