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
  • Useful resources
• 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

Links

• Solution URL: Sunnyside Agency Landing Page Solution
• Live Site URL: Sunnyside Agency Landing Page Live Site

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• SCSS

What I learned

I learned more about SCSS and how to control Navigation Menu using Javascript when viewed on mobile screen. I learned more about CSS Positioning. I learned how we can use DOM Manipulation to change the style of element(s). I learned how to use html "picture" tag to show different images on different screens.

<picture>
  <source
    srcset="./images/mobile/image-gallery-milkbottles.jpg"
    media="(max-width: 576px)"
  />
  <source srcset="./images/desktop/image-gallery-milkbottles.jpg" />
  <img
    src="./images/desktop/image-gallery-milkbottles.jpg"
    alt="Milk Bottles"
  />
</picture>

main .hero img {
  width: 4ch;
  position: relative;
  top: 80px;
}

navIcon.addEventListener("click", (e) => {
  navItemsContainer.classList.toggle("display");
});

for (let i = 0; i < socialSvgs.length; i++) {
  socialSvgs[i].addEventListener("mouseenter", () => {
    svgPath[i].classList.add("svg-white");
  });
  socialSvgs[i].addEventListener("mouseleave", () => {
    svgPath[i].classList.remove("svg-white");
  });
}

Continued development

I still have lots to learn about Frontend Development. I still need to do more projects to be a better Developer in the future. And now I think I am ready to do more JS related Frontend Projects.

Useful resources

• W3Schools - I learn Basic SASS from its SASS lessons.
• Traversy Media SASS Course Video - Great Video for learning SASS.

Author

• Frontend Mentor - @chetanhaobijam
• Twitter - @chetanhaobijam