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

It was unexpectly hard to do this. Used webpack + flex + js

Alex• 90

@AxelZelenskiy

Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I didn't understand where to put 'curve.svg'.

Community feedback

P
Matt Studdert• 13,611

@mattstuddert

Posted

Nice work on this challenge, Alex! The curve.svg asset is the curved pattern you can see in the bottom left of the design. Also, just a quick note about your button elements. I'd recommend not duplicating the HTML for them unnecessarily. You could have a single set of buttons and use them to navigate the slides. They could just stay in place while the other content moves.

I hope you enjoyed the challenge. Keep up the great work!

2

Adrian Black• 65

@thisfncodeio

Posted

@mattstuddert Hey Matt! Cool to the founder actively participating. I have a question; when developing a site, component, etc based off of a mock, how important is it to get pixel perfection, or is there wiggle room? I only ask because this design for me almost made me smash my monitor. I drew boxes around the design and it is crazily unbalanced.

Thanks for any advice you have.

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@thisfncodeio no problem! Once you're in a professional setting you'll want to be getting pretty close to the design. It will obviously depend on the designer you're working with but most will be pretty unforgiving! 😅

There often comes a point of diminishing returns where the tiny details aren't worth the time. But you'll want to aim to get 95%+ accurate.

Working as a professional developer you'd have the original design file with all the sizings, spacings, etc though. So you'd have more information to go on.

You can buy the Sketch design files here to practice that but it's not essential if you're just practicing and build up your experience at the moment.

I hope that helps. Let me know if you have any other questions!

1
Mahesh Yadav• 1,220

@Mahesh-yadav

Posted

I have additional feedback about your code.

Your JS script has a typo error: if (!slides.lenght === 0 || (!buttonsPrev.lenght !== 0) || !buttonsNext.lenght !== 0) {}

Your script runs because the condition is always true because !buttonsPrev.lenght !== 0 is always true.

1

Alex• 90

@AxelZelenskiy

Posted

@Mahesh-yadav , thanks and you are right - this condition is wrong. I'll change it to: if ( (slides.lenght !== 0) && (buttonsPrev.lenght !== 0) && (buttonsNext.lenght !== 0) )

0
Mahesh Yadav• 1,220

@Mahesh-yadav

Posted

@AxelZelenskiy you also have typo in lenght. It should be length

0
Tomiwa Orimoloye• 1,000

@tomiwaorimoloye

Posted

Your work is nice. Try to fix the HTML issues.

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