- Analyse the wireframe : cut out the model desktop and mobile (body, margins, elements, content...) with Adobe Xd
- Retrieve the content : graphic identity (colors, fonts, icons), download medias
- Analyse elements in detail : analyse differences between mobile and desktop wireframe
- Client does'nt need to administrate the website : don't need CMS
- The client only wants a simple showcase site
- I choose to code with simple HTML / CSS using the text editor Visual Studio Code and Prepros as a local server.
Later i'll install PostCSS to use plugins and automatize my tasks : minimize css code, prettify html, check the accessibility, optimize medias...
- Create a repository in GitHub to share the project with client
- Optimize medias with Photoshop
- Think about the structure to build a correct HTML file. Check the code with W3C Markup HTML Validator
- Create the style file after finishing the HTML. Start building in responsive mode (mobile-first). Adapt the few responsive rules fast. Check the code with W3C Markup CSS Validator
- Check the code with the Green-IT plugin in web browser.
- Check all HTML code with Accede Web rules
- Optimize the CSS file with Autoprefixer and minify with Prepros