Not Found
Failed to decode param 'order-summary-component-gCBkGCVS5%20-%20Issues%20%B7%20joaomaia-code'
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

Coding bootcamp testimonials slider [React Component]

@astroud

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

Report

0

Accessibility Issues

0

HTML Issues

View Report

Aaron Stroud’s questions for the community

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

P

@pikapikamart

Posted

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^

1


@astroud

Posted

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

0

P
ApplePieGiraffe 29,085

@ApplePieGiraffe

Posted

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)! 😁

1


@astroud

Posted

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

1

P
ApplePieGiraffe 29,085

@ApplePieGiraffe

Posted

@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! 😀

1

Please focus on giving high-quality, helpful feedback and answering any questions astroud might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

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