Skip to content
Submitted about 1 year ago

Page created with the help of css grid and flex

Luiz Otávio•60
@luizotvio
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

The difficulties I had in this project were related to margins and padding, and also to align the section to the center of the main.

always tried to use the main and section tags for projects, I believe this is good practice

If anyone sees any errors or possible improvements in my code, I'm open to discussion

Community feedback

  • Anis Bacha•500
    @AnisBachaPosted about 1 year ago

    I see only good work here, good job! I noticed from the responsive.css file that you have worked first for the desktop design and then you tried to adjust through the media queries to be a mobile design, but it is recommended to first start your work with the mobile design and then try to adjust it to be a desktop design. This will save a lot of time in larger projects (you can search 'mobile first design' for more information).

    Another thing is you can make the body element a flexbox and add the 'justify-content' and 'align-items' properties and make 'center' to be its value to ensure that the cards are in the middle of the page.

    Marked as helpful
    0
    Luiz Otávio•60
    @luizotvioPosted about 1 year ago

    @AnisBacha Thanks for the feedback, I tried to start with mobile first but I had a little difficulty, but I will delve deeper into mobile first design for future projects. thank you for the tips!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord