kebin20/news-homepage-main

News Homepage built with CSS Grid, Flexbox with Responsive Design Principles

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
• My process
  • Built with
  • What I learned
  • 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
• Bonus: Toggle the mobile menu (requires some JavaScript)

My process

Built with

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

What I learned

I struggled a lot with this project which had 2 main problems that I encountered:

• Correct layout
• Grid sizing

Initially, I struggled a lot with getting the sizes as close as possible to the one in the proposed solution. I realized that I was setting grid sizes wrong, and the major one was also setting up containers for sections that didn't need to be contained within a container. I realised this after remembering the fundamentals of Grid, is that you don't need as ,many nested containers.

I also had troubles on getting the hamburger menu to display to the right, instead of the left hand side which took me a long time experimenting until I reached the desired objective.

Another significant trouble I encountered was trying to show the list of links in desktop mode, but eventually I reorganised the nav and header elements and finally made it work.

Useful resources

• Scrimba - There was a course in the UI section where the instructor was going through a responsive mobile design, and I took the idea from that tutorial.

Author

• Website - News Homepage
• Frontend Mentor - @kebin20