@Victor-Nyagudi
Posted
Good attempt on this one.
A couple of things to note.
I see an index.html
and index2.html
file in your repository. index2.html
is basically empty, so I'm assuming you either don't need it or forgot to delete it.
If you don't need any files, it's best to delete them or not add them to GitHub in the first place. There should also only be one index.html
file, so having another can confuse other people looking at your code.
Secondly, you used a <p>
tag inside a <button>
here. This is what's causing the error in the HTML validation report.
<button class="add-to-cart" id="cart-button"> <img class="icon" src="images/icon-cart.svg"
alt="shopping cart icon">
<p>
Add to
Cart
</p>
</button>
This HTML you've written is invalid because a <p>
tag is a block-level element (takes the full width of the container it's in) while a <button>
is an inline element (only takes the amount it needs).
Only inline elements e.g. <span>
can be inside other inline elements, so if you wanted to wrap "Add to Cart" inside the <button>
to style it differently, I'd recommend a <span>
.
If you don't need to style the text in a special way, just put it inside the <button>
without a wrapper.
<button class="add-to-cart" id="cart-button">
<img class="icon" src="images/icon-cart.svg" alt="shopping cart icon">
Add to Cart // <- No <p> tag surrounding it
</button>
Finally, your solution isn't fully responsive. As the page is resized, the image and text eventually get cropped out.
I'd recommend looking at other people's solutions and studying their code to see how they got theirs to be responsive. I've seen a couple of good ones, so you won't need to look very hard.
Hope all this helps.
All the best with future solutions.