This is a solution to the Photosnap Website 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 each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScript
- Writing utility-first css makes code DRY and more maintainable.
- some new layout with Flexbox and Grid.
- Some deeper understanding of position: absolute;
- changing style of SVG programatically.
- making responsive mobile navigation menu with vanilla js
- how to use css combinator more precisely.
- making images responsive in HTML.
- :focus-visible, :focus-within pseudo class for enhancing user accessibility.
- how make good folder structure of SASS files.
- 7-1 Sass Architecture - I really liked this pattern and will use it going forward.
- Kevin powell - This guy is really making awesome tutorials on css. I'd recommend his channel to anyone who want to deep dive into css.
- Frontend Mentor - @abhijitbcob
- Twitter - @Abhijit46752961