Skip to content
Submitted almost 4 years ago

Photosnap - React, Web-First Solution

Vanessa Martin•155
@vsm1996
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Photosnap multi-page website
  • HTML
  • CSS
  • JS
4advanced

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

  • Emmilie Estabillo•5,540
    @emestabilloPosted almost 4 years ago

    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
    @vsm1996Posted almost 4 years ago

    @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

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