Responsive Social profile card using semantic HTML, CSS, Google Fonts

What are you most proud of, and what would you do differently next time?

This is the second day of making things in frontendmentor.io website, and I was able to complete this project. That's what I'm proud of.

I was learning tailwind CSS, so I thought to do this project styling through tailwind, but I encounter one problem at the very start due to which dropped that idea. So, the thing that I would do differently next time would be using tailwind.

What challenges did you encounter, and how did you overcome them?

I encounter very common problem even I thought I know the solution up until now, which is:

• How to center a div. In this case, I need to center this profile card. Initially to center it I wrote the following CSS for the body tag:

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

This code does let the card to the center, but it wasn't center vertically. So, I searched on internet and got this solution to add the CSS of height 100vh to it in order to center it vertically so here we have it. I think after writing this I'm not going to forget this problem.

• I have also added margin:0; in the body CSS since I was getting a scroll bar which is due to Browser-applied margin.

After I submitted the solution, I get to see some accessibility and HTML report where your issues on the basis of these two were listed. Some of which I get in this project is:

I wrote this section tag in index.html file in which I put all those social media platforms and then assign p tag to each one of them, so I got this issue that:

• You should use the heading tag (h2-h6). At first, I just replaced p tag with h4 tag, then I got the other error saying that:

• You should use the tag which came after the first tag you've used in the file, in my case I have used h1 heading tag for the name. So, when I did assign h2 heading tag to each one of them, all the issue got resolved and I have to do 6 commits for it to be without any accessibility issues.