Submitted over 3 years ago

Photosnap solution mix of flex and grid!

Rafal• 1,395

@grizhlieCodes

Preview site View code

This is a solution for...

Photosnap multi-page website

HTML
CSS
JS

4advanced

View challenge

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:

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.
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

@ApplePieGiraffe

Posted over 3 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

Rafal• 1,395

@grizhlieCodes

Posted almost 3 years ago

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

Better late than never 😅

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 3 years ago

@grizhlieCodes

Oh! Haha, no worries! 😄

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

But thanks, I guess! 🙏

Please log in to post a comment

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