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

Coding Bootcamp Testimonials Slider using HTML-CSS-JS

gusfoca 170

@gusfoca

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


Coding in HTML/CSS is still much like guess work. Any detailed references on how to go from sketch/wireframe to code? Besides a (very) general idea on how the page pieces should stick together and starting with sizes, overall blocks/line placement and page flow, everything is just trial and error.

Community feedback

T
Matt Studdert 13,611

@mattstuddert

Posted

Nice work on this challenge! Learning to take a design and replicate it with code is the cornerstone of a front-end developer's role. Getting good at it will come with practice.

Here's a basic rundown of my usual workflow:

  1. Look at the design and plan out common styles.
  2. Build out the HTML so that the foundations of the page are there.
  3. Add general styles for things like typography and colours.
  4. Start with a mobile layout and build the styles using the mobile design as a reference.
  5. Add min-width media queries to progressively re-flow the layout for larger screens.
  6. Keep refining until everything works and looks as expected.

If you're working in a professional environment you'll be using the original design file in something like Sketch or Figma. There are also tools like Zeplin and Avocode that help with the designer > developer handover process.

I'd recommend watching some developers like Florin Pop and Jessica Chan take on our challenges to see how professional developers work with a design.

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

1

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