FlexBox

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!