Submitted about 3 years ago

Coding bootcamp testimonials slider [React Component]

Aaron Stroud• 435

@astroud

Preview site View code

This is a solution for...

Coding bootcamp testimonials slider

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm looking for feedback on my React code and anything else that stands out (good or bad).

This is another refactored project. I submitted a HTML/CSS/JS solution last year.

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

Hi, Aaron Stroud! 👋

Nice to see you refactor another challenge! 😀 Well done on this one! 👍 The slider works well and the page looks good and is responsive, too. 🙌

Like pikamart mentioned, there is a horizontal scroll bar that appears along the bottom of the page that you might want to get rid of.

Also, I'm able to scroll down past the main content of the page and there's seems to some sort of extra section at the bottom of the page that contains the mobile layout of the slider surrounded by a grey background. Not sure what that's doing there! 🧐

Anyways, keep coding (and happy coding, too)! 😁

Aaron Stroud• 435

@astroud

Posted about 3 years ago

@ApplePieGiraffe Thanks for the feedback ApplePieGiraffe. Sorry for the late reply, been under the weather.

That gray background is the same one used used in the Figma designs. I thought it contrasted well and since I was building a component with two specific sizes, I wanted to include both on the same page. I'll be adding some clarifying text between them.

I saw in the newsletter that you tackled the invoice challenge with Next.js (IIRC). Now that I'm on the mend, I plan to check that out. I've been looking to use Next.js on a project.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@astroud

Oh, okay—that makes more sense! 👍

Yeah, Next.js is pretty fun and provides a great developer experience—I think it makes building sites in React a lot nicer! 😊

Look forward to your next project! 😀

Raymart Pamplona• 16,090

@pikapikamart

Posted about 3 years ago

Good work on this one. But a really small issue, there is an appearance of scrollbar at the bottom and it was cause by the first container of your image, or the container of your slider. To fix this, just add a width: 100% to it so that, your declared overflow will be applied and I don't know if you are supposed to display to slider at once? Since right now, there is the top slider and bottom slider appearance, is that what the challenge says? But still, slider functions well^

Aaron Stroud• 435

@astroud

Posted about 3 years ago

@pikamart Thanks for the feedback Pikamart. Sorry for the late reply, been under the weather.

What browser are you seeing that scrollbar in? I can't replicate it on my Mac with chrome/safari/firefox or on my iPhone.

Looks like my enhanced submission would benefit from some explanatory text in between the slider components.

The component defaults to the small size, but you can also pass a prop of large=true to get the full size (which is responsive).

I figured including both on the same page makes a better demo. I placed the large component at the top for the design comparison, but it sounds like the page would benefit from some clarifying text between the sliders.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord