fem-challenges

Profile Card

The Challenge, Finished Project, and Refactored Project

Frontend Mentor Profile Card Component Challenge

Finished Project

Refactored Project

Presentation and Components

• there is a presentation wrapper, a card component, an attribution
• the presentation layer has two positioned background images
  • this is essentially optional as we want the card to be available for use in other contexts
• the Card size is constrained to:
  • min: 326px x 374px
  • max: 350px x 374px
• the card component has three sections:
  • avatar
    • background image
    • avatar image
  • identity
    • name
    • age
    • location
  • statistics is a list of three components:
    • stat
      • stat number
      • label
• the card is centered in the presentation layer BUT it could easily be presented in other contexts
• the attribution is not part of the card, is part of the presentation

Technical Questions

Presentation Wrapper

How are the background graphics loaded and made responsive?

• use ::before ::after pseudo-elements
• postion: absolute (the wrapper itself must be position: relative)

⚡ there is a simpler way to get this done without the use of pseudo-elements, updated code based on example on Afolabi Oseni’s solution

How is the component most easily centered?

• whole screen is involved, set the body and wrapper to viewport size
• use flex in column mode to allow attribution to be displayed
• Ref: Viewport Height/Width CSS Code

How should the child elements/components be spaced?

• the attribution will be positioned under the card
• create a flex-gap utility class to create a spacer that can be applied to the footer holding the attribution

Card

How is the card responsive but also constrained to its min/max widths?

• use clamp()
• Ref: MDN: clamp()

How is the avatar image presented framed in a circle?

• border-radius: 50% turns boxes into circles

How is the avatar offset from the background graphic?

• transform: translate(x,y) positions an element relative to its normal position in the document flow

What is the best way to structure the identity?

• use p elements combined with span for text that requires additional formatting

What is the best way to structure the statistics section and each stat?

• as a list, will keep them together and ul can be used to apply layout styling
• each stat will be a list item formatted similar to identity objects, using p and span

Naming Decisions

• identify what needs a classname, for styling purposes

Class	Description
pc	the Profile Card
pc-Wrapper	the Presentation Wrapper
pc-Avatar	background and photo
pc-Identity	name and title
pc-Stats	statistics list

Thoughts

• the Presentation Wrapper is only concerned with the positioning of its children, not their visual appearance, so the contained items should be agnostic with regard to their presentation; they might be placed anywhere. As a result, they should not be setting their margins; hence, the need for the flex-gap utility class
• the Card component is opinionated as to the layout of its children, it creates a context that the children participate in so they are allowed to establish their own spacing rules i.e. the component acts as container, not simply as a presentation wrapper.
• set the CSS Variables in the pc class itself rather than the root element in an effort to keep it as self-contained as possible (the flex-gap util does mean the pc-Wrapper is not fully self-sufficient)