I used Custom CSS in this project. I used Flex box instead of CSS Grid

Community feedback

• 

  Shane Coco•20

  @SSGBCPosted 6 months ago

  Viewing the source code for the solution there are mostly div tags used in the HTML which could be updated to tags that have more semantic meaning. There are multiple classes create and there one of which is not used in the CSS style sheet. The HTML and CSS code are well structured and are readable. The solution does differ slightly from the design which can be corrected with a few tweaks to the CSS code.

  0
• 

  Oseremen Godstime•60

  @devandytechPosted 6 months ago

  Trying improving on your color palette, I suggest you use the one provide on the read.md file

  0
• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 6 months ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change the first <div> to a <main>.

  • You don't need all of those divs! You only need one <div>, which holds the card content - I would give it a class of .card.

  • The alt text must also say where it leads(frontendmentor website).

  • "Improve your" should be a <h2>.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Use the style guide to find the correct font-family.

  • Use the style guide to find the correct background-color.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • To center the card horizontally and vertically, use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  

  • Remove all widths and heights.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • Add text-align: center on the card to center the text.

  • To create the space between the image and the edge of the card, set padding on all 4 sides of the card: padding: 16px.

  • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Remove the margin.

  • Add border-radius: 10px on the card and the image.

  0