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

Alexander 80

@AlexanderWiklow

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


This page is not pixel-perfect. I am just happy i finished it:)

Community feedback

Shahin NJ 1,190

@SJ-Nosrat

Posted

Hey Alexander, Great job! I found this particular project quite challenging myself.

I was just wondering why don't you take full use of Flexbox; I see you added the display: flex; property on your <div class="container"> tag, however, I don't see justify-content: center; and align-items: center; properties; this will center your card properly.

Although it does break card on the mobile-view. I suggest approaching every project with a mobile-first approach and then adding the appropriate @media queries for larger viewport sizes (screen sizes). You can find more about the approach on the YouTube video by Kevin Powell.

Best of luck on your coding journey! You're doing great!

Marked as helpful

0

@caio-alcantara

Posted

Hey, Alexander, great work! I'd say you just need to add some padding and adjust the font-size. And also, to fix these accessibility issues, you'll have to wrap all the body content into the tag <main>, and set an 'alt' text to every image. Cheers :)

Marked as helpful

0

Alexander 80

@AlexanderWiklow

Posted

@caio-alcantara thank you for your feedback!:)

0
Alexander 80

@AlexanderWiklow

Posted

thanks man! i will watch the video and make a note for myself to use the flexbox more/correct:)

0

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