Hi @Avanti-L,
Everything looks good at first glance. I took a look at your HTML and there are a couple of changes I’d suggest.
- For changing
<p class="name">Jessica Randall</p>to<h2>Jessica Randall</h2>: h2 is better for headings and helps with page structure and SEO, while <p> is for paragraphs. - For replacing button tags with links
<a>: links are meant for navigation, and buttons are for actions. Using<a>tags for GitHub, LinkedIn, etc., fits their purpose better.
When I checked the site in DevTools with a 320px width (which is a common mobile size), the layout was breaking - view screenshot.
I also took a look at your CSS and noticed that all your styles are in just two media queries - which is not ideal
- For having only two media queries in your CSS: Complexity and Performance: Using too few media queries can make CSS complex and affect performance. More specific breakpoints make the layout more flexible and efficient.
Here is my css of this challenge - view on github
When I was doing this challenge I followed a mobile-first approach. There is a nice blog which explains what that means - view blog
But in short: start with Mobile Styles, design the base styles for the smallest screens first and then apply media queries when screen size is getting bigger.
I've noticed that you used .container class for the card itself i would suggest to seperate those out like <div class="card container">.
You could benefit for taking a look at mdn docs, there you will be able to see all the available css selectors.
