Coming soon page with grid & Constraint Validation API

Community feedback

• 

  IryDev•1,580

  @IryDevPosted about 1 year ago

  Hey @devusexu you really managed to pixel-perfect it I'm impressed 😄.

  Great job on completing the Base Apparel Coming Soon Page challenge. It's clear that you've put a lot of effort into your implementation. Your approach to adjusting the layout for different screen sizes is quite effective. Now, let's discuss your questions about layout with grid and offer some suggestions.

  Firstly, your use of grid for layout adjustment is well-done. By applying a responsive grid layout, you're able to ensure that your page looks good on various screen sizes. Your media queries are properly utilized to adapt the layout based on the screen width, and your grid-template-areas effectively organize the logo, hero, and main sections.

  A couple of points to consider:

  • Grid Area Names: Your choice of grid area names ("logo", "hero", "main") is a good practice as it makes your CSS easier to understand and maintain.

  • Consistent Naming Conventions: Keep up with consistent naming conventions, as you've done with .logo img and other elements. This makes your styles more organized.

  • Centering and Alignment: In your CSS, consider using justify-self and align-self properties for more precise control over centering and alignment within grid cells.

  • Image Accessibility: When using images for important content, such as the logo, it's recommended to provide an alt attribute that describes the image for accessibility.

  • Avoiding Redundant Selectors: You've used multiple body selectors for setting fonts, background, and layout. Consider grouping these properties together to avoid redundancy.

  • Responsiveness: You've effectively used the max-width property for the body element to control the overall width of the content. This helps maintain readability and aesthetics on larger screens.

  • Overall, your approach is solid, and your attention to detail in both design and coding is evident.

  Happy coding!

  I hope you'll find this helpful and your solution is great😁

  Marked as helpful

  1

  ---

  

  devusexu•130

  @devusexuPosted about 1 year ago

  Thanks @IryDev!

  The parts about grid cell positioning and redundant selectors are really helpful! I decide to revise my CSS code arrangement after this.

  Also thank you for spending time to give me these advice and encouragement, I really appreciate that 💪

  Happy coding 🙌

  0

  

  IryDev•1,580

  @IryDevPosted about 1 year ago

  @devusexu It's a pleasure, your solution is accurate to the design👍🏿. I have also made a solution for this challenge you can check it out and give me feedback😁

  1