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
  • Continued development
• Author

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

• (./screenshot/desktop.png.jpg) - desktop preview
• (./screenshot/mobile.png.jpg) - mobile preview

Links

• Solution URL: Github Repository
• Live Site URL: Github Page

My process

The first thing i did was to build up the Semantic HTML structure to have a general idea on how i will do the layout and split every in simple elements so can style them efficiently.

For this challenge i decided to test the things i read about 7-1 pattern on SASS so i start making a folder architecture like abstracts, base, and etc.

Next thing is putting classes on my HTML. I also studying the BEM methodology in naming classes that's why i used BEM.

I style the page starting from the top using mobile first approach, from header to footer.

I kinda get stuck on making the navigation menu for the mobile. this is my first time making one so tried to watch some tutorials first on making a basic one and then i tried to do it myself given with the designs need to have.

Next thing is to build the style for the desktop view i make a breakpoint for the tablet which is 750px and i used it on every element, a lot of try and error i guess.

Finally some finishing touch like hovers and animation.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Syntactically Awesome Style Sheets - For styles
• 7-1 pattern SASS Architecture

What I learned

I learned a lot of things during this challenge like organizing my html architecture by semantic html tags like section, nav, footer. Also tried out the 7-1 pattern on SASS and BEM methodologies for naming classes. I also gain a knowledge on how to build a responsive navigation bar with a hamburger button.

Continued development

Although my architecture on both html and css/sass is kinda messy yet i want them to improve by practice and practice on building websites. Also to improve on responsiveness and more efficient way to approach these kind of problems. I think for my next project i will focus and study more about responsive typography.

Author

• Frontend Mentor - @khaizter