Huddle landing curved made with reactjs using styled-components
Design comparison
Solution retrospective
I used styled components and it was really different experience using styled-components because in all my previous work. I used normal CSS and modular CSS for my challenges with React. I really find this challenge a lit bit difficult because I did not made it with a complete idea but later at the end of this challenge. I found so many things that I will keep in mind and implement all that stuff from now on.
Any Feedback will be appreciated and I love suggestions, ideas.
Community feedback
- @Kamasah-DicksonPosted almost 3 years ago
Hi Please can u explain why You used EM units for media queries?
Marked as helpful1@skyv26Posted almost 3 years ago@Kamasah-Dickson Hi! In media queries, rem and em both work same. So that's why I used em.without media query both are then work different i mean 1em=2rem and 1rem=16px
0@Kamasah-DicksonPosted almost 3 years ago@skyv26 Oh okay I thought there was a reason why you used rem for media query.
Marked as helpful1 - @brodiewebdtPosted almost 3 years ago
I setup a Twitter site to post my Scrimba Javascriptmas challenges, but I don't use Social Networks. This and Scrimba's Discord are about as social as I get. 😀
Marked as helpful1@skyv26Posted almost 3 years ago@brodiewebdt i found your accounts thanks for telling.
1 - @brodiewebdtPosted almost 3 years ago
Ok. No problem. I have looked at React sites, and all the code looks different than regular HTML.
Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/
Marked as helpful1@skyv26Posted almost 3 years ago@brodiewebdt are you on any social network ? I read your bio, you are kind hearted person. I also like to help people.
0 - @udonwa10Posted almost 3 years ago
How did your footer background image fit so perfectly ? mine gives me issues anytime I try to increase the height
Marked as helpful1@skyv26Posted almost 3 years ago@udonwa10 Because i did not used image as background. Instead I used as image and add just before footer and one more thing is mobile and desktop images are different and I also use them separately according to device width.
0 - @Kamasah-DicksonPosted almost 3 years ago
Your website is responsive but I think the font sizes should be big enough at large screens for us to see clearly.
Marked as helpful1@skyv26Posted almost 3 years ago@Kamasah-Dickson hi! Nice to hear from you, on which screen did you check ? Please let me know, so I willl make update
0@Kamasah-DicksonPosted almost 3 years ago@skyv26 I mean when I switch to 768px and above your font sizes do not change. It is supposed to at least change for better readability.
Marked as helpful1 - @udonwa10Posted almost 3 years ago
please how did you do your background footer
Marked as helpful1@skyv26Posted almost 3 years ago@udonwa10 Hi, i didn't get you, you mean color or Curves ?
1 - @udonwa10Posted almost 3 years ago
And please can we see I see your code😁
Marked as helpful0@brodiewebdtPosted almost 3 years ago@udonwa10 You can download it off of Github from the link at the top of the screen.
Marked as helpful0 - @skyv26Posted almost 3 years ago
@brodiewebdt I need your feedback.
0@brodiewebdtPosted almost 3 years ago@skyv26 I know nothing about React, which is why I haven't given feedback on those projects. This looks great. The curved sections in the mobile layout can use some more padding. I don't know if React makes any difference in the code, But if you wrap the code in a Main tag it will clear a lot of the accessibility warnings.
Hope this helps.
Marked as helpful1@skyv26Posted almost 3 years ago@brodiewebdt you know David, your feedback matters alot for me. You don't know about react it is ok, but atleast you figured out some issue for me. It does matters and please share me that devtools link .
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