Skip to content
OverviewSolutions
7
Comments
7
Pedro Braga
@Dev-PedroB

All comments

  • Pedro Braga•80
    @Dev-PedroB

    The cards and elements are bigger than what was proposed, but its a good solution overall. Congratulations

  • korcakSEA•250
    @korcakSEA
    What are you most proud of, and what would you do differently next time?

    Major learning for this project is the usage of grid-template-areas property.

    Beside mobile first approach also helped me to design the page. All necessary properties are applied to elements at mobile first approach. And other properties (media query, grid-template-areas, :nth-child() ) applied when it is needed.

    @media(min-width:900px){

    .grid-container{

        display: grid;

        grid-template-columns: repeat(3,1fr);

        /* grid-template-areas: arranging how cards to be laid out on page.
          Could be thought as blueprint of layout
        */
        grid-template-areas: 
         ".   two   ."
         "one two   four"
         "one three four"
         ".   three .";
    }

    /* If card are defined outside of media query, they are overlapped  */

    .card:nth-child(1){
    grid-area: one;
    }

    .card:nth-child(2){
        grid-area: two;
    }

    .card:nth-child(3){
        grid-area: three;
    }

    .card:nth-child(4){
        grid-area: four;
    }

}
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge for me is the grid layout. This could be done by relocating the cards in grid layout by using span, grid-column etc.., but I assume this could take longer to code.

    But of course, if you have enough tools in your toolbox you may have different solutions for any project.

    What specific areas of your project would you like help with?

    Any feedback is welcome!

    Four card feature section

    1
    Pedro Braga•80
    @Dev-PedroB

    The solution cards or large screens are not centered, and the width does not match the project specifications, but these are minor issues that are easy to fix and do not detract from the overall delivery. Good solution.

  • John Gorman•170
    @Johng117
    What are you most proud of, and what would you do differently next time?

    I think I made a solid reproduction of the given designs.

    What challenges did you encounter, and how did you overcome them?

    I struggled to scale up typogragphy and space out some of the text.

    What specific areas of your project would you like help with?

    Advice on how much to scale text up and down by.

    Product-previe-card-component

    1
    Pedro Braga•80
    @Dev-PedroB

    Great solution, very similar to what was proposed.

  • Pedro Braga•80
    @Dev-PedroB

    Great

  • Hevrex10•90
    @Hevrex10
    What are you most proud of, and what would you do differently next time?

    nil

    What challenges did you encounter, and how did you overcome them?

    nil

    What specific areas of your project would you like help with?

    nil

    i used flex box and also throughout

    1
    Pedro Braga•80
    @Dev-PedroB

    N/A

  • Pedro Braga•80
    @Dev-PedroB

    N/A

  • Pedro Braga•80
    @Dev-PedroB

    N/A