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
- SCSS and BEM
- Flexbox & CSS Grid
- Mobile-first workflow
I learned how to change the image depending on the media properties using <picture> element. This problem is also called art direction
<picture class="featured-article__img">
<source srcset="./assets/images/image-web-3-desktop.jpg" media="(min-width: 400px)" />
<img src="./assets/images/image-web-3-mobile.jpg" />
</picture>I learned how to write a more accessible hamburger menu using aria attributes. Keyevent are not supported though.
In the scss files I tried to rely on the following structure when writing styles:
- first come the mixins
- styles
- pseudo class selectors
- responsive mixin
- any sub element styles using the same structure
I should probably verify the good usage of semantics on the page.
- Frontend Mentor - @yourusername