This is a solution to the Huddle landing page with alternating feature blocks 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 site depending on their device's screen size
- See hover states for all interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- SASS
- BEM
- px to rem - VSCode snippet
Firstly, I've learned to use @forward and @import SASS directives instead of @import. Secondly, I've started to use package.json more reasonably and I believe this is a start of learning npm and build tools for me.
- A modern CSS Reset - This is a reset stylesheet I am planning to use in my following coding projects
- Modern Fluid Typography Using CSS Clamp - This is an amazing article which helped me finally implement CSS Clamp for fluid change of font-size between screen sizes, while mixing rem and vw to express font-size. I'd recommend it to anyone still learning this concept
- Accessible icon links - An article on writing accessible icon links
- CSS filter generator - A codepen snippet for applying filters to icons
- SmolCSS - Minimal snippets for modern CSS layouts and components
- Minimum Static Site Setup with Sass -
- Website - spaprocki
- Frontend Mentor - @spaprocki