All solutions

what would be the most effective way to load images on next slide?

currently, when you are running for the first time, animation doesn't go so smoothly

update: I just used Link tag with rel="preload" to preload hero images

First of all I wanted to appreciate how well the starter files for this project have been prepared. Responsive images, icons and especially big products.json file containing products data with paths to all images. It must have taken a lot of work, so for that big thanks to FM team (not sure who prepared that, would that be Matt or Em)

And this was such a great challenge. It's like everything I learned during these 5 months since I joined FM combined into this one big project: modals, custom radios, routing, form validation (checkout form was huge!) and especially creating reusable components. I also tried some completely new things for me like animations, inspired by Tediko and his awesome landing pages I added some on scroll animations on the home page.

As far as accesibility, new thing for me was 'Skip to content' link and aria-disabled attribute on button instead of 'disabled' for more inclusive disabled form button when cart is empty. For the full list of techniques and tools I used you can check out README.

One thing I couldn't figure out. In Firefox hero section is included in tabbing order for some reason. I don't see this issue in Chrome. Is that some kind of Firefox bug I'm not aware of, or something wrong with my code?

If you see anything wrong or that needs to be improved, please drop a comment

Making accessible UI components like custom select is difficult, we all know that. Fortunately there are tools like Downshift, so we don't have to re-invent the wheel. So for this challenge I build custom dropdown to match design and hooked into Downshift to make it fully accessible.

Works really great, you can test it out with keyboard or even screen reader!

As an extra:

• I implemented saving theme preference to local storage, so it stays after page reload.
• I added pagination, because 250 results seemed a little too much

Question: Is wrapping whole card in a link is good practice?

This was tough, definitely not junior, more like intermediate to advanced

I build it with react, styled components and utilised for the first time atomic design system https://atomicdesign.bradfrost.com/chapter-2/

State management done using Context API, you should see updated state after making a pledge

Update: Modal is accesible, I implemented focus trap, also you can close modal using ESC key or clicking outside of modal. I think it should also be screen-reader friendly.

My first landing page, if you'd like to check and suggest improvements, that would be cool

I feel like it would take a lot less time to validate the form in plain vanilla js, but getting to know react-hook-form definitely will be useful in future larger projects

Question: what's the best way to announce validation errors to screen readers? My implementation doesn't work.

To make it more like a real life scenario I'm fetching jobs from server. For that I created my own API with Vercel serverless functions. Hope it works, because I had some problems with CORS. I paid a lot of attention to details, but let me know if you think something could be improved

I'm not sure about html semantics. I made single testimonial a div. Should it be an article?

• apart from react, for this project I also used SASS with newer syntax "@use" instead of deprecated "@import"
• I decided that height of map will be calculated dynamically, which wasn't so easy as it turned out
• to display data I used description list
• I used Context API and react hooks
• how would you rate my project architecture, choice of components etc.?

I struggled a lot with positioning and responsivness, but I think it turned out fine. If you think something could be improved or have any other suggestions, please let me know

Man, those newbie challenges are harder than I thought. I'm wondering if there is "cleaner" way to position those images. Also when question is expanded the picture of woman and the box are not aligning. Any ideas how to improve this? Any general suggestions how to improve overall project would also be welcomed :) Thanks