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

HTML, CSS

@AlbanDavid494

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


I need comments and review on this guys. thanks for the comment have made changes to my code. have leant something

Community feedback

@AlbanDavid494

Posted

Thanks alot. Let me work on it immediately

0

@zacc-anyona

Posted

Hello @AlbanDavid494, Your solution is good, but there are some few areas you can improve on.

  • Your page is not well landmarked. For example the div element with class attribution you could have enclosed it with <footer></footer>. Footer element is used to display author information, contact details. It is normally found at the bottom. But your author details are appearing at the top of the page.

  • Responsiveness. Your page is not that responsive especially for mobile devices. Consider reformatting your media query to;

@media screen and (max-width: 600px) 
/*for smaller screens have a standard a width of 600px*/
  • The challenge was about social media links. Consider to add <a href=""></a> to your buttons.

Other than that you have done a great job in completing this challenge.

0
Lahan 210

@lahanhelith

Posted

Hey man!

You have done an OK job with your solution but it seems you had trouble centering it horizontally and vertically. For this, you can use CSS Flexbox on the body by using this code in CSS.

body{
display:flex;
margin:0;
min-height:100vh;
align-items:center;
justify-content:center;
}

If you have no idea about what Flexbox is or how you can work with it you can watch this video which explains the concept quite clearly.

Also, there are some things you can change within your HTML such as using a <main> element to contain your card content which does not impact how it looks and using an <h1> tag with a reduced font size which aids in SEO.

Furthermore, it is possible to make the card look responsive on all screen sizes without using a media query which I would suggest you try to achieve.

Good Luck with your Frontend Journey!

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