Submitted

Profile Card React Component

Aaron Stroudβ€’ 435

@astroud

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

Aaron Stroud’s questions for the community

I am revising my earlier html/css challenges using React and Styled Components.

Even if you're not familiar with React, you can make sense of the CSS here because Styled Components uses regular CSS code.

I am interested in any and all feedback. Specifically:

  • How's my component code look? (JSX, PropTypes, naming, etc)
  • Do I need to improve my CSS rules? I've used REM everywhere except the media query and when vw worked better.
  • What's your impression of my readme? Too long? Not detailed enough? I'd like it to be useful for FEM members thinking about moving from html/css to React.

Thanks in advance! Aaron

Community Feedback

P
ApplePieGiraffeβ€’ 27,345

@ApplePieGiraffe

Posted

Hey, Aaron Stroud! πŸ‘‹

Good to see you complete another challenge! πŸ˜€

I'm no React expert but your code seems pretty good, I think (you're putting props and prop types to good use, so that's nice). πŸ‘

I think your README is fine, as well, and contains a nice little introduction to styled-components. πŸ™‚

Overall, nice work! πŸ‘

Keep coding (and happy coding, too)! 😁

1


P
ApplePieGiraffeβ€’ 27,345

@ApplePieGiraffe

Posted

@ApplePieGiraffe

Oh yeah, and I forgot to mention, you might want to check the position of the background images in the mobile layout since they don't change their position since the desktop layout and don't seem to be visible on smaller screens. πŸ˜‰

1

Aaron Stroudβ€’ 435

@astroud

Posted

@ApplePieGiraffe

Thanks for pointing out the background on mobile screens. It's fixed now. This is actually a refactor of an older challenge. I'm going to refactor my older straight html/css submissions using React.

I really am loving Styled Components. To me (with my limited experience), they feel like the best way of integrating CSS.

1

P
ApplePieGiraffeβ€’ 27,345

@ApplePieGiraffe

Posted

@astroud

Okay, sounds good! πŸ‘

Yeah, I just learned about styled-components, too, and I think they're pretty awesome! πŸ˜€

1

Aaron Stroudβ€’ 435

@astroud

Posted

Hey @ApplePieGiraffe , please reply to this comment. I'm trying to help Matthew track down a bug where the email notification for a new comment sometimes results in a broken link like this: https://www.frontendmentor.io/solutions/undefined#feedback

1

P
ApplePieGiraffeβ€’ 27,345

@ApplePieGiraffe

Posted

@astroud

Oh, yeah, I've come across that bug on several occasions. I'm not certain, but I think it (or a similar bug) might occur when someone submits a new comment and an email notification is sent and they delete (or perhaps edit) their comment soon afterward. That's just a guess, though. 🧐

0

P
Raymart Pamplonaβ€’ 16,140

@pikapikamart

Posted

Your's look awesome and btw, you dont need to specify the min-width if you're using clamp. The first argument is the minimum size of what you are clamp-ing with^ Also just a question, is yarn like gulp? Havent use yarn but im using gulp, is yarn like a preprocessor?

1


P
ApplePieGiraffeβ€’ 27,345

@ApplePieGiraffe

Posted

@pikamart

Yarn is a little more like NPM. It's a package manager, which allows you to add and keep track of packages in your project. I like Yarn because I think it's a little faster than NPM, but everyone has their preferences. πŸ™‚

1

P
Raymart Pamplonaβ€’ 16,140

@pikapikamart

Posted

@ApplePieGiraffe oh I see, i'm using npm btw since it was my first to try with but i'll check out yarn as time progresses. Thank you for that^^

0

Aaron Stroudβ€’ 435

@astroud

Posted

Thanks @pikamart !

I had a comment in my components' css explaining that min-width. (I believe the build process strips the comment out.) Chrome wasn't respecting the minimum width set in clamp but it respected the minimum when I defined it separately.

I fooled with it again today and discovered that the responsive profile photos now keep Chrome from breaking the layout on super narrow screens, so I took out the "extra" min-width.

0

Give some feedback to @astroud about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!