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 React Component

@astroud

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


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

@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 30,545

@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

@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

@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
P
ApplePieGiraffe 30,545

@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 30,545

@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

@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 30,545

@ApplePieGiraffe

Posted

@astroud

Okay, sounds good! 👍

Yeah, I just learned about styled-components, too, and I think they're pretty awesome! 😀

1

@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 30,545

@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

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