@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:
- Look at the design and plan out common styles.
- Build out the HTML so that the foundations of the page are there.
- Add general styles for things like typography and colours.
- Start with a mobile layout and build the styles using the mobile design as a reference.
- Add
min-width
media queries to progressively re-flow the layout for larger screens. - 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 👍