Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card component using Sass

Tereza 605

@sirriah

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
Matt Studdert 13,611

@mattstuddert

Posted

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

@sirriah

Posted

@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
P
Matt Studdert 13,611

@mattstuddert

Posted

@sirriah you're welcome! :)

0

@jarihant701

Posted

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

@memsbdm

Posted

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

@sirriah

Posted

@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

Log in with GitHub
Discord logo

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