Design comparison
Solution retrospective
Hello there! This is my first React challenge, and that's why I picked an easy page. Anyway, it was quite tough to wrap my head around all these components and file structuring in React at first, but I hope I did it the right way. π
If anyone has any suggestions on how I could improve this project, let me know! I'm open to any feedback π
In particular, I'd love to know if I should avoid using so many media queries with React as I'm doing it now.
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hi there, Bonrey! π
Well done on this challenge! π And kudos for trying out React! π File structuring was something I was rather confused about, too, when I first tried out React, but I think it becomes easier to understand with practice, of course! π
The text in your solution becomes very, very small when the screen width decreases in the desktop layout. I suggest setting your font-sizes in
em
orrem
so that the size of the text remains more consistent across screen sizes and is more accessible and predictable than setting font-sizes in viewport units.Also, if an invalid email is entered into the input and submitted, the value of the input element changes to "[email protected]." I think it would be better if the value of the input remains the same as what the user typed so that they don't get confused and have to delete the replaced text. π
Keep coding (and happy coding, too)! π
1@BonreyPosted over 3 years ago@ApplePieGiraffe thank you! I'll take into account your suggestions! Especially about the font-size.
As for the "[email protected]", I just followed the design patterns for this challenge. But I agree that it doesn't look good. Sometimes it's indeed better to come up with some features yourself than copy the default pattern π
1@ApplePieGiraffePosted over 3 years ago@Bonrey
No problem! Glad to help! π
If you look closely at the design JGPs for this challenge, you'll notice that the value of the input element is actually "janeappleseed#gmail.com"βmeaning it's only an example of what an invalid email might be and of what the invalid state of the input element should look like. You don't actually have to change the value of the input element to something else for this challenge! π
1 - @docuong0912Posted over 3 years ago
Hi, I just want to know how did you learn React, i'm struggling with it :))
I was looking for demo react project and luckily,i found yours. Keep doing more React project, i'm waiting more from you <3
1@BonreyPosted over 3 years ago@docuong0912 well, I just followed some tutorials, looked at other people's React projects, and tried to apply this knowledge in this project. You can check the README.md file for this challenge, where I've written more about used technologies and also provided some links π
And thank you for your kind words! π
1
Please log in to post a comment
Log in with GitHubJoin 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