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

Responsive Social profile page using flex box

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 are you most proud of, and what would you do differently next time?

ability to align the items using flex

Community feedback

@Shoaib-Bin-Rashid

Posted

great

Marked as helpful

0
Affan Amer 370

@AffanRM

Posted

Hey, upon viewing your website I have a few suggestions for you to improve your code and design:

  • Instead of using <button> to specify the navigation links, it is better practice to use anchor tags (<a/>) as anchor tags should always be used when presenting a link to another website.
  • Instead of specifying the font-size in pixels (px), it is better to specify it in rem/em units so that your website is more accessible for all users.
  • Your website is not vertically aligned on my laptop screen, one way to achieve this is by wrapping your box class in another <div class='x'> and then setting the following properties for this <div>
.x{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
If you need any further help, then let me know!

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