Submitted almost 4 years ago

Profile card component using Sass

Tereza•605

@sirriah

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, this is my first upload on Fronted mentor. I look forward to your comments. I have some questions:

I try to look at it on htmlpreview.github.io, but it takes ages to display it with css. Why? I think that it is caused of background-position in ".main". It calculates positions of those circles on background and it keep them responsive. Is my assumption right? What is the better solution than calc()?
What is the best way to display those circles on the background? First, I tried to add svg tags directly to the html, but at last, I added them into the css file as background-image.
What tags should i use for the "London, 80K Followers..." etc.? I looked at some solutions from another users and they mostly used p tag. But it is not the "real" paragraph, it is only one or two words. Could it be simply a div?

Thank you

Community feedback

Matt Studdert•13,611
@mattstuddertPosted almost 4 years ago
Hey Sirriah, congrats on submitting your first solution!! You've done a really good job 👏

Here are my thoughts on your questions:

When opening up the preview of your project, it loaded up quickly without a problem. So I can't replicate the issue you mentioned, as it seems fine. Perhaps the resource you mentioned loads pages slightly slower than usual? I really like your solution for positioning the circles, so I don't feel like there's anything wrong there.

The circle patterns inside the card are purely decorative, so using background-image in your CSS is the right approach, in my opinion. It's the one I'd go for!

I wouldn't use div elements in these instances. First off, I'd have the name as a h1. You should always have a single h1 on any page. For the age and city, I'd use span elements, as they're not headings, not paragraphs, but they are written content. div elements are used for generic structuring of content (an example would be grouping multiple elements together). Whereas span elements are generic content elements, so would be perfect here. For the "Followers", "Likes", "Photos" I'd say that these are headings, so h2 elements would make sense. However, to make it so they're genuine headings for those pieces of content and read in the right order for screen readers I'd put the headings first in the HTML and the numbers below in span elements. I'd then use Flexbox and flex-direction: column-reverse; to flip them visually to match the design.

I hope that helps. As I said, amazing work on this project. I'm looking forward to seeing your future solutions!
0
Tereza•605
@sirriahPosted almost 4 years ago
@mattstuddert Thank you. :)

OK, maybe I had some issue with internet connection, I will try it later :)

✅

Wow, that is interesting solution. I will try to remake the code. Thank you for the inspiration!
0
Matt Studdert•13,611
@mattstuddertPosted almost 4 years ago
@sirriah you're welcome! :)
0
Arihant Jain•175
@jarihant701Posted almost 4 years ago
Great Site I would suggest that you can just fix the body size to 100vw and 100vh instead of fixing the main component to 720px so that it would be more responsive and according to different screens. And for the footer you can just use absolute positioning to position it at bottom:0px. Otherwise great design :)
0
Mehmet•285
@memsbdmPosted almost 4 years ago
Personally for the background I put them in html then I used transform : translateX() translateY() it's easier I think ! I am also interested to know which tag use for London ...
0
Tereza•605
@sirriahPosted almost 4 years ago
@memsbdm yes, it is easier, but it is not a part of content. That is why I put it into the css as background, but I don't know if it is right.
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