Skip to content
Submitted almost 2 years ago

Clipboard Master Website - Using Flexbox

Devesh shukla•280
@deveshshukla
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

🫡 Hello, Frontend Mentor Army. This is my solution for the Clipboard Master Website

Another great Challenge by Front-End Mentor #LearningByDoing

Working on a project after a gap 😅 feels like most of the basic things have been forgotten, But happy to complete this complete website project to help me to reactivate my basic web development powers. 😂

I'll be happy to hear any useful feedback and advice! 🙌

Community feedback

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

    Hi, Devesh Shukla! 👋

    I have some suggestions to improve this solution.

    • Make bg-header-desktop.png the background image of the <main> or <body> element instead of making it an image element.
    • Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (<img>) so the screen reader will pronounce it as an image.
    • Alternative text for the logo should be the company name—Clipboard.
    • Use <a> with download attribute for the download buttons.
    • Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, they can get confused.
    • Dive deeper — How-to: Accessible heading structure - The A11Y Project
    • There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.
    • Wrap each social media link with an anchor tag. Then, remove the word "link" inside the alternative text of each social media icon. The semantic meaning of the anchor tag will make assistive technologies pronounce them as links.

    I recommend using inline SVG to change the color of the social media icons on hover. On CSS, I recommend doing the following things to make the <svg> elements inherit the color value of their parent element.

    svg {
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

svg path {
  fill: currentColor;
}

    Doing this will allow you to do a:hover { /* change color */ } to change the color of the SVG on hover.

    I hope you find this useful. 🙂

    1
    Devesh shukla•280
    @deveshshuklaPosted almost 2 years ago

    @vanzasetia Hey Hi 🖐️, Thanks for the suggestions... I will consider it next time. 🫡

    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