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

Adán Estévez

@rafdidactDominican Republic320 points

Computer systems engineering student. I'm building software and designing websites.

Latest solutions

  • Results summary component built with CSS BEM and HTML

    #bem#accessibility

    Adán Estévez•320
    Submitted over 2 years ago

    0 comments
  • Article preview component built with JavaScript, CSS BEM and HTML

    #bem

    Adán Estévez•320
    Submitted over 2 years ago

    0 comments
  • FAQ accordion card built with JavaScript, CSS BEM and HTML

    #accessibility#bem

    Adán Estévez•320
    Submitted over 2 years ago

    0 comments
  • Interactive rating component built with HTML, CSS and JavaScript

    #accessibility#bem

    Adán Estévez•320
    Submitted over 2 years ago

    0 comments
  • Order summary component built with HTML and CSS

    #accessibility

    Adán Estévez•320
    Submitted over 2 years ago

    0 comments
  • Single price grid component built with HTML and CSS

    #accessibility

    Adán Estévez•320
    Submitted over 2 years ago

    1 comment
View more solutions

Latest comments

  • Leonardo Henrique•220
    @henrikkudesu
    Submitted over 2 years ago

    Stats preview card component solution using Flexbox

    2
    Adán Estévez•320
    @rafdidact
    Posted over 2 years ago

    Hey, Leonardo! I did the same as @chicaboom-73 for the overlay, you should check that documentation out.

    I see you're almost there, but I got a suggestion that would make your code even better:

    • There's no need for two source elements inside of your picture element. You can just add the source of the image of the first layout your working on to the img element, and then add the remaining one in a source element to display only if it meets the condition you declare.

    You can check my solution for reference. Hope it helps.

    Marked as helpful
  • Kartik Pal•20
    @kartikp962
    Submitted over 2 years ago

    Product preview card component

    2
    Adán Estévez•320
    @rafdidact
    Posted over 2 years ago

    Hey, Kartik!

    I got a few suggestions that would make your code even better:

    • Your layout should be responsive. This means the components of your design should be properly reorganized depending on the width of the device your viewing it from. When I switch to mobile view, your design stays the same. You can make your CSS automatically apply new styles depending on the width of the device your viewing it from with a @media rule.
    • Your button should take all the width available and change cursor to pointer when hovering. You can achieve this with a width: 100% and a cursor: pointer.

    You can check my solution for reference. Hope it helps.

  • Hanzala Bhutto•260
    @hanzala-bhutto
    Submitted over 2 years ago

    Stats Preview Card Component Responsive Design(FLEXBOX && GRID LAYOUT)

    1
    Adán Estévez•320
    @rafdidact
    Posted over 2 years ago

    Hey, Hanzala!

    I got a few suggestions that would make your code even better:

    • I can't see the font family this design's supposed to be applied. If you don't know what I'm talking about, check the style-guide.md file in this challenge's folder.

    • When on a desktop view, the text inside your modal should be aligned to the left. You can achieve this by applying text-align: left to your h1 and p elements inside of .contents.

    You can check my solution for reference. Hope it helps.

    Marked as helpful
  • Angga Anugrah Pratama•60
    @anggaanugrah
    Submitted over 2 years ago

    Interactive rating component with html, sass, & javascript

    #sass/scss
    2
    Adán Estévez•320
    @rafdidact
    Posted over 2 years ago

    Hey, Angga!

    I like your JavaScript, maybe even more than mine. It's very clean, but there's a common user error you have to catch.

    If the user doesn't select any rating and then clicks submit, the form is submitted and the thank you message is presented without a rating. This should not happen.

    In my code, this throws an error to the console. I catch it with a try statement wrapping the code that might break and a catch statement wrapping the code that should run if so.

    You can check my solution for reference. Hope it helps.

    Marked as helpful
  • Edward Hong•70
    @edward-hong
    Submitted over 2 years ago

    Interactive Ratings Component - React/Tailwind

    #react#tailwind-css
    1
    Adán Estévez•320
    @rafdidact
    Posted over 2 years ago

    Hey, Edward!

    Your rating options should get selected when you click on them, not immediately submit the rating given. You can look at my code for reference.

    Now, about the colors, I actually have the same problem with this challenge. It might be a problem of the starter code folder or we might both be wrong lol. Let me know if you find the right approach to this.

    Marked as helpful
  • Charles Effiong•10
    @charleseffiongjr
    Submitted over 2 years ago

    Product preview card using html and css

    1
    Adán Estévez•320
    @rafdidact
    Posted over 2 years ago

    Hey, Charles!

    Bootstrap doesn't allow for much customization of the styles being applied to your HTML, which has a reason to be, but sucks in cases like this. I suggest you to look at other people's approach to this challenge and try to solve it with CSS.

    You can start with my code. Hope it helps.

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