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
- Modern CSS Solutions - This resource from Stephanie Eckles where she provides solutions to all sorts of CSS problems and patterns is really incredible and one I keep coming back to over and over again.
- Kevin Powell - I largely followed Kevin's technique on building out the mobile navigation he demonstrates in this series of videos, where he's developing a different Frontend Mentor challenge project. This is the first time using this specific format for the mobile nav and it was fun playing around with the styles to fit my needs. The end result isn't the most fully functional nav (or the prettiest) but it matches the design comp sufficiently and serves as a good starting point for more advanced nav menu behavior.
- Website - Matt Pahuta
- Frontend Mentor - @mattpahuta