Le mini projet permet d'améliorer vos compétences dans un environnement de travail réel.
Votre tâche consiste à construire le projet à partir des dessins et modèles contenus dans le dossier "/design". Vous y trouverez une version mobile et une version de bureau du modèle sur lequel vous pourrez travailler.
Les dessins sont au format statique JPG. Cela signifie que vous devrez faire preuve de discernement pour les styles tels que "font-size", "padding" et "margin". Cela devrait vous aider à entraîner votre œil à percevoir les différences d'espacement et de taille.
Vous trouverez tous les éléments nécessaires dans le dossier /images. Les éléments sont déjà optimisés.
Il existe également un fichier style-guide.md, qui contient les informations dont vous aurez besoin, telles que la palette de couleurs et les polices.
- Initialisez votre projet en tant que dépôt public sur [GitHub] (https://github.com/).
- Configurez votre dépôt pour publier votre code sur [GitHub Pages] (https://pages.github.com).
- Examinez les modèles pour commencer à planifier la manière dont vous allez aborder le projet. Cette étape est cruciale pour vous aider à anticiper les classes CSS que vous pourriez créer pour créer des styles réutilisables.
- Avant d'ajouter des styles, structurez votre contenu avec du HTML. Le fait d'écrire d'abord votre HTML peut vous aider à concentrer votre attention sur la création d'un contenu bien structuré.
- Rédigez les styles de base pour votre projet, y compris les styles de contenu général, tels que "font-family" et "font-size".
- Commencez à ajouter des styles en haut de la page et descendez. Ne passez à la section suivante que lorsque vous êtes satisfait d'avoir terminé la section sur laquelle vous travaillez.
- Publier votre sollution sur un serveur gratuit comme Netlify ou Github.
- Travail individuel
- Une journée
- Designe de la page est conforme à celui de la maquette;
- Respect des conventions de nommage;
- Code bien organisé et commenté;
- Explication claire et concise du code élaboré.