Challenge 1 : Page avec une disposition en deux colonnes
Prérequis :
Vous avez besoin d'une compréhension de base du HTML, du CSS.
Contexte :
Votre tâche consiste à construire le projet sur les conceptions à l'intérieur du dossier / design. Vous trouverez à la fois une version mobile et une version de bureau de la conception sur laquelle travailler.
Les dessins sont au format statique JPG. Cela signifie que vous devrez utiliser votre meilleur jugement pour des styles tels que "font-size", "padding" et "margin". Cela devrait aider à former votre œil à percevoir les différences d'espacement et de taille.
Vous trouverez tous les actifs requis dans le dossier / images. Les actifs 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.
Déroulement de projet
Vous devez construire ce projet en équipe. C'est un excellent moyen de pratiquer le codage collaboratif.
- Initialisez votre projet en tant que référentiel public sur [GitHub] (https://github.com/).
- Configurez votre référentiel pour publier votre code sur les pages GitHub.
- Parcourez les conceptions pour commencer à planifier comment 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 HTML. La première écriture de votre code HTML peut vous aider à concentrer votre attention sur la création de contenu bien structuré.
- Écrivez les styles de base de votre projet, y compris les styles de contenu généraux, tels que «font-family» et «font-size».
- Commencez à ajouter des styles en haut de la page et descendez. Passez à la section suivante uniquement lorsque vous êtes satisfait d'avoir terminé la zone sur laquelle vous travaillez.
- Publier votre sollution sur un serveur gratuit comme Netlify ou Github.
Modalité de travail
- Travail en groupe
- Une journée
Livrables / Critères d'évaluation
- Désigné de la page est conforme à celui de la maquette ;
- Respect des conventions de nommage ;
- Code bien organiser et commenté ;
- Chaque membre de l’équipe doit coder une partie.
- Merger les pages dans github.
- Explication claire et concise du code élaboré.