Mobile First Approach using Flex and relative units.

Community feedback

• 

  P

  Ayua Michael•500

  @TorCanHackPosted 10 months ago

  Hi Weixin, congratulations on finishing the challenge 👏🏽 🎉

  I noted some observations you might find helpful.

  There’s no heading in your code. I can see the “html and css foundation” text is in a <p> tag. It is better you nest it in <h1> heading element as this is the most important text in the document. Search engines use the headings to index the structure and content of the webpage. Using headings help provide a structure and hierarchy.

  I also noticed you nested every <img> tag in a <figure> element. While the <figure> element is important, it serves no purpose in the present document. <figure> should not be used on decorative content like background images or supplementary images like an avi. You use <figure> to mark a self-contained element that is related to the main flow of the document, for example a diagram, or you use it when you need to caption an image. Since this in not the case presently. Using only the <img> with an alt attribute will suffice.

  The borders of the blog preview card are not meant to be sharp; they are curved. You can curve them in css using this:

  main {
  
  border-radius: 10px 10px;
  
  }
  

  Great work!

  I hope you find this helpful.

  Happy coding 🥂

  Marked as helpful

  2
• 

  Bn-Bushra•290

  @Bn-BushraPosted 10 months ago

  Congrats on finishing this challenge. Here are my suggestions.

  Styling Challenges:

  1. Vertical and Horizontal Centering:

     • You've already used transform: translate(-50%, -50%) for vertical and horizontal centering, which is good.
     • Consider using flexbox for centering as well. It provides a cleaner and more flexible approach.

  2. Responsive Design:

     • Instead of fixed heights like height: 80dvh;, consider using relative units or media queries for better responsiveness.

  3. Width and Height Decisions:

     • Use relative units like percentages or viewport units for widths and heights to make your design more adaptable to different screen sizes.

  4. Overflow Issues:

     • Instead of setting a fixed height for the main container, consider letting it adjust based on its content. You can remove height: 80dvh;.

  5. Splitting CSS Code:

     • Your code is relatively short, but if it grows, you may consider splitting it into logical sections or using a preprocessor like Sass for better organization.

  6. Transition Duration:

     • Consider using a shorter transition duration for a more responsive feel, depending on your design preferences.

  7. Font Sizing and Units:

  • The use of rem for font size is a good practice as it allows for easier scalability. However, ensure that your layout remains readable on various screen sizes.

  8. Border Radius:

  • You've commented out the border-radius property in the main container. If you intended to use it, consider uncommenting and adjusting it based on your design preferences.

  9. Comments:

  • Your code has helpful comments, which is great for understanding your thought process. Keep it up!

  Example Adjustments:

  /* Centering with Flexbox */
  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* ... other styles ... */
  }
  
  /* Responsive Design */
  main {
    width: 90%; /* Adjust as needed */
  }
  
  /* Remove Fixed Height */
  main {
    /* height: 80dvh; */
  }
  
  /* Shorter Transition Duration */
  p, main:hover, .illustration:hover, .yellow-tag:hover, .avatar-picture:hover {
    transition: transform 0.3s;
  }
  

  Marked as helpful

  0