Submitted almost 2 years ago

Flex-Box

Jair Rodriguez• 310

@Jairth

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I liked this project

Community feedback

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hello @Jairth, Congratulations on completing this challenge!

Your solution its almost done and I’ve some tips to help you to improve it:

A better way to work this solution image, the product image is by using <picture> to wrap it on the html instead of using it as <img> or background-image (with the css). Using <picture> you wrap both images (desktop and mobile) and have more control over it, since you can set in the html when the images changes setting the screen size for each image.ote that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image.

Here’s the documentation and the guide to use this tag: https://www.w3schools.com/tags/tag_picture.asp

✌️ I hope this helps you and happy coding!

Marked as helpful

Jair Rodriguez• 310

@Jairth

Posted almost 2 years ago

@correlucas Thanks for the advice! I knew that way of adding the images, but I didn't know it helped with SEO, I will keep it very much in mind in my next challenges. Thank you very much ^-^

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

Hi Jair Rodriguez, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements or ARIA reference regions.

Example:

native HTML5 reference elements:

<body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

ARIA best practices call for using native HTML5 reference elements instead of ARIA functions whenever possible, but the markup in the following example works:

<body>
     <div role="banner">This is the header</div>
     <div role="navigation">This is the nav</div>
     <div role="main">This is the main</div>
     <div role="contentinfo">This is the footer</div>
</body>

It is a best practice to contain all content, except skip links, in distinct regions such as header, navigation, main, and footer.

Link to read more about: click here

The rest is great!

I hope it helps... 👍

Marked as helpful

Jair Rodriguez• 310

@Jairth

Posted almost 2 years ago

@AdrianoEscarabote Thanks for the recommendation! I will keep it in mind, thank you very, very much ^-^

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

@Jairth no problem, keep coding!!

Please log in to post a comment

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