This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This is my first project using SASS and I made a huge effort in order to follow the good practices, such as using @forward and @use instead of @import
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
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
This is my first project using SASS. As it was going to be a bigger project, I wanted to tackle a technology that would allow me to have the code more organized, and I think I succeeded. Soon I would like to learn how to handle media queries with SASS and understand a bit better the differences between @import and @use. And to learn how to use more advanced concepts like Mixins.
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- SASS
- Sass
- The use of @use and @forward instead of @import (deprecated)
- How to make an accessible modal menu hamburger style
- I wasted a lot of time trying to adjust the background image for the header. Then I realized I was using the desktop image instead of the mobile one. The lesson to be learned is to always make sure you are using the right image and don't get stuck on a problem for hours, just move on with the rest.
- Absolute Positioning
- How to change the fill attr of an SVG image
- Learn the ARIA roles and attributes to make my sites more a accessible
- Learn CSS animations
- Learn more SASS advanced concepts
- Frontend Mentor - @martinorue
This repository from Josué Oroya gave me the idea of using absolute positioning for the Services section and to know how to apply hover on an SVG image. Así que, si algún día lees esto, te mando un saludo desde Uruguay.