Skip to content
Submitted over 1 year ago

Art gallery with pure html and tailwindcss

Po-Cheng Yeh•190
@blp100
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Art gallery website
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

This challenge is truly inspiring to me. The styles, colors, and spacing, everything is absolutely perfect, which fuels my passion for becoming a frontend developer. I love creating beautiful things and bringing them to life.

Taking on this challenge is also a great opportunity for me to explore map development, an area where I have little experience.

I'd like to share a useful pure CSS animation page which I figure out how to write my own button. CSS Animation Button

And another great gradient tool. [CSS Gradient] https://cssgradient.io/

After completing this challenge, I realized how fascinating it is to create custom CSS animations from scratch. Additionally, I discovered that importing and implementing a map is not as difficult as I initially thought, but customizing the map styles presents another challenge.

I would like to refine the map styles later. And it's time to take on the Boss level.

Community feedback

  • BrunoMoleta•700
    @brunomoletaPosted over 1 year ago

    Hello Po-Cheng, I would advise you not to use margin so often as it is more responsive to frequently use the alignments from flex and grid. Such as justify-items: center.

    To be more specific, there was an alignment you set on the <h2> Your day at the gallery</h2> where you used margin-top on it. That in my browser (Firefox) misaligned the text (the h2 and the p) with the image. Also about this heading, I suggest that you use a max-inline-size: 8ch instead of a <span>. It would be easier to adjust further design choices, more maintainable.

    And looking at the overall HTML organization, you could have used a <main> tag with two <section> tags instead of a <section> with two div children.

    I saw your effort in documenting your debugging of the Css on the READ.me file you wrote, and congratulations on that. I ought to do some of that :)

    Keep the hustle, Best regards from Brazil

    Marked as helpful
    1
    Po-Cheng Yeh•190
    @blp100Posted over 1 year ago

    @brunomoleta Thanks you, Bruno. I will fix it later as your suggestion. Also, I wasn't aware of the CSS attribute max-inline-size: 8ch before. Your advice is greatly appreciated!

    By the way, I'm excited to share some new stuffs that can be helpful for your development journey! Hope you enjoy it!

    And Thank you for the motivation! Best regards from Taiwan

    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