Hi, I think this looks great!
Some very small points for improvement in the HTML:
- Never put
alt="logo"
. Alt text needs to be a meaningful description of an image. In this case, that's Huddle (e.g. how would assistive tech users know what this product is called?) - the header element should be above main, not inside it
- those social icons should be inside labelled anchor tags. They would be links, and need focus and hover states on those links like any other (they are also hitting the bottom of the screen on mobile, so maybe give them some margin-bottom)
- you have an extra div you don't need IMO. Container__title is unnecessary as you could put the padding on the div above.
In the css you are making it more complicated than it needs to be. Don't worry about changing font sizes so much. And try to think about reusable classes for things like buttons - that shouldn't need a nested selector specific to this component but a .btn
class that could be used again.
In future challenges I'd recommend you focus on
- mobile-first
- keeping css specificity as low and flat as possible by using single class selectors in your css (better to have more than one class on a html element if needed than have nested or oveely specific css)
- small accessibility details like alt text visible focus states, hovers etc
Best of luck
@Vj3ko
Posted
@grace-snow ty so much for ur time reviewing this, i really appreciate it