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 - BEM, Flex Box, Grid

花火 0

@satabi

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👋!

This project took me 12 days to complete. The project is somewhat difficult but overall I learn a lot.

Any feedback is appreciated.

Community feedback

@Yashs05

Posted

Don't take me wrong, but you should really improve your pace. If its your first project then its good, but single pages like this should not take 12 days. Happy coding! Many more to come.

Marked as helpful

0
Ahmed Faisal 5,095

@afrussel

Posted

Hi, nice work. the hamburger menu is looking good from my side. Cool animation :). Actuaaly if you aren't a Pro user then its hard to code without having design files like figma /sketch. I just recommend one thing, while clicking on WE ARE CREATIVES down arrow it just go to next section with animation.

Happy coding

Marked as helpful

0

@Sloth247

Posted

Hi, it looks good. However I still see the modal is kept open when I move from mobile view to desktop view. I suggest you set up conditions regarding media query in JS or convert navigation to modal in CSS on media query for mobile view.

Marked as helpful

0

@Yashs05

Posted

@Sloth247 Hey! Can you tell me how to overcome this problem using conditions in Javascript. I am also facing the same problem and tried something like: if(document.getElementById('mainContainer') == "500px) { modal.style.display = "none" } else {Some code here} but it didn't work out.

0
P
Chamu 12,970

@ChamuMutezva

Posted

Some of the issues that needs attention includes the following:

  • consider using semantic html where possible instead of divs. Elements such as header, main, footer , nav etc
  • the hamburger is supposed to interactive , hence the need to use a button - since you have used a div , you need to provide the mechanism that will enable assistive technology users to identify it as a button
  • as for headings , it is important to have only one h1 element per page , having more than one h1 element does not cause errors but is considered bad practice. Do not skip headings, they must ascend in order. Use css to control the size

Marked as helpful

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