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

Stats-preview-card-component

@AlanGabales

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedback is welcome, it takes time but I learn lot

Community feedback

Sachin 830

@SachinKumarMahato

Posted

Good job for completing the challenge

As a front-end developer, your primary task is to transform the designer's visual concept into a functional website. The objective is to ensure that the final website closely resembles the original design. However, if there are noticeable differences between the website and the intended design, it's important to address this issue. use the build frotend mentor design comparison tool.

"It seems that CSS reset is not being fully utilized in the code."

CSS resets are often overlooked in web development, but they play a crucial role. They provide a starting point for consistent styling across different browsers. By neutralizing default browser styles, CSS resets create a clean slate for developers to work with. However, many developers underestimate their importance, leading to inconsistent styling and layout issues. Embracing CSS resets can greatly enhance the predictability and consistency of web design, resulting in a smoother user experience across various platforms and devices.check this link

Lack of semantic HTML

  • Semantic HTML elements are missing.
  • The structure does not convey the meaning and purpose of different parts of the webpage.

Usage of absolute units instead of relative units:

  • Absolute units like pixels (px) are used for defining lengths and sizes instead of relative units like percentages (%), em, or rem.
  • Relative units are more flexible and responsive across different screen sizes.

For improved accessibility 📈 for your content, it is best practice to use em ✅ for media queries. Using this unit gives users the ability to scale elements up and down, relative to a set value use this link to learn about media queries. CSS tricks

I hope you find this helpful and happy coding

1
Vanza Setia 27,835

@vanzasetia

Posted

Hi, Alan C. Gabales! 👋

Here are a few ways you can do to improve this solution:

  • All the page content should live inside landmark elements: Users of assistive technology can navigate through landmark elements. This will help them quickly navigate a website or application. In this case, the children of the <body> should be landmark elements; <main> for the card, <footer> for the attribution (if you want to have an attribution).
  • Wrap the text with a meaningful element: For example, use a paragraph element to wrap the text. There should not be text in <span> and <div> alone.
  • Use a list for the statistic: Use a list element for the company's statistic.
  • Do not use pixel unit for font sizes: Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting (as @Sachin0000000 mentioned earlier). Learn more — Why you should never use px to set font-size in CSS
  • Use <picture> element for the card's image: You can make the image responsive—which means switching from the mobile to the desktop version—by using the <picture> element. Then, you can use the mix-blend-mode property to create the purple overlay.

I hope this helps. Happy coding! 👍

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