Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
7

Christian Gabriel Lara López

@chrislara0180 points

Computer Scientist

Latest solutions

  • Responsive testimonial section using grid and media queries


    Christian Gabriel Lara López•80
    Submitted about 2 months ago

    1 comment
  • Responsive four cards features with flexbox and media queries


    Christian Gabriel Lara López•80
    Submitted about 2 months ago

    2 comments
  • Responsive card using flexbox and media query


    Christian Gabriel Lara López•80
    Submitted 2 months ago

    2 comments
  • Responsive recipe blog using flex-box and media queries


    Christian Gabriel Lara López•80
    Submitted 2 months ago

    1 comment
  • Responsive social links card using flexbox


    Christian Gabriel Lara López•80
    Submitted 2 months ago

    1 comment
  • Responsive card using flexbox


    Christian Gabriel Lara López•80
    Submitted 2 months ago

    1 comment
View more solutions

Latest comments

  • Gabriel Rodriguez Perez•160
    @glrodriperez98
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I used CSS Grid with nth-child selectors to precisely position each testimonial card across multiple breakpoints. It was really satisfying to see the layout adapt fluidly across devices, from mobile to widescreen. I'm also proud of how I used em units for breakpoints to improve accessibility and scalability of the layout.

    If I were to do this challenge again, I would spend more time organizing and reusing utility classes to reduce redundancy in my CSS. I might also experiment with using clamp() for more fluid typography and spacing. I played with it last challenge but want to dive further into the concept.

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

    One of the biggest challenges was getting the grid layout to match the design at different screen widths, especially for the tablet and desktop breakpoints. Using grid-template-areas at first felt limiting, so I leaned into manual grid positioning with nth-child, which gave me finer control.

    I also had trouble applying a semi-transparent box-shadow using HSL with CSS variables. I learned that to interpolate (a new word for me!) an alpha value into an HSL color, the custom property must be defined without the hsl() wrapper, just the raw values. While I simply used the :root value I created instead, I'm going to try this with the next challenge that uses box-shadow.

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

    I'd appreciate feedback on:

    My use of em units for media queries...are there best practices for choosing the base value?

    Whether my grid positioning using nth-child is maintainable or if there’s a cleaner way to handle this for large-scale layouts.

    How I could improve my utility class naming or structure for scalability and clarity.

    Responsive Testimonials using Grid and media queries

    2
    Christian Gabriel Lara López•80
    @chrislara01
    Posted about 2 months ago

    Great work! Here are some tips that I think that could improve your solution:

    • Line height: Looking at the text, looks that you could use some more line height using this exact CSS property line-height to separate the lines of the paragraph element in the testimonial cards.
    • Box Shadow: Since box shadows often are very subtle I tent to use rgba(0, 0, 0, 0.1) or where the first values are the RGB part indicating a black color and the last as a opacity value, being 1 full opacity and 0 transparent. To match the design seems like there is a lot of displacement in both right and bottom values and blur radius that I think that are missing. You could also play with smaller offset values and using the spread radius (fourth parameter).

    On feedback:

    • Using em values for media queries is a very standard and used approach so this was a great use of them!
    • Your approach to the grid positioning was great! Often times may look complicated but sometimes it has to be.
    • Your approach to utility class naming was great!

    This was an excellent solution! Hope this helps!

  • P
    Alex•140
    @Oleksandr5768965
    Submitted about 2 months ago

    flexbox layout ,media queries

    2
    Christian Gabriel Lara López•80
    @chrislara01
    Posted about 2 months ago

    Great work! It really matched the original.

    Some of the things you could improve in your solution are:

    HTML:

    • Try to change some HTML element to more semantic ones. For the cards you could use and <article> element. Try to avoid <div> as much as possible since is to much generic.

    • Also, try to use continuous heading levels. You started using <h1> and <h2> elements for the header, but you used <h4> in the cards instead of <h3>.

    Responsiveness:

    • This layout can be particularly difficult and I liked the hack you used to make the second and third element as a column. I would encourage you to try to enhance the responsiveness between mobile like devices and desktop devices, like in tablets since it seem that is not working properly. Since they don't give you a table like device design try to think of one yourself that could work in those devices like a two row, two cards layout.

    A good work overall! Congrats!

  • P
    finkusuma-dev•130
    @finkusuma-dev
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I learn how to use picture element to show different images for different layouts. Also learn how to setup Sass in the project using NPM.

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

    The most difficult challenge is where to put styles into the corresponding SCSS partial. So I tried to learn from some Github repo that uses Sass.

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

    I'll really appreciate if there is anyone who can take a look at the Sass partial and have suggestions of what to improve.

    Product Preview Card with Sass (SCSS)

    1
    Christian Gabriel Lara López•80
    @chrislara01
    Posted 2 months ago

    Amazing work! Actually nothing to add here. I wish I could help you with Sass but haven´t used it. Keep the good work!

  • Ana Carolina Kruger•50
    @Anackv
    Submitted 3 months ago

    Responsive Recipe Page - HTML|CSS

    1
    Christian Gabriel Lara López•80
    @chrislara01
    Posted 2 months ago

    Amazing work! From what I see in the original there are just some small details that differ from yours but still is a great looking solution, so congrats!.

    If it's helpful, one of the things I did to get the hr elements within some sections to look more like the original was style them to look more thin and lighter. What I did was:

    hr {
        border: none;
        height: 1px;
        background-color: /* A lighter color from the palette */;
    }
    

    I use this a lot since the default style never have looked good to me.

    I would have added just a little bit more padding on the card, a darker rose color to the body and rounded corners in the photo, but this just details ;)

    Great work!

  • MgMyatHtayKhant•220
    @MgMyatHtayKhant
    Submitted 2 months ago
    What specific areas of your project would you like help with?

    I'm open to suggestion to improve my code. Thank you.

    Responsive Social links profile challenge

    1
    Christian Gabriel Lara López•80
    @chrislara01
    Posted 2 months ago

    Amazing work!

  • Nguyen Hong Anh•20
    @NguyenHongAnhS3924711
    Submitted 2 months ago
    What challenges did you encounter, and how did you overcome them?

    The Challenge I encounter was cannot margin the first image, then I tried to use container for the image, and the margin worked as expected.

    Blog Review Card

    1
    Christian Gabriel Lara López•80
    @chrislara01
    Posted 2 months ago

    Great work! Here are some considerations to enhance your solution:

    • Try using flexbox to align the content of the card in the center, helping you to make consistent the padding on both sides.
    • Try using a bigger border radius as described in the figma design and a thinner border.
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub