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 links profile with HTML & CSS

@MaxCodeCraft

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?

This is my second responsive project, using the @media queries. Since we don't have the Figma for free users, I tried to get the paddings and margins with GIMP, hope this is close enough !

What challenges did you encounter, and how did you overcome them?

Here is what I learned during this project:

  • Better understanding of the Flexbox model
  • How to make a container responsive with @media queries

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

None on this project, but advices are always welcome !

Community feedback

@zacc-anyona

Posted

Hello Danielle, You have done a really great job in taking your time to finish this challenge. But there are a few areas you can improve on.

  • You don't have to use multiple media queries for such a project. Using a mobile-first workflow will help you escape the hell of multiple media queries. What am I saying? HTML elements are naturally responsive, so you could start out by reducing the size of the browser window to resemble the size of a mobile screen. Then code out the HTML elements to conform with the mobile design. Then later on you can use one min-width media query to complete the desktop design. This post on media queries will help..

  • Always use modern CSS reset. It will help you with the image shrinking issue. This article will get you up to speed with the latest modern CSS reset..

  • There is a better and simple way of centering contents without the use of too much CSS code.

body {
min-height: 100dvh;
display: flex:
flex-direction: column;
justify-content: center; /*centers horizontally*/
align-items: center; /*centers vertically*/

Generally you have done a great job. If you find my comment helpful don't forget to mark it as helpful and give me an upvote.

Marked as helpful

1

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