Social links profile

Hi @noormuhammadraza,

Congratulations on a great looking solution! I can tell you put a lot of effort in it. I like your use of clear descriptive classes, good job!

A bit of friendly constructive feedback:

• For the title you currently use a p tag, you could change this into a h1 so give it more semantic meaning. Because in this example it's the most important heading on the page.

• It's not always needed to wrap elements in a div. You could remove the div around .profile-bio for example and achieve the same styling. A p tag is a block element by default! If you need to layout something specifically by using Flexbox or Grid you could wrap the elements in a div.

• I see you used borders to maybe make it easier for you to understand the layout, I like that! A little trick I learned is to use this:

* {
  outline: 1px solid red;
}

This puts a red outline on every element on the page, which helps you debug CSS problems. A benefit of outline is that it doesn't take up any space like a border does.

• To answer your question about the exact size of the overal layout. You could use this piece of CSS:

.profile-card {
    max-width: 325px;
    background-color: var(--dark-grey);
    padding: 1.65em;
    border-radius: 12px;
    width: 100%;
}

So you set a max-width on the card so it doesn't grow above a certain fixed width. But the width: 100% still allows it to scale on smaller viewports. It's a guessing game to get the exact size of the card if you don't have the design file. And to be honest I won't worry about it too much. But it's good that you try to get your solution looking exactly like the design. It's a good mindset.

I hope you find my feedback helpful and let me know if you have more questions, always happy to help.

Hi, here are some of my suggestions for further improvement:

1)Use more semantic elements to improve the readability and accessibility of your HTML 2)Ensure that social media links are actual hyperlinks, providing proper navigation and improving user experience.