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

Simple Responsive Design

@MajdMohammed

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?

I am proud that i made many mistakes so i could learn from them Thanks to frontendmentor team ! next time i will respect the accesibility and i will use proper font size and width for the design.

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

I was confusing between what technics should I use to get a responsive design, and also what type of units should I use for font size and width etc... But thanks to the team members of frontendmentor I could get a useful feedback which helped alot on my research to fix all the mistakes.

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

The areas i need help with HTML/CSS structures, using proper CSS units in the right place, get good score in the lighthouse, responsive designs. I think All I need is tones of practice on different type of projects.

Community feedback

Sagi 120

@ratsagi

Posted

Greetings Mohammed. Good job on completing the challenge!

I have some suggestions for you to improve your solution.

  • You don't have to wrap your image with div to center it because you already did it with "main-container".
  • for qoutes there is a special tag like "blockquote" use it instead of paragraph. This helps screen readers to recognize "Front-end Developer and avid reader." this sentence is actually a quote not a paragraph.
  • in main-content you used to center vertically by using flexbox property "align-items: center" but to center horizontally you choose to use "margin: 0 auto" instead of it you could use "justify-content: center" By looking at your solution I find out the difference between them. If you use margin it automatically assigns margin to the main-content however if you use justify content it does not so I think the best way to center horizontally is justify-content for your solution. -From the responsive point of you, avoid using fixed units like px instead use rem. I noticed that you used them but try to be consistent because if you don't in small sceen sizes you notice unreadable content. I think for font-sizes clamp is not necessary just rem is enough.

I hope you find it useful!

Happy coding!

1

@MajdMohammed

Posted

@ratsagi Hello sir, Thank you so much for your feedback, it's really valuable for me.

I noticed that everyone is advising me to not use fixed units like px. I know that it's bad because it makes content unreadable in some screen sizes. But I am wondering when should I use it and when not.

For clamp() I was just have learned it so I was proud to use lol, but yea I noticed now that sometimes only rem is enough, especially when you calc() it with vw for better responsivity.

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