Blog preview card

Community feedback

• 

  Noel Hoppe•350

  @noelhoppePosted 11 months ago

  Hi, here are some suggestions:

  1. As you know, it's good practice to separate structure (HTML) from design (CSS). That's why you can "link" your font-family with @import statement in css:

  @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;800&display=swap');

  2. Remove line-height: 20px from the <footer>, it's overridden all the time. As you have don instead, it's good practice to use rem for line-height all the time.

  3. Maybe you can define the colors in the :root element with css variables and than acces later on. That allows you to make comfortable changes.

  4. <h3>Learning</h3> has to be a <p>-tag,

  <span>Published 06 Jan 2024</span> has to be also a <p>-tag

  5. Remove the <a> tag in line 34 and the <div> tag in line 35

  6. In general, you use some unnecessary <div> containers, maybe it's a good practice to try to remove some <div> in your body{}. Tipp: I have used only one <div> in body.

  7. Add in your css to body { min.-height: 100vh; display: flex; flex-direction:column;

  But all in all: Good job, enjoy coding! justify-content: center; } to center your card.

  Marked as helpful

  1

  ---

  

  Gian Ramelb•160

  @rame0033Posted 11 months ago

  @noelhoppe thank you for this comprehensive marking. I appreciate every details. :)

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @rame0033!

  Your project looks great!

  I noticed that you used margin to place the card in the middle of the page. Here's a very efficient way to center the card:

  • You can apply this to the body (in order to work properly, you can't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  Rame looks great on you!

  I can only make the following comments as extra information:

  • Apply display: block to the image to remove that annoying white space
  • To center the content in the center of the screen, you can do it using grid or flex, an example of what it would look like:

  body {
      padding: 10px;
      min-height: 100vh;
      display: grid;
      place-content: center;
      gap: 20px;
  }
  
  main {
      max-width: 300px;
      /* margin: 6vh auto 3vh; You don't need this anymore */
      background-color: hsl(0, 0%, 100%);
      display: flex;
      padding: 10px;
      border: 1px solid black;
      border-radius: 15px;
      box-shadow: 10px 10px black;
  }
  

  Marked as helpful

  0

  ---

  

  Gian Ramelb•160

  @rame0033Posted 11 months ago

  @Blackpachamame thank you for this tip. I really didn't know this since we've been using margin all the time in college class.

  Thank you again 😄

  1
• 

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted 11 months ago

  Hi @rame0033, great job!

  It looks really nice. If you want to centered just add this:

  body {
      display: grid;
      place-items: center;
      min-height: 100vh;
  }
  

  Then, for the attribution you can do this:

  footer {
      position: absolute;
      bottom: 25px;
  }
  

  After you apply these It will look better.

  Marked as helpful

  0