Huddle landing page with section curved HTML/SCSS(fixing some pronlem)
Design comparison
Solution retrospective
Well I'm almost finished but seen from the comparison it's not really that much so I'm continuing to change thanks for your feedback π
Community feedback
- Account deleted
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 thesection
,footer
,nav
,header
tags.It is not correct to use the
a
tag, inside thebutton
tag β. Remove thebutton
tag and just use thea
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 emptyalt=''
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
andmax-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 thegap
, with agap: 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! π¨βπ»
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord