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

Multi Page site - lots of animation and UI treats.

David Payne• 1,205

@dpayne713

Desktop design screenshot for the Designo multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am going to continue on with this project working on dynamically generated 'body' content so the header and footer stay in place and the rest generates. I also plan to update the 'locations' page to have better maps instead of just the placeholder images.

Happy to hear any notes / suggestions / formatting-bugs discovered.

Community feedback

P
Matt Studdert• 13,611

@mattstuddert

Posted

Amazing work on this challenge, David! You've done a really good job. Grace has made some great points for the mobile layout. Your layouts scale up/down really well for different device sizes, so you've done really well on the responsive side of things.

You can also tell you've paid a lot of attention to detail, which is brilliant. I like the added animations and hover effects. They add a nice polished feel to the project!

One thing I noticed on the form is that you use a span element to give the label/placeholder visual effect. Instead of span elements, I'd recommend using a label elements with for attributes tying each label to the corresponding input for accessibility purposes. At the moment, people who use screen reader software wouldn't know what each field is for.

I hope that helps. Keep up the great work!

2

David Payne• 1,205

@dpayne713

Posted

@mattstuddert

Thanks Matt, I will change the spans in the form - to be honest it completely slipped my mind!

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@dpayne713 no problem!

0
P
Grace• 27,630

@grace-snow

Posted

Hey David, Really great work on this, I like it a lot!

I'm viewing on mobile and have noticed a few small layout issues you may want to fix:

  • There's horizontal overflow on most pages, most noticeable in those ones off the homepage like Web design. When I scroll sideways there's a block of whitespace to the right

  • The hero text on homepage is touching the button underneath - probably needs some margin

  • I haven't seen the mobile design images so hard to tell if it's a bug or how the design is, but sometimes text goes closer to the edges of the screen than say images or other blocks. Usually designs try to keep consistent space on both sides.

Anyway, that's all from me for now. Nice work again ☺

2

David Payne• 1,205

@dpayne713

Posted

@grace-snow

Thank you for the heads up on these mobile issues you found. I'll take a look at these.

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