Skip to content
Submitted about 2 months ago

SOCIAL-LINKS-PROFILE

Banele Innocent Mjayezi•50
@DiPSAWCE
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of my workflow and effeciency in this project.

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

I struggled to get the avatar image to the correct size, then i realised that i wasnt styling the actual image to be the right size i was only stylying the container.

Community feedback

  • Konrad•140
    @ExtendoGHPosted about 2 months ago

    Project Objective

    The goal of the project is to faithfully replicate the design.

    I see that I used a different avatar and text, which is fine, but the styling is incorrect.

    1. The container should be centered both vertically and horizontally. I recommend using flexbox for this.

    2. The image should be circular. Use border-radius: 50% for this.

    3. There should be 5 social media links, but you have 4.

    4. The colors also differ slightly from the project.

    5. The design is not responsive. The links are too narrow at a width of 768px, and it also doesn’t look good at 475px.

    6. Alt Text: Writing longer and descriptive alt attributes for images would improve accessibility and make your website easier to use for people with disabilities.

    7. SEO Improvements: Consider adding tags like meta description and meta keywords in the <head> section to enhance the website's SEO potential.

    8. Responsive Design: To make the project fully responsive, it is recommended to use only rem units. Here's an article explaining why: Fedmentor - Font Size & Units. While you mostly use rem, there are instances (e.g., padding or margins) where px units appear.

    0

Please log in to post a comment

Log in with GitHub

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