- Getting designs from Avocode
- Get images and compress them (https://tinyjpg.com/). Use svg for logos and icons if possible.
- Check if icons have to be added (example using https://material.io/resources/icons/?style=baseline and download as svg)
- Centralize all style guide (fonts, global padding) in Sass
- Think about the semantics (markup of the page)
- Think about organization Sass
- Do the web design (global structure and each section with styles)
- Add a temporal background-color for the sections to check if the margin between them are correct in each breakpoint
- Do the design mobile first
- Use Chrome extensions Grid Ruler and Measure-it (to compare with Avocode)
- Test accessibility: Run WAVE Evaluation Tool (https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US) to check if accesibility is ok
- Test in every browser (Chrome, Firefox, Safari and IE11) and in mobiles (with Toggle Device toolbar in Chrome, Simulator xcode for iphone and then test real devices)
- Test in server:
- Test with Lighthouse and Web Developer Checklist
- Test performance: https://github.com/thedaviddias/Front-End-Performance-Checklist (example with https://www.webpagetest.org)