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
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

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

Links

• Solution URL: https://www.frontendmentor.io/solutions/sunnyside-agency-landing-page-svelte-css-grid-keyframes-B1UGumXV5
• Live Site URL: https://fm-sunnyside-landing-page.vercel.app/

My process

Built with

• Svelte
• CSS Grid
• Keyframes animation

What I learned

I utilized a local variable in conjunction with a svelte variable to determine the color of the "underline" in the LinksUnderlined component. Not sure if this is best practice as it feels there should be a simpler way to do this, but it works! Update: Now using the method found in this Svelte REPL to implement a CSS variable for the LinksUnderlined color.

This was my first time using the svelte:window property, which I used to bind the innerWidth value to a variable. This was handy in passing another condition to the Svelte if statement that determines whether the menu in the Nav component is shown or not.

<svelte:window bind:innerWidth={width}/>
...
 {#if active || width >= 800}
    <ul class="menu" ...

Useful resources

• "px to rem" VSCode extension - an absolute time saver.
• Svelte CSS Variables REPL