Skip to content
Submitted about 1 year ago

Simple Responsive Design

accessibility
Mohammed Majd•120
@MajdMohammed
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Sagi•150
    @ratsagi

    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!

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