Skip to content
OverviewSolutions
12
Comments
14

Eniola

@EniloladeNigeria240 points

Hi, I’m Enilolade! I’m a front-end dev working on mastering HTML, CSS, and JavaScript. Passionate about building clean, responsive, and accessible web interfaces, I use Frontend Mentor to sharpen my skills, improve my problem-solving abilities, and create projects for my portfolio.

I’m currently learning...

JS React Typescript

Latest solutions

View more solutions

Latest comments

  • Eniola•240
    @Enilolade

    I love it. Yes, it's lovely and responsive. I just bookmarked it so I could do it. Well done. 10 out of 10. Nicely done. Just followed you on GitHub too.

  • Eniola•240
    @Enilolade

    Really, nicely done.

    I love how you separated your JS and CSS for specificity.

    Functional, responsive and smooth.

  • Eniola•240
    @Enilolade

    You've done an excellent job—it's responsive and well-executed. However, the button colours and bold text don’t quite hit the mark. Was this an intentional design choice?

  • Eniola•240
    @Enilolade

    Well done, but next time use semantic tags/elements such as main, footer, section. Also, refer to this link for positioning your footer properly.

    I also forgot about the box-shadow of each card, but had to go back to fix it.

    Was it intentional to make the background colour purple?

    Marked as helpful
  • Eniola•240
    @Enilolade

    Pretty smooth operation, but it's not responsive. You should check out the mobile display.

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

    I'm happy that I've finish the project. I need suggestions for improvement

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

    I encountered challenges on the grid layout for desktop design

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

    I'm not sure if my media query breakpoints are correct, I need help on them.

    Four Card Feature Section

    1
    Eniola•240
    @Enilolade

    Well done, nicely done. Curious why you had a dark colour for the background of the body tho?

    So, for your grid layout on desktop, instead of 1 row, you could have 4.

    .parent {
grid-template-columns: repeat(3,1fr)
grid-template-rows: repeat(4, 1fr);
}

    Then the children could be split this way

    .green-card {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }

  .red-card {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .orange-card {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
  }

  .blue-card {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
  }

    For the most part, your media query is fine for this design, at least. because the layout only changes at >= 1024px.

    Very neat, nicely done.

    Marked as helpful
View more comments