Responsive-ish Social Profile Links

Hello @maishamir!

Your solution looks great!

I have a suggestion for improvement:

• Use <main> to wrap the main content instead of <div>.

📌 Think of <div> and <span> in HTML like plain boxes or placeholders. They're handy for holding content, but they don't tell us anything about what's inside or what it's meant for on the webpage.

This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

Hi @maishamir!

• "Making a site responsive" does not mean that every site / component needs a media query. Social links profile is the perfect challenge to create responsive component without using media queries.
• I think you need to go back and spent more time learning HTML. Your document lacks landmarks, lists, anchors and have multiple heading elements that are unnecessary. Landmarks are a group of HTML tags and roles that define different subsections of a website and help navigate through a website. Your .card container should be <main> element, .links container could be a <ul> list and <p class="socials"> elements should be <a> anchors. Then keep your <h1> heading as it is your component title, but change <h2> element to <p>.
• For your image provide more descriptive alt attribute for the non-sighted users.
• Block elements (like html , body , div , p ) have width 100% automatically so width is not required for body element, remove that property from your css rules.
• Change body to take min-height: 100vh. 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.
• You shouldn't set height on your container. Your content should tell container how tall it can grow itself.
• You shouldn't use percentages to set dimensions of your container. % is relative to its parental container, which in your solution is body element. That mean when your .card have width: 28% and I open your website on mobile (e.g 375px wide), your .card component will have width of 100px only, which is not readable nor responsive. Instead use max-width: 390px (or rems if you read about them) and width: 100% so it will respect your parent container width, but never grow more than 390px. It will instantly make your container responsive without media-queries. The same applies for your margins/paddings. Use px or rem values.
• For your image use explicit width and height values like 100px. Have fun!