Skip to content
Submitted almost 2 years ago

Art gallery website

Edvvard•140
@edvvarrd
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

Time for a next challenge - I'm open for any feedback, especially for some help with changing color of SVG images with CSS? I tried everything and it doesn't want to work with me.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Edvvard!

    About changing SVG colors, you need to use inline SVG. After that, on the CSS you can set the following styling as your base styling:

    svg {
  fill: currentColor;
}

svg path {
  fill: currentColor;
}

    This way, the icon will inherit the color value of the parent element. For example, if you set color: red to the a, the parent element of the social media icon, then the SVG will have red color.

    I have some suggestions to improve this solution.

    • Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
    • For your information, decorative images are images that don't add any information and serve only aesthetic purposes. For example, the hero image.
    • The first section of the page should live inside the <main> landmark. There is no <header>. <header> landmark is used to wrap the navigation element which doesn't exist in this case.
    • Try replace <div class="top__black"> with pseudo-element.
    • Use CSS to uppercase the text. Screen readers might spell the uppercased word in the HTML (spelled letter by letter). (<h2>COME & BE INSPIRED</h2>)
    • <h3>Modern Art Gallery</h3> should be <h2>. It is not a sub-section of the above section.
    • Learn more — How-to: Accessible heading structure - The A11Y Project
    • Remove the word "page" from the label of each social media link. The semantic meaning of the <a> tag is already enough to tell the users that it will navigate them to another page.
    • Prefer unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN
    • Use em for letter-spacing. This way, it will automatically adjust based on the font size of the element.

    Don't change the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.

    I hope this helps. Happy coding!

    Marked as helpful
    1
    Edvvard•140
    @edvvarrdPosted almost 2 years ago

    @vanzasetia Hello, Vanza, thank you so much, it helps a lot!

    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