Skip to content
Submitted over 2 years ago

Stats preview card component [Responsive design]

accessibility
George Bleyer•280
@georgebleyer
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello DEVS

I just completed this challenge. It went quite well, though. In this project I tried to make it more semantic using some specific elements for divisions (<main>, <picture> and <section>. I also used @media only screen and (min-width: 900px) to change the layout to mobile for desktop and change the images

I would be grateful if you could give some feedback or show where I made mistakes.

Code

Please log in to post a comment

Log in

Community feedback

  • Shaxboz•1,210
    @shakhboz-shukhrat

    Hello there👋! Congratulations on completing this challenge!

    The code seems to be well-written and there are no major issues. However, there are some suggestions that can be implemented to improve the code:

    1. Add a doctype declaration at the beginning of the HTML file to indicate the document type and version. For HTML5, use <!DOCTYPE html> at the beginning.

    2. Include a lang attribute in the html tag to indicate the language used in the document. In this case, it is "pt-br" for Portuguese Brazil.

    3. The CSS reset and normalize stylesheet links are commented out. If they are required, they can be uncommented and added to the head section.

    4. The picture tag is not properly formatted with an img tag inside it. It is recommended to use the img tag instead.

    Here's the revised code:

    <!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="George Bleyer" />
    <title>Frontend Mentor | Stats preview card component</title>
    <link rel="shortcut icon" href="assets/images/favicon-32x32.png" type="image/png" />
<link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
    <main>
      <img class="imagem" src="assets/images/image-header-desktop.jpg" alt="Header image" />
      <section class="texto">
        <h1>Get <span>insights</span> that help your business grow.</h1>
        <p class="espaco">
          Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.
        </p>
        <section class="dados">
          <div class="companies">
            <h2>10k+</h2>
            <p>COMPANIES</p>
          </div>
          <div class="templates">
            <h2>314</h2>
            <p>TEMPLATES</p>
          </div>
          <div class="queries">
            <h2>12m+</h2>
            <p>QUERIES</p>
          </div>
        </section>
      </section>
    </main>
  </body>
</html>

    Anyway, your solution is great. Hope you will find this helpful. Happy coding!

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