Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
10
P

Roberto

@r0b3rtcode020150 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Meet Landing Page

    #sass/scss#bem

    P
    Roberto•150
    Submitted 20 days ago

    All feedback is welcome. Thank you in advance.


    0 comments
  • Testimonials Grid Section


    P
    Roberto•150
    Submitted about 2 months ago

    1 comment
  • Four Card Feature Section


    P
    Roberto•150
    Submitted 3 months ago

    All feedback is welcome. Thank you in advance.


    1 comment
  • Product Preview Card


    P
    Roberto•150
    Submitted 4 months ago

    1 comment
  • Recipe Page


    P
    Roberto•150
    Submitted 5 months ago

    All feedback is welcome. Thank you in advance.


    1 comment
  • Social Links Profile


    P
    Roberto•150
    Submitted 5 months ago

    1 comment
View more solutions

Latest comments

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

    I had problems with getting the hero image to be cropped symmetrically when the viewport got too narrow to fit it. The solution, though, turned out to be fairly simple:

    • give image max-width: none
    • horizontally center the image within its container
    • horizontally center the container itself on the page
    • apply overflow: hidden to the container
    
    .header {
        display: flex;
        flex-direction: column;
        align-items: center; // centers the image horizontally
        // align instead of justify because we set flex direction to column
        
        width: 100%; // image container (header) is as wide as the page so it's already centered
        overflow: hidden; // this must be present
    
        &__hero-image-tablet {
            height: 160px;
            max-width: none; // we cannot restrict the image width
        }
    

    In the desktop layout, where the hero image is split into two, I used grid with justify-content: center (centered the whole grid within the page) and grid-template-columns: 1fr rem(448px) 1fr. That ensured the heading (middle column) always gets enough space, while the hero images get rest of the page width. If that's not enough to fit them, they both get cropped symmetrically, which is the desired behaviour.

    .header {
            display: grid;
            grid-template-columns: 1fr rem(448px) 1fr; // gives images only leftover space
            justify-items: center; // centers items within their cells
    
            justify-content: center; // centers the whole grid within the header
            // must be here to crop the images symmetrically
    
            overflow: hidden; // must be included also
    
            &__hero-image-left, &__hero-image-right {
                max-width: none; // again, we cannot restrict width of the images
                grid-row: 2;
            }
    
            // Other grid items here
        }
    
    What specific areas of your project would you like help with?

    Despite trying different text-wrap options, I couldn't get some texts to wrap as they do in the design.

    For example in the desktop layout, the heading "Smarter meetings, all in one place" should wrap after "all" on 1440p screen width but in my solution it wraps after "in" or after "meetings" in Firefox.

    If you know any tricks for getting the text to wrap as you want it to, I'd really appreciate if you shared them.

    Any feedback regarding other aspects of the solution is welcome too, of course!

    Responsive meet landing page made with flexbox and grid

    #bem#sass/scss
    1
    P
    Roberto•150
    @r0b3rtcode020
    Posted 20 days ago

    Your solution is really good, great job!

  • Luzar Iliya•160
    @Luzaliya
    Submitted about 2 months ago
    What specific areas of your project would you like help with?

    will love corrections

    testimonial grid section

    1
    P
    Roberto•150
    @r0b3rtcode020
    Posted about 2 months ago

    Great job! Your effort really paid off, and the final result looks awesome.

    That said, there are a few things that are worth learning as a foundation to keep improving. For example:

    1. I'd recommend you to learn semantic HTML tags and the BEM methodology. BEM will help you name your classes in a way that makes your code more readable and organized. If you get the hang of that, I guarantee your code will be much easier to understand.

    2. You missed adapting your design for medium-sized screens (like tablets). Right now, it only works for mobile and desktop.

    Marked as helpful
  • Dadir-Dev•200
    @Dadir-Dev
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge gave me the opportunity to enhance my grid skills and techniques. I'm proud of how quickly I was able to complete it.

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

    Choosing the right semantics in the HTML took me some time. I also spent a while fine-tuning the background colors and font sizes, but in the end, I was able to get everything just right.

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

    I don't have anything specific in mind, but I would appreciate any feedback you have.

    Frontend Mentor | Testimonials Grid Section

    1
    P
    Roberto•150
    @r0b3rtcode020
    Posted about 2 months ago

    Things to keep in mind when improving your design:

    1. Make sure it looks good on all screen sizes. On medium screens, the layout is the same as the desktop version, but the cards feel too tight, which makes the design look off.

    2. The spacing on the cards (like padding and line height) is a bit different from the original, so adjusting those details will help make it more consistent.

    Marked as helpful
  • P
    Kyle Mulqueen•400
    @kmulqueen
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm particularly proud of executing the complex layout with CSS Grid. Returning to grid after some time away, I was pleased with how effectively it handled the responsive design challenge.

    For future projects, I'd focus on refining my typography implementation. The fluid typography approach using clamp() functions remains an area where I'm still developing my skills and seeking greater mastery.

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

    My main challenge was implementing the responsive diamond-shaped card layout that transforms seamlessly across breakpoints. Initially, I struggled with the grid-area syntax for precise card positioning. I overcame this by sketching the grid structure on paper first, then methodically testing different grid-template configurations until I found the optimal balance. The path issues during deployment also proved challenging, requiring me to adjust from absolute to relative paths for the SVG icons.

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

    I'd appreciate guidance on implementing fluid typography more effectively. While I've used clamp() functions for responsive text sizing, I'm unsure if my approach is optimal. Additionally, I'm interested in learning more efficient methods for maintaining consistent spacing ratios across different screen sizes. Finally, I'd welcome feedback on my CSS organization, particularly whether my text preset system could be structured more efficiently.

    Responsive 4 Card Section using CSS Grid

    1
    P
    Roberto•150
    @r0b3rtcode020
    Posted 3 months ago

    Awesome! Looks great!

  • Ebenezer Silva•110
    @Bene001700
    Submitted 4 months ago

    Pagina de produto utilizando flexbox e grid do css

    1
    P
    Roberto•150
    @r0b3rtcode020
    Posted 4 months ago

    Very good solution, congrats! You only need to check some details like padding, line-height and icon size. I like how you used picture tag for responsive images

    Marked as helpful
  • Lucas•50
    @LucasOrtiz5
    Submitted 5 months ago

    Responsive recipe page

    1
    P
    Roberto•150
    @r0b3rtcode020
    Posted 5 months ago

    Awesome! Looks great!

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