Submitted 3 days ago

Social profile card NEWBIE - with HTML & Pure CSS / SEO / Responsive

Facundo Andrés De Los Rios• 90

@FacundoDLR

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

🛸 Hello FEM Community! I'm Facundo and this is my solution for this challenge! 😊

🛠️ Built with:

HTML 🧱
CSS 🎨
BEM Notation 🅱️
Flexbox ⚒️
Responsive Design
SEO
Mobile First
NEW media query ranges syntax

This project challenges us to study the interactions with the elements that we can find on a web page and I was also able to learn about SEO, metadata and CSS optimization, as well as the use of the new media query syntax.

Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Community feedback

Kamran Kiani• 900

@kaamiik

Posted 3 days ago

Hi. Congrats for doing this challenge. I have some notes I wanna mention:

You should not limit your width and height in a container that have text inside. Usually you do not need width and height for your code. You only need min-height: 100vh for justifying your card inside body and max-width for some elements. If you use max-width here, then you do not need any media query for the card.
Add a better alt for your profile picture.
You can not wrap two interactive elements inside each other(I mean a and button) you can use either one of them. If the interactive element take you to a new page, then It's a and if It's do an action, then It's a button.
The footer should be outside the main.

Grace• 30,650

@grace-snow

Posted 3 days ago

I'll add to the above that you need to change the headings in this. The person's name should be a h1 as its the main heading for all content on the page.

And the location should not be a heading at all. It is not appropriate heading content for the subsequent content..

It's important to only use headings where appropriate, and then place in hierarchical order to reflect the structure of the content.

I also recommend placing the list of links inside a list element with list items. (Once you've removed the buttons)

Marked as helpful

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