Submitted about 2 months ago

social links profile

nflakes•60

@nflakes

Preview site View code

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?

everything

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

sizing, position

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

code structure

Community feedback

Maren Ehlers•200

@MarenOelixtownPosted about 2 months ago

Congrats on completing the challenge 🎉 Nicely done...but if you would like to have an idea for code structure, maybe something like this to avoid divs:

<body>
    <main>
      <section>
        <img src="" alt=""/>
        <h1>Jessica</h1>
        <h2>London</h2>
        <p>"Frontend Developer"</p>
        <ul>
          <li>
            <a href="" target="_blank">GitHub</a>
          </li>
          <li>
            <a href="" target="_blank">Frontend Mentor</a>
          </li>
          <li>
            <a href="" target="_blank">LinkedIn</a>
          </li>
          <li>
            <a href="" target="_blank">Twitter</a>
          </li>
          <li>
            <a href="" target="_blank">Instagram</a>
          </li>
        </ul>
      </section>
    </main>
  </body>

See this html-help https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a and this css-help https://www.w3schools.com/css/css_link.asp for the a-tag. This ensure visitors can navigate the links only using their keyboard.

Cheers ✌️

RafiMauludi255•50
@RafiMauludi255Posted about 2 months ago
Your solution is good
0

Please log in to post a comment

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