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

Emanuele Fabrizio

@efabrizio75München, Germany220 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!

I’m currently learning...

React Next.js

Latest solutions

  • Interactive rating component (no libraries)

    #accessibility#semantic-ui

    Emanuele Fabrizio•220
    Submitted 11 months ago

    I would like to see how others implemented the radio buttons while maintaining full keyboard functionality.

    Also, I would like to understand better why the colors I copy from the style guide file different from those that they appear in the Figma design. It's a bit annoying, but I am sure it is my ignorance in the usage of the tools. Please help :-)


    1 comment
  • Clipboard landing page (no libraries)

    #accessibility#semantic-ui

    Emanuele Fabrizio•220
    Submitted 11 months ago

    I kindly request some help in achieving full fluid/responsive layout without any kind of query (being @container or @media).

    I would like to see the minimal skeleton necessary (without negative margins, relative positioning) what maintains the current design, but as we move from 320px to 2000px of viewport's width, the elements position themselves and preserve their maximum design's width.

    Thank you!


    0 comments
  • Meet landing page (no libraries)

    #accessibility

    Emanuele Fabrizio•220
    Submitted 11 months ago

    I would like help in two areas:

    1. The hero image/s without using the translate function. I still did NOT find a way to replicate the design responsively. I managed to offset it a bit with position: relative and a negative value but it's not as fluid as I wanted.

    2. The image background in the footer blended with some color: I used an overlay with a fill color, but can we also use gradients?

    3. The contrast ratio of the colors provided in the design it often does NOT pass WCAG 2 AA requirements. I have a problem with this and I think that maybe I am not understanding how to read the design documents.

    Thank you for any help.


    1 comment
  • Testimonial grid section (no libraries)

    #accessibility#semantic-ui

    Emanuele Fabrizio•220
    Submitted 11 months ago

    I would like more help in understanding better the style guides.


    1 comment
  • Four card feature section (no libraries) (grid)

    #accessibility#semantic-ui

    Emanuele Fabrizio•220
    Submitted 11 months ago

    1 comment
  • Recipe page (no libraries) with Rich Data

    #accessibility#semantic-ui

    Emanuele Fabrizio•220
    Submitted 11 months ago

    What do you guys suggest to place the image? Is it better to use only the picture tag and forget 15+ years old browser?


    1 comment
View more solutions

Latest comments

  • Roid Zuhdianto•330
    @roidzuh
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    React, Tailwind CSS, mobile-first approach

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

    none.

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

    Any feedback is welcome!

    Interactive Rating using react and tailwind css

    #accessibility#react#vite#tailwind-css
    1
    Emanuele Fabrizio•220
    @efabrizio75
    Posted 10 months ago

    Congratulations on your solution. I liked because it was readable, even though I am not familiar with Tailwind, I could "deduce" the meaning of the class names.

    Obviously this challenge is a component, so I doubt it would exist on its own, hence I am not sure it's too important to make a comment on the use of "landmark" elements.

    Thank you for sharing this solution, I learned a bit more about Next.js

  • P
    JOSIANE FERMAO•170
    @josifermaodev
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have managed to complete the project alone.

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

    I had difficulty with the footer background image and in the first section of the page, but with a little research I was able to resolve it.

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

    I would like help with the top of the page, I believe there may be a better way to do this section! Any feedback is welcome

    Meet landing page solution

    #accessibility
    1
    Emanuele Fabrizio•220
    @efabrizio75
    Posted 11 months ago

    Awesome! You got the solution using very minimal and clean CSS!

    Congratulations to you.

    I very much liked your usage of flex.

    Marked as helpful
  • Poncho Ramos•290
    @alfonso-ramos
    Submitted 11 months ago

    testimonials grid section

    #accessibility
    1
    Emanuele Fabrizio•220
    @efabrizio75
    Posted 11 months ago

    Congratulations on completing this challenge! It's always hard to get to the end of any project, and you did it!

    On the accessibility front, I recommend using at least one main landmark element, like a main tag, as well as a header which you can then visually hide.

    I liked your usage of the grid-area. Any reason why you used ordinal numbers for the grid-area (first, second, third, etc.) and cardinal number for the class names of the cards (card1, card2, card3, etc.)?

    Very well done!

  • Eric Aguayo•1,055
    @EAguayodev
    Submitted over 4 years ago

    four-card-feature

    #accessibility
    2
    Emanuele Fabrizio•220
    @efabrizio75
    Posted 11 months ago

    Congratulations on completing this challenge.

    You used semantic HTML. It is accessible even though I would not skip heading levels and use h2 for the cards' titles. I liked the structure of your code and the usage of float: right to position to the icons, cool idea.

    The only issue I found is with the screen widths between 700px and 1200px: the translationY value causes two of the feature cards to be staggered incorrectly.

    Marked as helpful
  • Malak Ben Romdhane•10
    @malakbenr
    Submitted almost 2 years ago

    product-preview-card-component-main

    #accessibility#semantic-ui
    1
    Emanuele Fabrizio•220
    @efabrizio75
    Posted 11 months ago

    Congratulations on your solution!

    I liked your usage of the picture element and the naming convention for the CSS classes.

    Thank you for the ideas.

    Marked as helpful
  • Jennifer•110
    @jenieg
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I'm finally getting the hang of using CSS's ability to do variables, pseudo-selectors, and nested rules.

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

    I had some issues getting the image and article sections to visually look like the design file. This was my first mobile-first approach project.

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

    Would love feedback on my CSS and how I could optimize it or clean it up.

    Responsive Recipe Card with HTML and CSS

    #accessibility#semantic-ui
    1
    Emanuele Fabrizio•220
    @efabrizio75
    Posted 11 months ago

    Well done Jennifer! Congratulations on competing another challenge!

    As you requested, I took a look at opportunities in your CSS and what came to mind was in the table element: have you considering using the th tag so you don't need to resort to pseudo-selectors? Even though the table is oriented differently, "Calories", "Fat", "Protein", and "Carbohydrates" are still acting as headers.

    When I looked at the instruction steps, I noticed that maybe some left padding is needed. Likewise, I am curious about the counter-reset usage: I thought there was no need in this case, but in case you know more I'd very interested to learn :)

    I really liked your exploration and usage of the nested rules in CSS! It reminded me that I should do more of it :-P

    Ah, the hr element appears a bit thicker than the design. It's not an easy element to style, but you could try by assigning an overall border of 1px to it, and then eliminate either the top or the bottom:

    hr {
      border: 1px solid var(--clr-stone-600);
      border-bottom: none;
    }
    

    Again, awesome work and continue with more challenges!

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