@FLCHRIS
Posted
Hi there!, congrats on completing this challenge!! 🎊🥳
Your solution is very good, but it has some bugs 😥, here are some tips to improve your code 💯.
let's start with the HTML code:
Your main contend could be inside the main tag. This tag should not be inside another tag, for example the section, footer, nav, header tags.
It is not correct to use the a tag, inside the button tag ❌. Remove the button tag and just use the a tag.
// This is not correct ❌
<button class="hero__button button">
<a href="#">Get Started For Free</a>
</button>
// This is correct ✅
<a href="#">Get Started For Free</a>
You must remember that you should not skip header levels, that is very wrong ❌. I leave you a link so you can take a look.
For some of your images alt text is not enough, and in other images you don't even add it.
To fix the insufficient text error. ✅
I recommend making sure that the image alt text provides a brief but equivalent alternative to the image's content and functionality. Screen readers and browser rendering inform users that the object is an image, so don't use the alt text:
- Image of ❌
- Photo of ❌
On the other hand, if the alt text is empty alt='' is fine if the image doesn't indicate anything or does not add value to the web page.
You must remember that alt text helps people with disabilities know what the image shows, so the alt text should be very descriptive. I leave you a link so you can take a look.
SCSS 🎨
Your Grow Together, ..., Your User content, is overflowing because you are not using the width and max-width property correctly. 😥
Add the max-width: 400px property to your images; and the problem will have solved a little. It also removes a bit of the gap, with a gap: 2rem;, it already looks much better.
Your code is really good 💯, keep it up don't give up!!! 🙃
I hope I've helped you 😄
Happy coding! 👨💻
