martinorue / sunnyside-agency-landing-page

Frontend Mentor project: Sunnyside-agency-landing-page

Frontend Mentor - Sunnyside agency landing page solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Questions
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

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

The challenge

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

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.

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• SASS

What I learned

• 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

Continued development

• Learn the ARIA roles and attributes to make my sites more a accessible
• Learn CSS animations
• Learn more SASS advanced concepts

Useful resources

• Stop using @import with Sass | @use and @forward explained
• CSS Triangle

Author

• Frontend Mentor - @martinorue

Acknowledgments

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.