Social-profile with flexbox

Hi iOtele. Nice Solution!

To try and answer your questions in order:

• "How to align the card to the center?": The way you chose to implement this was fine! For these challenges, to center the component I'm building, I normally just use the main element which I give a display: grid and make take up the entire height of the viewport like this:

main {
  min-height: 100svh;
  display: grid;
}

Doing it this way you'd only need to set a min-height, because main is a block level element by default and therefore already takes up the entire width.

Then on the component I would use place-self: to center it like this:

.component {
  place-self: center center;
}

If it was a real site with more content you might not want to do this, but for these little challenges it works well.

• "How to efficiently use CSS?": I don't have a simple answer to this one because I'm still learning, but I can tell you what I'm doing! I think it's best to nail down the fundamental concepts behind CSS like the box-model, the cascade, specificity, layout algorithms etc. That will hopefully give the best foundation to build on as you learn more.

• "Can I start applying for jobs when I can conveniently use tools like chatGPT to solve tasks?": Yes. You should have a solid understanding of the concepts so you can solve more complicated problems than ChatGPT can, but everybody uses ChatGPT or has to look things up some times, especially with CSS.

A final tip:

• I would use just <a> tags for the links. You can style an anchor tag however you need to, to make it look like the buttons in the design. Semantically, buttons are more for interaction within a site and anchors are for taking you to another one, which is what is happening here.

Hope some of this was useful!

Please correct me if anything I said was wrong.

Good luck!