L'agence Yellow fait appel à votre équipe de création et développement web. Le département créa' a définit les besoins avec le client et une maquette de la page d'accueil a été produite. Votre rôle aujourd'hui en tant que lead intégrateur, est de configurer et mettre en place le projet d'intégration. Vous devrez choisir vos propres outils d'intégration (framework) tout en respectant les recommandations du lead développeur. Le projet devra être intégré au plus prêt de la maquette fournie mais aussi devra adopter une arborscence de fichiers structurée et rangée par type et rôle de fichiers, le département dev-back ne devra pas faire ce travail à votre place !
1- Téléchargez/Clonez le projet et ses ressources.
2- Structurez votre projet, créez les fichiers et regroupez les dans leurs dossiers adéquats. Le seul fichier à la racine du projet doit être index.html !
3- Utilisez un framework d'intégration de type Bootstrap, Materialize ou autre (au choix). Vous utiliserez les fichiers sources Sass/Scss du framework choisi. N'utilisez pas le CDN !
4- Examinez la maquette fournie gabarit.png, repérez les différentes sections et élements de la page (boutons, cards, slider, compteur, etc.), les intéractions utilisateurs induites et récupérez les codes hexadécimaux des couleurs primaires et secondaires. Ce seront vos première variables !
5- Intégrez la page d'accueil dans un fichier index.html créé, vous devrez respecter au maximum la maquette fournie. N'oubliez pas de rendre le tout responsive !
- Vous devez paramétrer votre projet afin de compiler automatiquement vos fichiers Scss sous le nom styles.css dans le dossier css.
- Votre projet doit être bien struturé, vos fichiers bien rangés dans les bons dossiers, soignez votre arborescence !
- Votre code doit être bien structuré et lisible, donc soignez votre indentation, et utilisez des fichiers partiels
- Vous respecterez la méthodologie du framework choisi (BEM, OOCSS ou autre), cela se reflètera dans la création de votre DOM et de vos définitions de styles.
Vous avez la possibilité d'utiliser 2 fonts que vous pouvez retrouver sur Google Fonts :
Vous devez utiliser la police d'icônes FontAwesome.
Toutes les images dont vous avez besoin se trouvent dans le dossier images