winstein27/news-homepage

This is a responsive News Homepage. The main goal of this project was to practice responsiveness. There are also hover and focus states form the page elements.

Frontend Mentor - News homepage solution

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.

Table of contents

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

Overview

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: Vercel

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Box Model

What I learned

In this project, I learnet how to build websites using only HTML, CSS and JavaScript, without any framework or libraries. The responsive layout was a challenge, learning that was really exciting.

Here are some code snipets:

@media (min-width: 700px) {
  .header-menu {
    display: none;
  }
}

const openMenu = () => {
  backdrop.style.display = 'block';
  mobileMenu.style.display = 'block';
};

const closeMenu = () => {
  backdrop.style.display = 'none';
  mobileMenu.style.display = 'none';
};

Continued development

I need to improve CSS skills, use mobile first approach and modern CSS sizes.

Useful resources

• Fullscreen overlay - This helped building the overlayed mobile menu.
• CSS - The Complete Guide 2023 - This is an amazing CSS course that I'm doing to improve my skills.

Author

• LinkedIn - Winstein Martins
• Frontend Mentor - @winstein27