News homepage

This is a solution to the News homepage challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

My goal was to make the markup as accessible and the design as close to Figma as possible. The HTML is enhanced by schema.org to add some structured data to each news article, optimizing it for search engines. The hero image is responsive and loads depending on the viewport's size, thanks to srcset and sizes.

The CSS uses latest standards such as the media query range syntax, the new color function syntax, custom properties, variable fonts, and more.

Everything was optimized for semantics and accessibility, especially the mobile menu. Some techniques used are focus traps, aria attributes, and media query change listeners.

The challenge comes courtesy of Frontend Mentor, which I regularly use to sharpen my skills and play around with new technologies.