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">Design comparison
Reports
Accessibility report (11)
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
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:
- For cleaner code, it's best to write your JS in a separate file instead of writing it directly in your HTML file.
- Try using more semantic HTML tags like
<p>or<blockquote>instead of just<div>. - Try to avoid using the
<br>tag in your HTML and instead try positioning elements in CSS with flexbox or CSS grid. - 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
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!