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

second project challenge front_end mentor

faizan 2,420

@afaiz-space

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


my second challenge on front-end mentor.

Community feedback

Vee 240

@JunasVee

Posted

Hi Faizan!

Good to know that you've finished your 2nd challenge on this platform, your solution looks good, however, I've found several issues that you might want to fix. Here are the issues:

  • Flexbox, the Main Container should always be both vertically and horizontally centered but in your case, it's not vertically centered even though you've added align-items: center; on the main tag. The problem is, you haven't set the height of the container, therefore it makes the flexbox confused because by default it follows the child element's tallest height. To fix this, add min-height: 100vh; for the main tag and your issue will directly be fixed.

  • Font-Family I suggest you read the style-guide.md file, it says that the font-family should be Lexend Deca but it's not implemented in your solution. To fix this, import the font from the google font website and set it as the font-family for every element.

  • Styling/CSS, We don't need to add a type attribute to a style tag because HTML already knows what it is, removing it would be better because it has no value and is making the code looks filthy. Additionally, it gives you an HTML issue report for this challenge.

  • Main tag, instead of setting a div as the main tag, you can directly use the main tag itself. As a matter of fact, it provides a better Search Engine Optimization(SEO).

There are actually a few more issues including the texts but I guess it would take too long to type. The point is to keep learning from your mistakes because it's better than not making anything.

I hope my feedback is helpful.

Marked as helpful

0

faizan 2,420

@afaiz-space

Posted

@JunasVee thank you. I will try another project.

1

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