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:
Thanks in advance! Aaron
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)! 😁
@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. 😉
@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.
@astroud
Okay, sounds good! 👍
Yeah, I just learned about styled-components, too, and I think they're pretty awesome! 😀
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
@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. 🧐
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?
@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. 🙂
@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^^
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.
Give some feedback to astroud about their solution
Join over 45,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!
P