Design comparison
Solution retrospective
I know it should not to be toggle, but just for fun added little reactJS 😅. How is it guys?
Community feedback
- @FluffyKasPosted almost 3 years ago
Hiya,
There's no problem with using React if you'd like to get comfortable with the environment. However. I'd suggest you to get comfortable with vanilla things first. There are some core concepts missing here: responsiveness, semantic markup etc. Using React and Bootstrap will unfortunately not allow you to skip learning these.
At any rate, I try to provide some points where you could do some research:
-
Using relative units: if you don't know what they are, I highly recommend looking them up. In general you shouldn't use pixels, unless you set a border or box-shadow or something similarly small. There are accessibility problems with px which you'll understand if you look up this topic a bit!
-
Setting height: in 95% of cases you should avoid this. There's no need for it, all elements have their own height, increase them by adding padding if needed. There are some exceptions to this of course but as a general rule, it's good to keep this in mind.
-
I don't see Bootstrap at all in your solution. Not in the dependencies, not in classes? I may be missing something, but if you don't use it, don't tag it and add it in the title, it's a bit misleading.
-
Same goes for react-router tag. There's no router in this challenge.
-
Alt texts: read this article, this is helpful to know about when writing alts.
-
Useful video for beginners about semantic HTML. I throw in another one about the correct use of headings ^^
-
Missing CSS reset: you'd want to start your styling with this. Look up what a CSS reset is, it's going to be super useful.
-
Lacking responsiveness: check out Kevin Powell's channel, you can learn a lot about this topic from him.
Once responsiveness is fixed, I can go in depth with smaller problems you have with this solution but first, making it work on all screens should be priority ^^ Or even better, perhaps going back to some smaller challenges and practice there a bit. This one's really tough. I'm personally happy I did some newbie and junior challenges first, before I attempted this.
0 -
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