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

Social links profile html css

@kikilo123

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Ridwan10000

Posted

@kikilo123 Congratulations on completing the project. Here are a few remarks:

  1. You haven't used the favicon provided with the starter file.

  2. Try to use link tag instead of using @import rule in the CSS for better performance.

  3. Use main tag. This is how browsers find the main content of your page. Learn about more semantic tags.

  4. Do not use height:100vh and width:100% for the .container rule. Your container is holding all your content inside it. Notice It's taking about 90% of the widths for phones' display. So, Use width:90vw instead. Also to restrict it to expand more than a nice width use max-width property.

  5. You don't and shouldn't define an explicit height for contents. It certainly damages the fluidity of your layout. Thus breaks the responsiveness. Instead of using width: 400px use % units for retrieve the fluidity of the layout.

  6. Don't use px units too much. Get into the habit of using relative units. Try em and rem units where necessary. Using px values will restrict the fonts to resize according to the user's will.

  7. In the .butoons .but rule use relative units.

  8. Last but not the least, Be careful of changing the title of your page.

Take care of the fluidity of your cards. This will help you a lot building responsive pages. Keep coding. Good Luck

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