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

Responsive Landing Page using Flex and JS

#accessibility
Ajay Pal 190

@ajay0024

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


Please give feedback

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Ajay,

Really impressive solution, it works flawlessly!

Not much to say but here is some insight from me:

  • I noticed a little border-radius on the top right of the image on desktop where it shouldn't be
  • I'd consider working on your accessibility report. Using semantic html and the correct heading structure. Swapping <div class="card"> for <main class="card"> and change your h3 for a h1 to clear the report.
  • It's fair to argue this is more of a component and the h1 would be elsewhere in the overall design. You could consider a screen reader only heading with this snippet:
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Marked as helpful

0

Ajay Pal 190

@ajay0024

Posted

@darryncodes Thanks your suggestions are really helpful. I will keep these points in mind.

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