Static Blog webpage with HTML and CSS

Community feedback

• 

  P

  Ricky Dodd•40

  @rickydodd

  Posted 5 months ago

  What you did well:

  • The solution looks very similar to the design, visually.

  What could be improved:

  • Remove the padding from the page-background class.

  When the viewport is short, there is a large gap at the top that does not respond well.

  The following

  .page-background {
    display: flex;
    width: 100%;
    min-height: 100vh;
    padding: 251px 0; /* remove */
    justify-content: center;
    align-items: center;
    background-color: #f4d04e;
  }
  

  becomes

  .page-background {
    display: flex;
    width: 100%;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #f4d04e;
  }
  

  Because the display: flex declaration makes the element a flex container, which is a block-level element, you can also remove the width: 100% declaration. The declaration is redundant, as block-level elements will naturally fill the width.

  • Use semantic HTML.

  As it is a card, I suggest using the article element to represent the card. The rationale is that cards are self-contained compositions that can be re-used inside a HTML document, so article is an excellent choice.

  • Extract and optimize the SVG.

  In terms of the SVG itself, the only recommendation I have is to copy the SVG markup and use a tool like SVGOMG to extract it from the markup and make it into an SVG file, then use that in the HTML.

  Something like SVGOMG will also flatten and optimize the SVG. Hope you find this helpful.

  00
• 

  Akiza•30

  @NagatsuAkiza

  Posted 5 months ago

  1. yes
  2. yes
  3. yes
  4. yes
  5. yes

  00