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

Leonardo Bravo P.

@leonardo-bravopBuenos aires, Argentina100 points

Hello! Im' Leo, Fullstack dev from Peru living in Buenos Aires, Argentina. Looking forward to collaborating on awesome projects!

Latest solutions

  • Testimonials Grid Section

    #astro#typescript#sass/scss

    Leonardo Bravo P.•100
    Submitted about 1 month ago

    Code structure, possible refactoring points.


    1 comment
  • Four card feature section


    Leonardo Bravo P.•100
    Submitted about 2 months ago

    If the way I'm using SASS can be improved and also how Next.js is being used. I'm open to all suggestions :)


    1 comment
  • Product preview card component

    #typescript#vite#sass/scss

    Leonardo Bravo P.•100
    Submitted 3 months ago

    If you have experience using SASS it could really help me to know what I could improve, but feel free to give any comments in other areas too!


    1 comment
  • Recipe page

    #next#typescript#tailwind-css

    Leonardo Bravo P.•100
    Submitted 3 months ago

    I'm open to any suggestions or comments :)


    1 comment
  • Social links profile

    #react#tailwind-css#vite#typescript

    Leonardo Bravo P.•100
    Submitted 3 months ago

    I am open to hear any suggestions on improving the code, file structure or refactoring the use of Tailwind CSS


    1 comment
  • Blog preview card

    #tailwind-css#vite

    Leonardo Bravo P.•100
    Submitted 3 months ago

    Optimize Tailwind CSS usage.


    1 comment
View more solutions

Latest comments

  • DevDaru•100
    @DevvMarko
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Despite the problems with adjusting the card sizes to the grid, I finally succeeded and it resembles the target design. Additionally, I added responsiveness for tablets, so even on these devices the site still looks very good

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

    the biggest problem I had was matching the cards to the grid in the desktop version. The problem turned out to be that I had set the auto everywhere in the grid-template. I added a percentage match and everything immediately started looking good

    Testimonials responsive page with Grid and SCSS

    #sass/scss
    1
    Leonardo Bravo P.•100
    @leonardo-bravop
    Posted about 1 month ago

    Hi! Awesome work It's impressive that your solution closely matches the original design, and the addition of a tablet layout is a nice touch! I liked that you added the quote SVG using a ::before pseudo-element. I think it makes sense because it was just a decorative element. After investigating a bit I found using p:nth-child(...) for Layout can be brittle. If someone reorders the markup, it breaks. Using semantic class names (e.g., .card-title, .card-body) could make your CSS more maintainable and readable. Finally, instead of alt="Image 1", you could try something like alt="Photo of Daniel Clifford". That gives more context for screen readers :)

    Marked as helpful
  • mark orrente•160
    @markorrente01
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of the grid layout I used. I will try to be more flexible when using it next time.

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

    I encountered the grid layout challenge of differentiating between align-content and align-items. I solved this by conducting deep research on the properties before continuing the project.

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

    I would just like y'all to give me an honest review and maybe resources that y'all used to improve your skills in front-end development.

    CSS grid, Responsive design

    #accessibility#sass/scss
    1
    Leonardo Bravo P.•100
    @leonardo-bravop
    Posted about 2 months ago

    Amazing job! Everything is really clean and well structured. The cards' hover animation is really cool. You also considered good accessibility practices, although, after making a quick research I found using two <h1> elements in .header could confuse screen readers.

    I saw you were using a mixin for the font. I'm also using a similar one :) it was really useful for keeping the code DRY. Little observation, I noticed in your mixin you're defaulting $f-size to be normal. That confused me a bit, maybe it was intended to be a numeric value with a unit?

    Overall I really liked how you implemented the media queries and the grid. One last suggestion that may make more sense for bigger projects but it's worth mentioning would be to break SCSS into partials and then import them into a main style.scss using @use or @import.

  • P
    Alexander3717•310
    @Alexander3717
    Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    Getting the image and text part of the card to be equally wide in the desktop layout was a bit counterintuitive.

    I set the card’s width to 600px and the image’s to 300px, so I naturally expected the text part to be 300px wide as well — since 600 minus 300 is 300. But instead, the text part stretched to around 450px, leaving just 150px for the image.

    This happened because of how Flexbox works. It looked at the natural width of the text part — basically, how wide it would be if the text could stretch freely — which turned out to be around 900px, plus the image’s 300px width. So now, Flexbox had to fit 1200px worth of content into a 600px-wide card.

    To do this, it shrank both the image and the text part. That’s because by default, Flexbox allows items to shrink (with flex-shrink: 1). Both the image and the text part shrank proportionally — both halving their natural sizes. The image shrank from 300px to 150px, and the text part from 900px to 450px.

    But I didn’t want the image to shrink at all. I wanted the text part to take all the shrinking instead.

    The solution was to set flex-shrink: 0 on the <picture> element (not directly on the <img>, since it isn’t a flex child). That prevented the image from shrinking and left the text part to adjust its size:

    .productcard {
        max-width: rem(600px);
        flex-direction: row;
    
        picture {
            flex-shrink: 0; // Prevented image from shrinking
        }
    
        &__img {
            width: rem(300px);
            height: 100%;
            border-radius: rem(8px) 0 0 rem(8px);
        }
        
        &__content {
            gap: $spacing-400;
            border-radius: 0 rem(8px) rem(8px) 0;
        }
    }
    

    HTML structure:

     <article class="productcard"> 
       <picture>
          <source srcset="images/image-product-mobile.jpg" media="(max-width: 767px)">
          <img src="images/image-product-desktop.jpg" alt="Image of product" class="productcard__img">
       </picture>
          
       <div class="productcard__content">
          Text part of the card here
       </div>
     </article>
    

    Alternatively, I could have given the <img> a min-width of 300px, but using flex-shrink on <picture> felt cleaner and more in line with Flexbox’s intended behavior.

    Product preview card built with flexbox and picture element

    #sass/scss
    1
    Leonardo Bravo P.•100
    @leonardo-bravop
    Posted 3 months ago

    Amazing, really good job! I'm impressed by how well organized you have your code. It's my first time using SASS, so it also helped me understand how a good structure to implement it looks like. One small detail I noticed is the desktop paddings when centering the card, maybe we should not hardcode those values and find another way to center it?

  • gabbymenyah•80
    @gabbymenyah
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully creating a functional and visually appealing recipe page using HTML, CSS, and a bit of JavaScript—it felt great to see everything come together. Next time, I would focus more on making the site responsive for mobile devices and improving the organization of my code for easier updates.

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

    One challenge I faced was aligning the layout properly across different screen sizes, which I overcame by learning and applying CSS Flexbox and Grid. I also struggled with linking images and external files at first but fixed it by double-checking file paths and folder structure.

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

    All feeds are welcome.

    Recipe Page

    #c##itcss#jss#typescript#react
    1
    Leonardo Bravo P.•100
    @leonardo-bravop
    Posted 3 months ago

    The code is readable and fairly well-structured. The semantics are appropriate and well organized. The media query adds some responsiveness for small screen devices. As a suggestion, I think you could explore using other elements such as <section>, <ol>, <table>, or <strong> when possible. One last comment, I noticed we can't see the image even though it's in index.html and it's because we don't have the assets directory in the repo. Great job overall!

  • Nina Aßmann•30
    @ninaassmann
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Implementing all the challenges in one Repo, my Portfolio

    Social Links

    #next#tailwind-css
    1
    Leonardo Bravo P.•100
    @leonardo-bravop
    Posted 3 months ago

    Toll! I really like the idea of having all challenges in one repo and displaying them together. I also liked the design modifications you made, the icons look great. Only recommendation I could give and that I also first overlooked is to consider what would be the best semantic element to display the links. I think an Anchor element <a> would be the most accurate 🙂

  • Leandro Acosta•20
    @lacosta
    Submitted 6 months ago

    FrontendMentor | Blog Preview Card

    #react#vite#tailwind-css
    1
    Leonardo Bravo P.•100
    @leonardo-bravop
    Posted 3 months ago

    Awesome! I really liked how you made reusable components and the way you applied the styles. I didn't know about the group and group:hover Tailwind CSS features. That combined with the animations looks really smooth. The markup is also very well structured.

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