second project challenge front_end mentor

Community feedback

• 

  Vee•240

  @JunasVee

  Posted over 3 years ago

  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.

  01

  Marked as helpful