Skip to content
Submitted 7 months ago

Responsive social links profile landing page | HTML5, CSS3

P
Ishmael Sunday•250
@okayishmael
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?
  • Incremental growth(3 days, 3 builds completed).
  • Learning agile(Being able to build a new component almost everyday towards completing my beginner level).
  • Next time I'd like to decrease development time by 30mins.
What challenges did you encounter, and how did you overcome them?
  • My button link color turns blue on iphone. I have not been able to fix that yet.
What specific areas of your project would you like help with?
  • My button link color turns blue on iphone. I have not been able to fix that yet.
Code

Please log in to post a comment

Log in

Community feedback

  • P
    Habeeb Kareem•980
    @olaide-hok

    Use rem Units Consistently: Some font sizes use rem (e.g., 1.5rem), while others use px (e.g., 24px).

    The hover and focus styles for .profile-links a are combined, which can make debugging harder. Separate them for clarity.

    .profile-links a:hover { background-color: var(--accent); color: var(--body-bg); }

    .profile-links a:focus { background-color: var(--accent); color: var(--body-bg); }

    The media query for min-width: 576px repeats styles that are already defined (e.g., .profile width is set to 100% again). Only include styles that change in the media query.

    Selectors like .profile p and .profile h1 are overqualified. This can make the CSS harder to read and maintain. A fix would be to use simpler class-based selectors where possible. For example: .profile-title { font-size: 1.5rem; font-weight: 500; margin-bottom: 0.5rem; }

    .profile-description { font-size: 1rem; font-weight: 300; margin-bottom: 0.7rem; letter-spacing: 0; }

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