html + css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

  • It's more advisable to import the Google font directly in the HTML file, as you can establish an early connection using a preconnect resource, resulting in faster stylesheet delivery:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=YourFontFamily&display=swap" rel="stylesheet">
  

  Another method, and the one I use, is to download the fonts and use them in the WOFF2 format, which is lighter. Personally, it works well for me, especially when using Lighthouse to assess my page's performance.

  You can follow this tutorial on how to do it: Self-hosting fonts explained (including Google fonts) // @font-face tutorial - Kevin Powell

  More information about fonts: Best practices for fonts - web.dev

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  2
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Hello Precious!

  Your solution looks great!

  I have a suggestion for improvement:

  • For semantic reasons, use main to wrap the main content instead of a div.

  This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Looks great! It is not perfect just because of one small detail, the img of owner. Could it be that you have searched for it on the internet? It is assumed that when you download this challenge it already brings you the image that you were supposed to use, that's why it looks stretched.

  In any case, we can make it look good, you just have to make some adjustments:

  HTML

  <figure class="section_owner_figure">
      <img class="section_owner_img" src=".//blogowner.jpg" alt="content created by">
  </figure>
  

  CSS

  .section_owner_figure {
      width: 32px;
      height: 32px;
      overflow: hidden;
      margin-right: 12px;
      border-radius: 50%;
  }
  
  .section_owner_img {
      width: 32px;
      height: 32px;
      object-fit: cover;
  }
  

  The rest, like I said, is perfect 🥰

  Marked as helpful

  1

  ---

  

  Precious•490

  @2peaglesPosted 10 months ago

  @Blackpachamame I ended up downloading is from figma, I switched computers and didn't have the downloaded image. Is there a reason you are using figure? I usually do a div then the css you have below, is that for accountability?

  0

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  @2peagles Place a figure instead of a div because semantically it seemed more correct to me. More info figure

  I'll explain the CSS that I put in, at least the properties that are not usually common:

  • overflow: hidden: This is because it applies a border-radius to the image container (figure) and what it does is basically hide everything that protrudes from said container. In this case, if you remove this property, the tips of the image are going to stick out and that is not the look you want it to have. More info overflow
  • object-fit: cover: This makes the image fill the entire width and height of the container, without stretching and without losing its aspect ratio. More info object-fit

  As an extra piece of information: So that your project is not lost, as in this case, you can upload the files that they give you at the beginning of the challenge to a repository (in which you are going to work). Then, being on another computer, you simply clone that repository and continue working with what you had. Obviously for this you have to keep your repository updated with every change you make so you can later have it somewhere else.

  Clarification, just in case: Clone a repository you only have to do it once, once you have already linked it locally, you only have to update the incoming or outgoing changes. For this, it is ideal that you are clear about how git and github work.

  1