Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Page made with Flexbox

mik 20

@MichaElL0

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

Using flexbox properly

Community feedback

@Talika-Bajaj

Posted

Hi @MichaElL0,

Your project looks great.

I'd like to suggest a way to make it even better:

  • Giving margins when using Flexbox Layout isn't a good practice. Instead, you should try and use the gap property that will space your text evenly inside a container.
.container {
     display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
} 
  • Also, I suggest using the:root pseudo Class Selector to specify colors and then use them later in your code. For Example,
:root {
    --Green: hsl(75, 94%, 57%);
    --White: hsl(0, 0%, 100%);
    --Grey: hsl(0, 0%, 20%);
    --Dark_Grey: hsl(0, 0%, 12%);
    --Off_Black: hsl(0, 0%, 8%);
}
body {
    background-color: var(--Off_Black);
} 

It is really helpful and keeps you hassle free from copying colors again and again. To know more, you can read this article - :root pseudo-Class Selector

Good Luck!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord