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

• Frontend Mentor - Sunnyside agency landing page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

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: @github
• Live Site URL: @github pages

My process

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• Sass - Sass makes CSS fun again.
• Flexbox
• CSS Grid
• JavaScript

What I learned

I learned how to use Sass and many of its core features like variables, functions, and mixins. Likewise, I learn how to use partials and how to implement them with the @use and @forward methods.

While they were not new topics, I got some really good practice at using absolute and relative positioning. I must admit that I had only used them in very limited capacities before, but it seemed natural to use those methods on the navigation menu and the services section (text overlaid on the cherries and whole orange images).

Continued development

This was my first solo project using Sass and it will not be the last. For the next project, I will try to implement the 7-1 pattern, or something very similar.

Useful resources

• Learn Sass in this Free Crash Course - Give your CSS Superpowers! by DesignCourse - This video by Gary at DesignCourse was a good re-introduction to Sass and covers all the basics with simple examples.
• Get your stylesheets more organized with Sass partials by Kevin Powell - I really like Kevin Powell and his teaching style. I used this and 3-4 of Kevin's videos on Sass and found them quick and to the point. I particularily liked the videos on starting projects with Sass, howe to organize files, using partials, and using @use/@forward instead of the @import.
• Sass Tutorial for Beginners - CSS With Superpowers by codeSTACKr - This was a great video covering the fundamentals for Sass, hosted by freeCodeCamp.org.

Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.

Author

• Frontend Mentor - @davidrhyne
• Twitter - @DavidRhyne16