Skip to content
Submitted over 2 years ago

Art Gallery solution using responsive, leafletjs and many css tricks

P
J Cooper•290
@jefcooper
A solution to the Art gallery website challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The Art Gallery homepage provided several challenges that didn't seem "junior":

  • the white/black text on the desktop hero section requires much CSS trickery involving duplicating the text, calc() offsets and clip-path: inset().
  • the map is using the LeafletJS library as suggested. The grayscale appearance required !important to override a leaflet CSS class with greater specificity.
  • the map custom marker was exported as svg from the Figma design and then incorporated inline in the javascript to render on the map.
  • the map defaults to using jestures for zoom on mac and ios. This makes the location page not easily scrollable. I changed the options to disallow two finger zoom in order to make scrolling the default.
  • responsive layout was complicated by the design choices that led to reordering and refactoring html.
  • accessibility was tested with keyboard and voiceover on mac. The hero title caused some surprises here when the screen reader read the title twice. This led to using aria-hidden on the white/black styled heading and including a visually-hidden h1 specifically for the screen reader.
Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    This looks really nice!

    Just a few things...

    • having a repeating h1 is never a good idea. I wonder if there is a different way around that, like using aria-labelledby instead pointing to the text in a span
    • you are using forms and buttons for navigation when you should just be using anchor links. That's what they are for
    • there are some repeating alt descriptions in this
    • it's not great for performance to load two stylesheets unnecessarily. Concatenate them into one
    • all of your svgs are already accessibly labelled (or their wrapping elements are) so you need to make them aria-hidden true and focusable false. This will prevent some screenreaders from announcing them as images and from focusing on them. (Same with the marker icon on the map)
    • 99 king street makes no sense as a heading... It's a paragraph. Or could be part of an address element.
    Marked as helpful

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