Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 4 years ago

HTML and CSS solution with Flexbox

Maya Buser De•40
@mayabuserde
A solution to the Profile card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


My first challenge! I would love some feedback on my code structure and content. Also for the svg images in the background, is there a way to make them stay fixed in responsive layouts? I had to re-arrange them for the mobile version. Thank you!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grace•32,130
    @grace-snow
    Posted over 4 years ago

    Hi Maya,

    Overall this looks really good 👍

    I'd recommend you just take another look at the semantics of your html.

    1. You've tried to use headings in order, which is great, but try to really think about what makes sense as a heading.. . Eg what would you expect content to be under a heading of "803k"? Would that make sense on a contents page? Probably not. So it shouldn't be a heading. I think you only need one heading max on this, and the stats should be combined into a single meaningful tag like a paragraph or list item (using spans inside to style the number and word respectively)

    2. At a push this could be an article. But remove the header main and footer from it. Header and footer are allowed technically inside an article, but they actually make for a really poor screenreader experience. Assistive tech users would find it much easier to navigate when those are only used for main page/site content, like one header per page just like you have one h1 per page .

    Have a look at my solution if youd like to see how I approached it.

    Hope all that is helpful

  • Renszo Camacho•1,615
    @RenszCamacho
    Posted over 4 years ago

    Hello. Nice job!. You got a few issues,

    • One of them is the main tag, which must be involving your article tag.

    • It's a 'Good Practice' use a class instead of an Html tag. Like <header class="header">. There's something called 'specificity'. You could have more than one footer and don't want the same style.

    • Image tag should have an alternative text <img src="images/image-victor.jpg" alt="user image - victor" />

    • About the images in the background, you can play with the viewport width and viewport height. Something like this: background-position: right 52vw bottom 38vh, left 49vw top 51vh;

    Hopefully, it helps.

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Posted over 4 years ago

    Greetings, Maya Buser De! 👋

    I just wanted to say, congratulations on completing your first Frontend Mentor challenge! 🎉 Good work on this one! 👍

    Simply follow the helpful suggestions given above, and I think you'll be good to go! 😀

    Keep coding (and happy coding, too)! 😁

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub