Skip to content
OverviewSolutions
8
Comments
7
tommy flinch
@tflinch

All comments

  • tommy flinch•110
    @tflinch

    Great work! Consider adopting some modern css techniques like @layer to better manage CSS specificity and modularity. Also consider using nth-child(n) to position grid items individually for more precise layout control.

    .card:nth-child(1) {
    grid-column: 2 / 3;
    grid-row: 1/2;
}
  • tommy flinch•110
    @tflinch
    What are you most proud of, and what would you do differently next time?

    I am proud i was able to closely mirror the challenge

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

    Biggest challenge was learning grid. I went to my trusty cheat sheet to learn how to align child elements.

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

    I need help learning grid. I wasnt sure to align my first and third card.

    .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        background: white;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 250px;
        min-height: 200px;
        border-top: 4px solid transparent;

        img {
            align-self: self-end;
        }
    }
 .card:nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 1;
        align-self: center;
    }


    .card:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .card:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    four-card-feature-section-master

    #pure-css
    2
    tommy flinch•110
    @tflinch

    Thank you for the feed back this helped me under stand better. The 4th row creates the additional space for the card to stay. the first card is from row 1/2 and the third card is from 1/4 expands all rows but sit directly in the 2nd column.

      .card:nth-child(1) {
    grid-column: 2 / 3;
    grid-row: 1/2;
    align-self: center;
  }
.card:nth-child(4) {
    grid-column: 3;
    grid-row: 1/3;
  }
  • tommy flinch•110
    @tflinch

    This solution is not close to the request that was asked. The card you created is good but try to challenge your self to the challenges provided. Many ways to build an application, its best to try them all.

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

    It took too much time and I needed a lot of help

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

    The styling of the table and fixing the style of the bullet required a lot of research

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

    bullet styling and table styling was a pain

    Frontend Mentor | Recipe page

    1
    tommy flinch•110
    @tflinch

    This looks to be really good. What area's did you need help on. Posting a code snippet could give us insights on what area's was the most challenging.

  • Semih Mert•70
    @semihmertdev
    What are you most proud of, and what would you do differently next time?

    I would do the same.

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

    I didn't encounter any difficulty.

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

    I don't want to.

    Social-links-profile

    2
    tommy flinch•110
    @tflinch

    Increasing the card width size to match closer to the design. Very close to the design given.

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

    I finished an other project, i want it to continue because im feeling very happy and proud of myself

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

    I had to look for the "fit-content" property to use it, because I wasn't remembering which tag came before

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

    I don't know, currently i'm accepting every constructive criticism that will makes me get better in what im trying to do, or even code more faster

    blod-preview-card

    1
    tommy flinch•110
    @tflinch

    Great, clear and simple css. Easy to understand code!

    Marked as helpful
  • Nichole McGrew•60
    @nicholemcgrew
    What are you most proud of, and what would you do differently next time?

    The completed project.

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

    Learning Figma. I watched a Youtube video.

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

    none, the project is completed.

    QR code component

    3
    tommy flinch•110
    @tflinch

    Code is spot on and responsive! Consider looking into display flex. It's a nice alternative from using position absolute.

    Marked as helpful