Submitted almost 3 years ago

Landing Page using Vue3 + Vite with Mobile-first workflow

Joanne Wang• 135

@joanneccwang

Preview site View code

This is a solution for...

Sunnyside agency landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

In this project, the biggest takeaway for me is learning how to work with JS media queries using window.matchMedia() method. Reference from CSS Tricks

// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')
const handleMediaQueryChanged = (e) => {
  // Check if the media query is true
  if (e.matches) {
    // Then log the following message to the console
    console.log('Media Query Changed!')
  }
}
// Register event listener
mediaQuery.addListener(handleMediaQueryChanged)
// Initial check
handleMediaQueryChanged(mediaQuery)

-- Any feedback is welcomed. Thanks in advance!

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 3 years ago

Hello there, Joanne Wang! 👋

Well done on this challenge! 👍 Your solution looks pretty nice and is responsive! 😀

One minor issue I noticed is that there's quite a bit of space between the navigation links in the footer of the page when the layout of the site first changes from desktop/tablet to mobile (around 750px). You might want to set a fixed amount of space between those links so that there's never too much (or too little) room between them. 🙂

It also might be worth taking a look at your solution report and trying to clear up some of the errors that are there in order to improve the accessibility and semantics of your solution. 😉

Keep coding (and happy coding, too)! 😁

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord