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

Bruno514

@Bruno514100 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

  • Responsive Testimonial Grid

    #bem#sass/scss

    Bruno514•100
    Submitted 9 months ago

    I would really aprecciate some feedback on my CSS class naming using BEM, as I'm still new to it.


    1 comment
  • Responsive Four Card Feature Layout Section

    #sass/scss

    Bruno514•100
    Submitted 9 months ago

    2 comments
  • Responsive product preview using flexbox

    #react#sass/scss#vite

    Bruno514•100
    Submitted 9 months ago

    1 comment
  • Recipe Page

    #react#sass/scss#vite

    Bruno514•100
    Submitted 9 months ago

    0 comments
  • Social links profile card

    #react#sass/scss#vite

    Bruno514•100
    Submitted 9 months ago

    0 comments
  • Blog card with Flexbox

    #react#sass/scss#vite

    Bruno514•100
    Submitted 9 months ago

    1 comment
View more solutions

Latest comments

  • shwerts•220
    @shwerts
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    One day, I'll learn to use CSS preprocessors such as Sass or Less.

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

    Rationality of deciding an optimal layout for every @media breakpoint

    Testimonials grid section using CSS Grid

    #bem
    1
    Bruno514•100
    @Bruno514
    Posted 9 months ago

    Great solution. I really like how responsive it is. My solution does not change layouts that much and not as often, between devices as yours does (mine has only a grid and a document flow layout). Also, you did a great job at recreating the design, it looks perfectly identical!

  • P
    V.S Karthik Tirumalasetty•130
    @VSKarthikT
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I’m particularly proud of how I utilized SCSS mixins to create reusable styles, such as flex layouts and centralizing the border color styles for each card. This approach significantly improved in reducing generated CSS code , allowing me to make layout changes efficiently across the project.

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

    I struggled with aligning elements in the desktop layout, especially when positioning elements like .super_container and .calc_container to stick to the left and right edges while keeping the middle elements centered. This alignment was difficult to achieve within a single flex container due to the varying content sizes, which made the elements misalign or fail to stretch evenly. To address this, I added wrappers (wrapper_super, merge_box, and wrapper_calc) around certain elements to create individual flex containers. This allowed me to control the alignment and distribution of each section separately. By combining justify-content: space-between with media queries, I was able to create a responsive desktop layout that aligned as desired.

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

    While the current layout works, I feel there may be more efficient flexbox techniques or grid approaches to achieve the desired desktop layout without as many nested wrappers. Any guidance on optimizing complex responsive layouts with fewer containers would be helpful. I’d appreciate tips on maintaining equal height for flex children in a row without relying on fixed height or min-height. Sometimes, flex children with varying content height still misalign slightly on different screens, and I’m looking for more flexible ways to solve this.

    four card project using SCSS

    #sass/scss
    1
    Bruno514•100
    @Bruno514
    Posted 9 months ago

    Very nice layout! I actually used grid and didn't even think this challenge was possible using only flexbox...

  • Andre•50
    @dreemanuel
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Studying a new language (SASS) when I have just begun learning CSS and realize I still have a lot of ground to cover there, was really daunting at first. But after getting my feet wet in SASS, I realized that it is a more fully-encompassing version of CSS, and I can learn both languages and concepts at the same time.

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

    Setting up SASS for the first time, then reading about mixins and functions was a bit much at the beginning, but eventually eased up as I started to write it.

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

    I need help learning to make more use of SASS in place of (and to create better) CSS.

    Product Preview Card Component

    #sass/scss
    2
    Bruno514•100
    @Bruno514
    Posted 9 months ago

    looks good!

  • P
    Fırat•370
    @firatyedibela
    Submitted 9 months ago
    What specific areas of your project would you like help with?

    All feedbacks are welcome. Feel free to share your thoughts.

    Responsive Recipe Page [ Vite - React - SASS ]

    #react#vite#sass/scss
    1
    Bruno514•100
    @Bruno514
    Posted 9 months ago

    Very nice, looks identical to the design.

  • Ademola Joshua•40
    @Hardehmohlah
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of my accomplishment so far.

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

    Centering my Imagefile and making it round.

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

    Making the hover effect cooler

    My personal social link profile

    #sass/scss
    1
    Bruno514•100
    @Bruno514
    Posted 9 months ago

    Looks good

  • P
    Timothé Bissonnette•480
    @Fable54321
    Submitted 9 months ago

    blog-preview using sass

    #sass/scss#vite
    1
    Bruno514•100
    @Bruno514
    Posted 9 months ago

    f

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