Frontend Mentor - News homepage solution

This is a solution to the News homepage challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

This is my solution to the Frontend Mentor Challenge, that I did in a week. It was really challenging, the header button for mobile needs to be improved but I think the result is great.

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

Screenshot

Links

• Live Site URL: https://andressablima.github.io/news-homepage/

My process

I first started by structuring HTML5 with div, articles, aside and footer. And then I started the CSS custom, add color, background, images and CSS grid (that was the most challenging part, because sometimes it wouldn't work and I had to start all over, but in the end was all right. I started using JavaScript for the hamburguer menu, so the users can click on the icon and the menu list will open. I was stuck in this part for a bit, it worked alright but I still have to improve.

Built with

• HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• JavaScript

What I learned

I learned how to use correctly CSS Grid and Flex and how to use simple JavaSript for interactions.

Continued development

I want to keep focusing on JavaScript in my next projects, because I need to learn more techniques and was the part that I struggled the most.

Author

• LinkedIn - @andressablima