first challange done with freecodecamp frontend web dev bootcamp

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @coding-astrounaut,

  Congratulations on successfully completing the challenge!

  I have some suggestions regarding your code that I believe will be of great interest to you.

  1. Centering the Grid Component: Your grid component should be centered. You can achieve this by using Flexbox properties. Here’s how you can do it:

     body {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         margin: 0; /* Ensure there's no default margin */
     }
     

     This will ensure that your grid component is centered both vertically and horizontally.

  2. Using CSS Grid: Since this is a grid component challenge, it's expected to use CSS Grid for the layout. If you're not familiar with CSS Grid, you can check out some tutorials or click here for a comprehensive guide. Try to implement your component using CSS Grid for a more structured layout.

  3. Responsiveness: Your component is not responsive, and you didn’t use media queries. Making your component responsive using media queries will ensure it looks good on all screen sizes. If you're unfamiliar with media queries, you can find tutorials online or click here to learn more. Here’s a basic example to get you started:

     @media (max-width: 768px) {
         .grid-container {
             /* write your new css for screen size less than 768px */
         }
     }
     

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  0

  ---

  

  coding-astrounaut•50

  @coding-astrounautPosted 4 months ago

  @krushnasinnarkar i was doing a tutorial from free code camp and I was yet to learn responsive design, CSS grid, and flex. This is very helpful for this, thanks.

  0