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
- Solution URL: https://www.frontendmentor.io/solutions/mobilefirst-approach-using-scss-bem-and-simple-hamburger-menu-hwgGRraGyO
- Live Site URL: https://patrykporabik.github.io/news-homepage/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
From highlights: I've used CSS Grid for the first time. In the past I was doing templates only with flexbox. I've found Grid very useful, it's easy to use and can ease up the whole work with more complicated grids.
In the next challenges I want to focus more on the website semantic, accessibility and creating better CSS code.
- Hamburger menu - This helped me create a hamburger menu. I really liked this pattern and will use it going forward.
- Website - Patryk Porabik
- Frontend Mentor - [@PatrykPorabik]https://www.frontendmentor.io/profile/PatrykPorabik)
- Twitter - @PatrykPorabik