Submitted about 3 years ago

crowdfunding-product-page-main

Glen• 515

@GlenOttley

Preview site View code

This is a solution for...

Crowdfunding product page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Wow this one was really challenging, having completed a couple of intermediate challenges on here I would say that this 'junior' challenge was even more difficult than those, it should definitely be moved up a tier IMHO! To tell the truth I got a bit frustrated and decided to leave this one without completing the desktop design, so not everything is complete.

Questions for those using React, how do you go about styling your apps? I have always used CSS stylesheets but ran into some serious problems here with the layout once I started to add media queries for the desktop design. Is there some sort of ternary statement which could be used as a substitute for media queries which would allow me to write my styles inside my React components? (or a better way to write styles?).

Cheers, Glen

Community feedback

tediko• 6,580

@tediko

Posted about 3 years ago

Hello, Glen! 👋

Good effort on this challenge! Your solution responds well. Since Im not familiar with React i can't help with that but here's my few suggestions:

I know that project is created for 1440px width but I think it is good practice to think beyond that. Your .header__img--desktop image isn't stretching full width so it looks bad on my desktop (1920x1080).
Since your .menu__logo image is decorative your alt text can be provided empty (alt="") so that they can be ignored by assistive technologies, such as screen readers.
bookmark__img is supposed to trigger some action, I would add <button> element for this instead using your javascript on image element.
thanks-modal (atleast on firefox) have scrollX and Y bar. I think it would be nicer if it doesn't appear with this modal.

Good luck with that, have fun coding! 💪

Glen• 515

@GlenOttley

Posted almost 3 years ago

@tediko Thanks for your feedback, the header image was a big oversight on my part, will sort that out now. Also good tip about leaving a black alt value, I had not considered that.

I cannot see an x or y scroll bar on the thanks-modal using firefox. I am using firefox developer edition however so this might be hiding it.

Cheers, Glen

Anna Leigh• 5,135

@brasspetals

Posted about 3 years ago

Hi, Glen! 👋

Sorry I can't help you with React. However, I'm working on this challenge now and definitely agree this one is harder than the intermediate challenge I've done! I've gotten super frustrated with it too, but I encourage you to go back and properly complete it - don't give up! 💪

(I know you didn't ask, but...) Looking at Bootstrap's long modal demo helped me a TON in figuring out how to get the modal like it is in the design.

Glen• 515

@GlenOttley

Posted almost 3 years ago

@brasspetals thanks for the feedback, its good to know that I'm not the only one who found this difficult! I will check out that modal demo for sure, couldn't figure out for the life of me how to get it to scroll with the rest of the page!

Please log in to post a comment

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