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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- JS basics
I did not learn something completely new to me. But I had to spend a lot of time thinking and drawing about the grid layout and flexbox layout to position all elements. It improved my proficiency with adding and removing css classes to manipulate the page using js. I also practiced BEM naming convention in this project that decreased the difficulty for me significantly. Also designing the nav bar was a good experience for future projects. All in all, it was worth the time and work it required and suited perfectly for my level. Cheers !