FlexBox

Community feedback

• 

  Ranit Manik•880

  @RanitManikPosted 5 months ago

  Congratulations on finishing this challenge! I have reviewed your code and here are a few suggestions for improvement:

  1. Semantic HTML5 Elements

     • Consider using more semantic elements (landmarks) like <main>, <article>, and <header> to improve the structure and readability of your HTML. All content should be contained within landmarks. Every page should minimally have a <main> element. You can find more information about this here.

  2. Font Loading Optimization

     • Avoid using @import in CSS for font loading. Instead, directly link the fonts in the HTML file to enhance website performance. This method is explained in this article. Here’s an example:

     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:[email protected]&family=Lexend+Deca:[email protected]&display=swap">
     

  3. Unit Choice for Styling

     • Opt for using rem instead of px for properties like width, height, margin, padding, and font-size. This choice ensures better scalability and responsiveness. Detailed information can be found in this article.

     /* Use rem for Better Scalability */
     .container {
       width: 57.4375rem; /* Equivalent to 919px */
       height: 31.3125rem; /* Equivalent to 501px */
     }
     

  4. Cursor Pointer for Buttons

     • Always use the cursor: pointer; property for buttons to improve the user experience.

     button {
       cursor: pointer;
     }
     

  I hope you find my feedback helpful. Please mark it as helpful if you do!

  Marked as helpful

  0