Skip to content
Submitted about 3 years ago

Art gallery website | HTML, CSS, JS

sass/scss, typescript, webpack, gsap
P
Christopher Adolphe•620
@christopher-adolphe
A solution to the Art gallery website challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello frontend friends! 👋

This was long overdue but I finally completed my 2nd challenge on Frontend Mentor. 🎉 This project was an opportunity for me to test new approaches on the way I write my CSS.

Major challenge(s):

  • I started using Sass maps with @each rules to generate helper classes easily. It is not perfect but I think is a good start.
  • I started using custom CSS properties to better organise my CSS and reduce repetition.
  • Getting the grid as per the design was more challenging than I thought. I initially started with by defining the height of each row for the main content for different viewport widths but I soon realised that this was difficult to maintain. I finally found an efficient solution by using the minmax() function with the grid-template-columns and grid-template-rows properties.

Your feedback would be much appreciated, especially if you have other ideas about how to better implement custom CSS properties in your workflow.

Thanks in advance. 🙏

Code

Please log in to post a comment

Log in

Community feedback

  • Anna Leigh•5,135
    @brasspetals

    Hi, Christopher - Awesome job on this solution! 🙌 The GSAP animations on this are simply fantastic! Between you and ApplePieGiraffe, I think I'm finally convinced to start using it rather than just keyframes. 😄

    The only small thing I noticed is that from 769-800px the text in the header overflows and gets cut off. Tweaking the transform: translateX() might be the simplest solution. 🤔

    Again, great job on this one - looking forward to seeing your next solution!

    Marked as helpful
  • Rachael•610
    @RMK-creative

    Wow Christopher, well done on this challenge! I plan to spend some time reading your code because I think I can learn a lot of new things from you - thanks for sharing! I've been wanting to try out GSAP and seeing your work has inspired me to jump in and give it a go :)

    Just one thing I came across - the leaflet map is blank on loading, I get the location pin but the actual map is empty so maybe something worth looking into. I tried on 3 different browsers with and got the same issue on each.

    Marked as helpful
  • P
    Christopher Adolphe•620
    @christopher-adolphe

    Hi @RMK-creative,

    Thank you. 😉

    Yeah feel free to go through the git repo, you'll hopefully find something useful. As for GSAP, I recently started using it as well and I can tell you that you can do awesome stuff with that.

    As for the interactive map, this morning I did some changes to move the mapbox access token to an environnement variable on Netlify. I must have done something wrong. Thanks for notifying. I'll check it out.

    Best regards.

  • Francisldn•250
    @francisldn

    Well done @christopher-adolphe, love your solution, so many learning points for me. Cool animation with GSAP. I'm gonna start using it in my project.

  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline

    Looks awesome!

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