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

Insure Landing Page (took me over a month, please give me feedbacks)

@jesuisbienbien

Desktop design screenshot for the Insure landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, it's been a while since my last project. This one was challenging because I just started doing "Junior" level projects. I hope to receive as many feedbacks as I can. Thank you in advance!

Questions: 1- How can I make the sliding transition of my mobile menu smoother? 2- How can I make my webpage look better at about 945px? The image got cut off top. 3- Any suggestions on my javascript?

Other feedbacks are always welcome, ofc! Happy coding!

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello, Nguyen Nguyen! 👋

Good work on this challenge! 👍 Your solution looks good and your HTML is semantic! 👏

Here are a few things I'd like to suggest,

  • Adding some hidden text inside of or adding an aria-label to each of the social media links in the footer of the page. That's so that these elements can be identified by screen readers. Doing so should help get rid of a couple errors on your solution report. 😉
  • Adding overflow-x: hidden to the body to prevent any unwanted horizontal scrolling on the page.
  • Adding a max-width to some of the text elements on the page in table views so that they aren't so wide when the layout first changes from desktop to tablet (this should help improve the look of a couple of things at around 945px).
  • Considering splitting your Sass file into smaller files (called partials) since your main Sass file is quite long (over 400 lines). Doing so will help keep your project organized and make it easier to write and maintain your styles.

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

2

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

One more thing! 😆

If you'd like to make the transition of your mobile menu smoother, set the value for left for the menu container to -100% (not -1000px). This'll ensure that the container is offset to the left by just the right amount and the transition in/out will be much slower and therefore smoother. 😉

Marked as helpful

1

@jesuisbienbien

Posted

@ApplePieGiraffe wow! thank you so much for your response. I really appreciate it.

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@jesuisbienbien

Glad to help! 😀

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