À vous de jouer
Dans cet exercice, vous vous entraînerez à gerer un projet avec un client dans sa totalité, c'est-à-dire de la rédaction du cahier des charges à la livraison finale.
Commencez par identifier votre client. Qui est-il ? Où est-il ? Que cherche-il ? Ecrivez dans un document quel est son projet et quelles sont ses attentes.
Ensuite, trouvez une maquette qui correspond à ces besoins. Voici quelques sites utiles qui vous aideront à trouver des maquettes (mais vous pouvez utiliser le site de votre choix) :
Creative Market, ThemeForest, Blazrobar, Breebiesbug, UI8.net
Idéalement, vous trouverez un document PSD et vous utiliserez Photoshop ou un logiciel équivalent pour travailler les visuels et en extraire les images. Mais vous êtes libre d'utiliser le logiciel de votre choix pour mesurer la largeur, la hauteur et l'espacement des éléments de votre visuel. À partir de cette maquette, créez une structure de base en HTML et utilisez la grille Bootstrap pour organiser les éléments en colonnes. Notez bien que vous devez utiliser Bootstrap !
Ajoutez du CSS si besoin pour personnaliser l'apparence et aller au-delà de ce que vous permet Bootstrap. Vous pouvez changer les couleurs, les polices (utilisez une police web !), le dimensionnement, et plus encore. Essayez de vous rapprocher le plus possible de la maquette, même si nous comprendrons si la ressemblance n'est pas parfaite.
Vous devez donc partir d'un (ou plusieurs) documents au format PSD pour arriver à une page web finale.
Vous devrez avoir :
des fichiers HTML et CSS,
une copie d'écran de votre page,
un fichier .txt de votre cahier des charges avec un lien vers la maquette originale que vous avez utilisée,
Vérifiez votre travail
Le fichier HTML répond à la norme suivante :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
</body>
</html>La structure du code HTML correspond à celle du thème choisi
Le fichier HTML est bien indenté et ne contient pas d’erreurs de syntaxe
Les règles CSS sont rangées dans une feuille de style à part du fichier HTML.
La feuille de style est liée au fichier HTML par l'intermédiaire d'une balise <link rel="stylesheet" type="text/css" href="lien de la feuille de style"> situé dans le <head></head>.
Une fois intégrée la page Web ressemble raisonnablement à la maquette.
Les colonnes sont placées dans un <div class="row"></div> lui-même placé dans un <div class="container"></div>
Un <div class="row"> </div> ne contient pas plus de 12 colonnes.
