Back

News Homepage

A homepage for a news website, designed with grids, with a simple menu bar that changes based on the screen size. A challenge by Frontend Mentor.

---

Links

• Website
• Source

Media

Desktop

Mobile

Tablet

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device’s screen size
• See hover and focus states for all interactive elements on the page
• Tab through all the main links to articles
• See the little animation for the menu hamburger button :)

My process

Built with

• Astro
• Svelte
• Tailwind CSS
• Sass

What I learned

Animating with SVGs can be tricky, but as long as you have the correct elements, everything is as simple as normal CSS animations.

Useful resources

• VoiceOver Controls - Needed to test on a desktop screen reader.

Author

• Website - frilly.dev
• Frontend Mentor - @hikawi