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.
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)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Javascript
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.
- 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.
- Website - News Homepage
- Frontend Mentor - @kebin20