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

Huddle landing curved made with reactjs using styled-components

#bem#styled-components#react
P
AKβ€’ 6,700

@skyv26

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

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-Dicksonβ€’ 5,610

@Kamasah-Dickson

Posted

Hi Please can u explain why You used EM units for media queries?

Marked as helpful

1

P
AKβ€’ 6,700

@skyv26

Posted

@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-Dicksonβ€’ 5,610

@Kamasah-Dickson

Posted

@skyv26 Oh okay I thought there was a reason why you used rem for media query.

Marked as helpful

1
P
David Turnerβ€’ 4,110

@brodiewebdt

Posted

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 helpful

1

P
AKβ€’ 6,700

@skyv26

Posted

@brodiewebdt i found your accounts thanks for telling.

1
P
David Turnerβ€’ 4,110

@brodiewebdt

Posted

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 helpful

1

P
AKβ€’ 6,700

@skyv26

Posted

@brodiewebdt are you on any social network ? I read your bio, you are kind hearted person. I also like to help people.

0
Udonwaβ€’ 90

@udonwa10

Posted

How did your footer background image fit so perfectly ? mine gives me issues anytime I try to increase the height

Marked as helpful

1

P
AKβ€’ 6,700

@skyv26

Posted

@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-Dicksonβ€’ 5,610

@Kamasah-Dickson

Posted

Your website is responsive but I think the font sizes should be big enough at large screens for us to see clearly.

Marked as helpful

1

P
AKβ€’ 6,700

@skyv26

Posted

@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-Dicksonβ€’ 5,610

@Kamasah-Dickson

Posted

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

1
Udonwaβ€’ 90

@udonwa10

Posted

please how did you do your background footer

Marked as helpful

1

P
AKβ€’ 6,700

@skyv26

Posted

@udonwa10 Hi, i didn't get you, you mean color or Curves ?

1
Udonwaβ€’ 90

@udonwa10

Posted

And please can we see I see your code😁

Marked as helpful

0

P
David Turnerβ€’ 4,110

@brodiewebdt

Posted

@udonwa10 You can download it off of Github from the link at the top of the screen.

Marked as helpful

0
P
AKβ€’ 6,700

@skyv26

Posted

@brodiewebdt I need your feedback.

0

P
David Turnerβ€’ 4,110

@brodiewebdt

Posted

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

1
P
AKβ€’ 6,700

@skyv26

Posted

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