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. Only HTML and CSS.

@AlarconJesus

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


Hi! I'm Jesús Alarcón, I'm new to frontendmentor, and any feedback will be well received.

Community feedback

P
Grace 27,950

@grace-snow

Posted

Hi,

This looks good on mobile portrait, but breaks a little on landscape with the footer overlapping the card and the top of the card hitting the top of the screen. See if you can fix these small things

Good job on the rest 👍

1

P
Grace 27,950

@grace-snow

Posted

There are a few issues with your html at the moment. Here's a few tips that should help (they seem like small things but are really important for real websites when you need search engines and assistive tech to outline your webpage content correctly)

  • headings always need to go in order. It's nothing to do with their size in a design as that can be changes with css, just the meaning matters. H2s always follow h1
  • those numbers can't actually be headings anyway as they don't make sense on their own. 80k is not a heading for the word 'followers'. Instead the number and word need to be in the same meaningful element, with spans inside that element to style the number and word separately.
  • when you write alt text, never use words like 'image' or 'photo of'. The element is announced as an image anyway
  • background or decorative images that have no meaning like Card header background image should have their alt attribute left blank like alt="". That tells screenreaders they don't need to announce it.

Hope these help you ☺

Marked as helpful

1

@AlarconJesus

Posted

Hi, Thank you very much grace!, for taking your time and reading my code. I will take into account all your recommendations, I appreciate your feedback 💻🙂.

0
Art 420

@Art-wdt

Posted

I love your job. I also recently completed this challenge

I had problems with background-position But I liked your solution background-position: right 50vw bottom 50vh, left 50vw top 50vh;

1

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