Skip to content
Submitted almost 4 years ago

Photosnap solution mix of flex and grid!

Rafal•1,395
@grizhlieCodes
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

Hi Community!

Firstly: I had a time limit for this so I didn't have time to correct some images which means I only used the mobile and desktop version, skipping mobile. I did the proper fix on the pricing page just to see if I can do it.

First challenge i took up after I learned about this service!

I focused entirely on just practicing 2 things:

  1. Using someone elses design instead of my own. This was TOUGH. When I design I think developer-friendly I guess. So using another design forced me to use grid, was great.

  2. HTML/SCSS structure. I found it hard to order my SCSS in a logical way as this was the biggest project I've done to date. I'd love any feedback/criticism on this.

I didn't focus on accessibility, apologies for that. By that I mean adding alt="" into my images, etc. I gave myself a limited time and struggled following another person's design. Ended up redoing a LOT of the HTML and SCSS within the week I coded this after work.

Thanks for the awesome challenge to the designer, loved it.

P.S. I wanted this to be imperfect as I struggle putting out work that feels unfinished. Tough but managed to upload it........

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hey, great job on this challenge, sravan (especially considering you put yourself on a time limit)! 👏

    Everything looks very good and responds well! I really like the gradient-fill colors for the social media icon hover states! 🤩

    Besides those few accessibility issues (which you mentioned), I think you've done well! Glad to hear you enjoyed this challenge (congratulations on finishing your first one, too)! 🎉

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    1
    Rafal•1,395
    @grizhlieCodesPosted over 3 years ago

    @ApplePieGiraffe Embarrassed to say, I forgot to mark this as helpful back in December.

    Better late than never 😅

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @grizhlieCodes

    Oh! Haha, no worries! 😄

    The marked as helpful buttons weren't even there, then! 😂

    But thanks, I guess! 🙏

    0

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