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

My first React JS project

Bonreyβ€’ 1,130

@Bonrey

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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

P
ApplePieGiraffeβ€’ 30,565

@ApplePieGiraffe

Posted

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 or rem 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

Bonreyβ€’ 1,130

@Bonrey

Posted

@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
P
ApplePieGiraffeβ€’ 30,565

@ApplePieGiraffe

Posted

@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
Bonreyβ€’ 1,130

@Bonrey

Posted

@ApplePieGiraffe hahah, got this πŸ˜…

1
Cườngβ€’ 845

@docuong0912

Posted

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

Bonreyβ€’ 1,130

@Bonrey

Posted

@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 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