Submitted 3 months ago

news-homepage

calvinvin•700

@calvinvin

Preview site View code

This is a solution for...News homepage

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

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

More practice on WAI-ARIA and grid display.

Pitfall:

if the <ol> and <ul> element were styled as list-style: none, it will lose its intrinsic ARIA-role of 'list'. I can solve this problem by styling li::marker { font-size: 0 } instead. However, it adds a line height space on mobile version display if I style <ol> as display: grid. So I still have to use list-style: none and add role="list" attribute to the <ol> element in the end.

Community feedback

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