Google fonts, CSS Flexbox, SEO and Metadata

Community feedback

• 

  user2830581•90

  @user2830581Posted 2 months ago

  Your solution is good but here are some things that could be improved

  • your HTML doesn't contain a main tag. It's not entirely necessary but it helps with accessibility and it is generally good practice to include it.
  • instead of having two p tags, the content in the class 'main-text' could be wrapped in a heading tag for better readability and accessibility.
  • it looks like the font family in your CSS overrides the ones correctly added in the HTML. It should be font-family: "Outfit", sans-serif; instead of font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;.
  • your component is centered horizontally but not vertically, you could add height: 100vh; justify-content: center; to your body styles to change this.
  • there are quite a few design differences compared to the solution. Most of these are minor but can add up and affect the overall look and responsiveness. There are a lot of hard-coded margins which is generally poor practice. This can be improved by using something like Flexbox or CSS Grid as they help to space elements in a container. If you have access to the Figma file and can go into dev mode to further inspect the padding, border shadow, and general spacing then you can better adjust your CSS to fit the solution.

  Overall you're on the right these are just some improvements that might help to expand your skills!

  Marked as helpful

  1