Huddle Landing Page - Mobile First, Flex, SCSS, BEM.

Hi there, once again Shivam! 👋

Good job on another challenge! 👍 I think overall, your solution looks good and responds well! 😀

This is kind of a smaller project, so I think you're right in that you don't have to worry about splitting your Sass files a whole bunch. For a project like this, I would usually have a few partial files like layout.scss (for larger components and the overall layout of the page), base.scss (for a CSS reset and maybe CSS variables), and component.scss (for smaller components like buttons and links), and perhaps utilities.scss... that sort of thing (but that's just me, IDK what others do). For larger projects, you could look into using a popular file structure pattern like the 7-1 pattern.

BEM is pretty nice and I like how it works well with Sass's nesting feature. I think you used it well in this project! 👍

I actually don't use Sass so much (so I'm no expert), but you could look into creating mixins for commonly used styles and then drop those into your styles elsewhere so that you don't have to add many utility classes to each element on your page (if you'd like to work that way). 🙂

Well, keep coding (and happy coding, too)! 😁

Hi

I really like this solution, it's great!

I wouldn't bother splitting into multiple scss files for a tiny project like this, so that's fine. And all naming looks great, except footer__links which should probably be singular.

A few tiny changes I'd suggest, but these are by no means essential:

• remove the word icon from your social links aria labels. It's about where the link is taking you, not about the fact there's an icon in there. So just the name of the social site is fine :)
• similarly, lose Huddle logo - Huddle is the name of the site and that's enough
• The register button is much more likely to be a navigational link, not a button (unless it triggered a form in a modal maybe....)
• Try to make focus states a bit more obvious and more consistent. They are really hard to see at the moment, especially on the social links
• It's really unusual to use padding top on elements like paragraphs and headings, more usual to use margins. The reason is because margins will collapse on each other and not stack/double up. So if you put padding top on an element, and another dev made a component with padding bottom that was placed above, that would create doube the space between those elements. Whereas if they used the more conventional margin, whichever had the bigger margin would win and that is the whole gap.

That's all from me. Good job on this!