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

CSS Flexbox and javascript

@faraz343

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 (11)
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="pattern-curve" src="images/pattern-curve.svg">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="pattern-quotes" src="images/pattern-quotes.svg">
error

Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.

<a href="#" onclick="statechange(0)"><img src="images/icon-prev.svg"...</a>
error

Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.

<a href="#" onclick="statechange(0)"><img src="images/icon-next.svg"...</a>
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="tanya" src="images/image-tanya.jpg">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="pattern-bg" src="images/pattern-bg.svg">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="pattern-quotes" src="images/pattern-quotes.svg">
error

Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.

<a href="#" onclick="statechange(1)"><img src="images/icon-prev.svg"...</a>
error

Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.

<a href="#" onclick="statechange(1)"><img src="images/icon-next.svg"...</a>
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="tanya" src="images/image-john.jpg">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="pattern-bg" src="images/pattern-bg.svg">

Faraz Ahmad’s questions for the community

I would like to have feedback . Thanks in advance

Community feedback

P
Jen 1,230

@En-Jen

Posted

Hey Faraz, nice job! Your solution looks pretty close to the design and the functionality of the slider works well. Here are some suggestions I have for you:

  1. For cleaner code, it's best to write your JS in a separate file instead of writing it directly in your HTML file.
  2. Try using more semantic HTML tags like <p> or <blockquote> instead of just <div>.
  3. Try to avoid using the <br> tag in your HTML and instead try positioning elements in CSS with flexbox or CSS grid.
  4. Your avatar image gets really stretched out at many different screen widths. One way to avoid that is by giving either the width or the height of an image a value and then setting the other measurement to auto.

Happy coding! -Jen

1

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!