Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Html CSS javascript

@GiovanniRanzato

Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! 🎉

Giovanni Ranzato’s questions for the community

I started from mobile layout with flex box. When I moved to desktop version I used absolute-relative positioning to place the elements; I'm not sure I did it in the best way possible; can someone give me some advice?

I added some animations, but I've some issue if someone hammer the buttons. How may I handle buttons hammering?

Community feedback

P
Jen 1,230

@En-Jen

Posted

Hey Giovanni, really nice job with this challenge! I really like the animations and the hover state on the buttons and it looks really close to the design :) I just have a few suggestions for you:

  1. I would try to stray away from using id's as your CSS selectors and instead try to always use classes. You can read more about the rationale for that in this article (https://paulcpederson.com/articles/css-for-people-who-hate-css/)

  2. It would be nice to see some change in the size of the elements/layout for tablet widths. At just under 1200px screen width, it looks like there is too much whitespace.

  3. You might consider adding a max-width to the container because at large desktop screen widths, the text and the image get really far apart.

-Jen

1


@GiovanniRanzato

Posted

@En-Jen Hello Jen thanks for your advice! I will improve the design for sure.

0

Clinton 260

@DarkFM

Posted

Hi Giovanni.

Good job with the solution. I really like the animations as it is a nice touch. To answer your question on how to handle when the buttons are clicked really fast, you can implement something called debouncing. It is basically adding a delay after each button click and during this time you disable user input.

You can take a look at this example for more details

0


@GiovanniRanzato

Posted

@DarkFM thanks your advice will be quite useful!

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!