Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Art Gallery Website

Sang Leβ€’ 520

@sqle157

Desktop design screenshot for the Art gallery website coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi,

This is my solution for this challenge. Feel free to leave any feedbacks! It's not the best solution out there but it's best one I can pull off for now.

Happy coding!

Community feedback

Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

Hi, Sang Le!

Congratulations on completing this challenge! πŸŽ‰

Some suggestions from me.

  • Based on the design comparison, the font family for the paragraph element is different from the design. So, I recommend fixing it.
  • For the gallery__heading, I recommend wrapping it with one h1. You can use span to break the text into two lines or limit the width with max-width.
  • Each page should only contain one h1. h1 is used as a unique identifier for each page so that's why. So for the footer__heading, change it to h2.
  • Wrap each social media icon with an anchor tag. Those are links to the social media accounts of the company.
  • Never use 100vw on anything as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
  • I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

That's it! Hope this helps! Happy coding! πŸ˜„

Marked as helpful

2

Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

@sqle157 Please remove the art-gallery-website-sketch.zip. It contains the design file which is against the license ("Re-selling or distributing free or premium challenge design files"). Next time, there's no need to upload the zip files and starter-files to the GitHub repository.

Also, it's best to keep the .gitignore file and upload it to the GitHub repository. It will prevent you from accidentally committing the design file as well. πŸ™‚

1
Sang Leβ€’ 520

@sqle157

Posted

@vanzasetia thank you for your feedbacks! It’s really helpful and informative

0
Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

@sqle157 No problem! Don't forget to remove the zip files and the starter-files. πŸ™‚

0

Please log in to post a comment

Log in with GitHub
Discord logo

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