Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sunnyside Agency Landing Page

#react
Misiu 50

@misiucodes

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi FEM community,

Who thought what looks like a simple landing page could be so difficult! Some of the areas I struggled with that I would love advice/words of wisdom on are:

  • I coded this using React - any advice on how to structure my files/best practices for this would be great as I continue learning
  • Are there any rule of thumbs for when to use flexbox vs. grid?
  • When it came to making this design mobile-responsive, I really struggled and had to make a lot of media queries. How could I have structured my code better so that I only need to do minimal media queries?
  • What's the best way to have coded the underline styling for the "learn more" buttons so that no matter what screen size, it remains responsive?
  • Not sure about the code for my drop down menu - how can I make it ease out more smoothly when a user exits the drop-down menu?

Thanks all,

newbie coder

Community feedback

Ren Ras 420

@renras

Posted

Try wrapping your nav inside a div and apply the positioning on that instead and add overflow: hidden on the nav;

<main style={{position: relative}}>
 <div style={{position: absolute}}>
  <nav style={{overflow: hidden}}></nav>
 </div>
</main>

I successfully recreated the animation you're trying implement here in this codepen: https://codepen.io/renras/pen/XWVooXg

0
Anna Leigh 5,135

@brasspetals

Posted

Hi, Misiu! Congrats on completing another challenge! 🎉

To your questions:

  • While I’ve been learning Svelte rather than React, I did find Josh W Comeau’s guide to React file/directory structure helpful.
  • Here's a decent article on Flexbox vs Grid. Personally, I tend to abuse Grid and use it for most things. 😂
  • When it comes to media queries, I try to stick to two “sets” (base styling for mobile, 1 query for tablet, 1 for desktop), but sometimes you’ll have certain elements that need a little extra. 🤷‍♀️ Responsiveness for this one is really tricky, and media queries are definitely needed.
  • For the underline styling on the “learn more” links, I find the best way is to use ::before or ::after pseudo-elements. I see you're already utilized a pseudo-element in your mobile menu, so won't get into full instructions. Although if you have trouble getting it to work, please let me know, and I'll be happy to help you out. 😄
0

Please log in to post a comment

Log in with GitHub
Discord logo

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