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

Photosnap - React, Web-First Solution

Vanessa Martinā€¢ 155

@vsm1996

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

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


This project was extremely fun and a bit challenging. I seem to have run into a strange problem in mobile, where the body gets pushed to the left, and I cannot tell what is causing it in dev tools. If anyone has any suggestions, please help!

Otherwise, I enjoyed this challenge. The layout was different enough from what I usually create to really make me think about code layout, as well as my use of classes, which could use some work.

I would like to note that the table for the Pricing page is missing. This is intentional. I will add it at another time.

If you have any other suggestions, please do not hesitate!

Thank you all! āœØ

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hi Vanessa, congrats on this project! I'm not getting the 'body being pushed to the left' bug, but there's a few things I noticed:

  • The nav isn't behaving as expected on mobile. Better to put the logo and hamburger at flex rather than block

  • I also think the nav items are not ready to be laid out at 651px. The Get an invite CTA in particular, looks more like a div than a button.

  • story__cards can be wrapped in an a tag. There's also two of <small class="story-(description)"></small> in each card.

  • The footer nav list seems a little off on tablet and desktop widths

  • The social media icons could use a tags and hover states

  • There's a bit of accessibility / HTML issues to address in the report

Lastly, I suggest going mobile-first for the next one. It'll probably be easier and you'll end up with less code.

Hope this helps :-)

2

Vanessa Martinā€¢ 155

@vsm1996

Posted

@emestabillo Hi!! Thank you so much for all of these great suggestions. I will work on them as soon as possible!

1

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