Skip to content
Submitted 9 months ago

Profile social card using CSS Flexbox

josrubfer•40
@josrubfer
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

Hi everyone, I am a new student diving into HTML and CSS, and as I don't have a formal instructor, I am reaching out to the community for feedback on my project. I am eager to learn and improve, and I believe your insights can help me adopt better practices.

I would greatly appreciate it if you could take a moment to review it and provide feedback. Specifically, I am interested in any recommendations for changes or alternative approaches that align with good general practices.

Your expertise and guidance would be immensely valuable to me as I continue to grow in my HTML and CSS skills. Thank you in advance for your time and input.

Community feedback

  • ezecoder•870
    @3eze3Posted 9 months ago

    Ey!👀 , very good solution for this challenge josrubfer. 🎇

    I have some recommendations that may help you in future challenges.🧨

    HTML:

    • In images you should always have the alt="" attribute, which is itself an alternative text, the alt attribute will make sure that the engines do not miss important sections of the pages.

    • There is no need for a tag <figure>, or <figcaption> you could include the tag for the name, but it would be a bit forced.

    • The use of <buttons> inside the <a> , is not correct, you could just use the a tags, since you are actually directing to another page, and a <button> fulfills a specific functionality within the page in most contexts.

    • You could choose to learn some Methodology of classes for your tags like BEM , I leave you the link if you are interested: Methodology BEM

    CSS:

    • The pseudo-class of ":active" would be ":hover", not ":active", already with the passage of the cursor is more intuitive and we interpret faster that it is an interactive tag

    • Use of relative tags like em, rem , to handle padding, margin and fonts, there are more you can see it here: Relative Units

    I hope these tips help you and keep going.

    Happy coding 🥏

    Marked as helpful
    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