date: 2023-09-01
Type: Cours
Projet: Blindcode
Cours: CSSCSS : Présentation du projet final
Pour conclure ce cours de CSS, je vous propose de participer, en groupe, à la création d'un projet. Fort de toutes les notions que vous avez vu, vous allez donc tenter un projet front-end entier. Ce projet est la finalité du cours d'introduction au CSS, HTML et Accessibilité. N'hésitez pas à vous référer à ces différents cours en permanence ainsi qu'à la documentation que vous pourrez trouver sur internet pour réussir au mieux ce que vous voulez atteindre.
Pour toutes ces missions, ne vous contentez pas du strict minimum, je veux y croire. Ce que je donne comme mission est ce que je dois retrouver sur le site, mais vous devez rendre votre site vivant, correct, accessible et complet. Structure, Header, navbar, footer, formulaire de contact,... Il faut que ça soit logique ! Important : N'utilisez pas d'outils autre que HTML et CSS. Pas de CSS, pas de Bootstrap, rien. je veux du pur front à l'ancienne ! Nous n'avons pas encore vu de JS et de back-end, donc je ne m'attends pas à ce que votre site marche réellement, je ne m'attarde qu'au visuel. Si vous faites une section commentaires, je veux que ça soit beau, mais je suis tout à fait au courant que je ne pourrai pas écrire réellement un commentaire ! Une simple textearea avec un bouton "envoyer" qui ne fait rien me suffira, si le tout est stylisé !
Votre mission est de créer une galerie d'image de différents animaux adoptable pour l'ASBL "Sauvez Nos Minous". Sur votre page d'accueil, une galerie d'image au style que vous déciderez devra apparaître avec, pour chaque photo, le nom de l'animal et son âge précisé directement en rapport avec la photo. Lorsque l'on clique sur l'image, le site nous mène sur une page descriptive plus précise de l'animal, avec sa ou ses photos si vous en avez plusieurs de lui. Ajoutez aussi à votre site une page de formulaire pour que l'utilisateur puisse faire une demande d'adoption ! Donnez-nous envie d'adopter un animal, et d'aller chez vous plutôt que chez everycat !
Votre mission sera de développer le nouveau site concurrent de Marmiton, un site de recette délicieuse ! Profitez de votre page d'accueil pour montrer les recettes disponibles sur le site, leurs difficultés (avec des images d'étoiles ET accessible, genre "4/5 en terme de difficulté"). Bien sur, lorsque l'on clique sur une image, cela nous mène à la recette et son descriptif, les ingrédients qu'il faut, le déroulé de la recette, le temps de préparation,... En plus de ça, créez un formulaire qui permettrait de soumettre une nouvelle recette sur une page à part ! Triez les recettes en fonctions des catégorie dans la Navbar,... Donnez-nous faim !
Youtube c'est fini, vive MyTube ! Votre mission sera simple, créer un site avec une page d'accueil avec des miniatures de vidéos, le titre et la durée de celles-ci. Lorsque je clique dessus, j'arrive sur la page de la vidéo avec une description, un titre, une section commentaire, la possibilité de laisser des pouces,... (Pour les vidéos, prenez-les sur Youtube... On dira que c'est un partenariat ! héhé)
Nil est LE nouveau site de vente en ligne. Amazon n'a qu'a bien se tenir ! Sur votre page d'accueil j'attend des catégories, et des articles ! Lorsque je clique sur une catégorie, j'arrive sur une liste des articles qu'il y a sur les catégories, par contre, et si je clique sur un article, j'ai une photo de celui-ci, une petite description, une note des utilisateurs, des commentaires possibles, et un bouton pour ajouter à mon panier ! Créez aussi une page de formulaire pour le service après vente !
Pour créer votre groupe, vous devez d'abord chacun choisir un sujet. Vous ne choisissez pas votre groupe, mais votre sujet. Vous devez être minimum 2 et maximum 3 par sujet. Si vous êtes tout seul sur un sujet, changez ! Si vous être 4 sur le même, un ou deux d'entre vous changent ! Bref communiquez moi le sujet que vous choisissez et on discute du reste. Dans la vie, on choisit plus souvent son domaine de travail que ses collègues, donc avant de choisir avec qui vous travaillerez, assurez vous d'abord de travailler sur un sujet qui vous plaît.
créé le 2023-09-01 à 11:21