<CodePhenix>

CSS initiation

Demo CSS

HTML : Les formulaires

CSS : Le positionnement des éléments

Fiche mémo

Voici une fiche mémo sur le display flex; vous pouvez l'enregistrer sur votre ordinateur. Utilisez ce mémo pour vous aider à faire les exercices suivants.

CSS : Le responsive design

Connaissances

Pour aller plus loin vous pouvez vous renseigner avec les articles suivant :

CSS : Les animations

Validation des connaissances : HTML/CSS

JavaScript initiation : Première partie

JavaScript initiation : Deuxième partie

Exercices

JavaScript : Vérification d'un formulaire

Outils

Pour vous aider avec les expressions regulières (ReGex) vous pouvez utiliser l'outil ci-dessous :

JavaScript : Gestion du temps

Validation des connaissances : JavaScipt

Exercices

Réaliser un carousel, en prenant en compte les précisions suivantes :

• Les slides sont des objets en JS et non en HTML.
• Chaque slide comporte une image, un texte descriptif de l'image et un lien.
• Au click sur le bouton précédent, ou suivant, on affiche le slide qui correspond.
• Un point est créé pour chaque slide, au click sur celui-ci on affiche le slide qui correspond.
• Quand on affiche un slide suivant, le slide part vers la gauche et le nouveau slide arrive de la droite. Lorsqu'on affiche un slide précédent, le slide part vers la droite et le nouveau slide arrive de la gauche.

Quiz

Git : introduction

Exercices

1. Trouvez la commande

   Depuis votre terminal, entrez la commande : telnet 192.168.67.8 23
   Le terminal va alors vous demander un login et un password qui sont respectivement :

   • login: intro
   • password: formation

   L'objectif est d'atteindre le dernier niveau.

   Attention, pour passer du niveau 1 au niveau 2, il faut entrer su level2 et non su level1 comme indiqué

2. Création d'un projet

   Dans votre dossier « Documents », créez un dossier « git » avec un sous-dossier « projet-git ». Créez à l'intérieur de celui-ci les fichiers « index.html » et « style.css ».

Git : initiation

Exercices

1. Reproduisez le site, en mobile first, selon les maquettes. Vous devrez créer 2 commits :

   • Une fois la version mobile finalisée.
   • Une fois le responsive pour les différentes tailles d'écrans finalisé.
   Télécharger l'exercice

2. Apportez la modification suivante et faites un nouveau commit.

   Voir la modification

3. Maintenant que la modification est apportée, nous souhaitons revenir sur la version précédente (la version "maquette-ordinateur"). Pour cela aidez-vous de git reset pour revenir sur votre 2ème commit.

Git : travail en groupe

Exercices

Ces exercices sont réalisable en groupe de deux.

1. Mise en place du projet

   • Un des deux membre du groupe va récupérer le fichier ci-dessous et le mettre sur gitLab.
   • Le deuxième membre du groupe va récupérer le projet depuis gitLab.
   • Les deux membres du groupe vont chacun créer une branche pour pouvoir travailler chacun de leur côté.
   Télécharger l'exercice

2. Répartition des tâches

   • Un des deux membre du groupe va s'occuper de mettre en place le js pour ajouter un produit au panier :

     • Au survol d'un produit on va afficher la possibilité d'ajouter le produit au panier.
     • Au click sur ce bouton on va afficher un message pour avertir que le produit est ajouté au panier.
     • À côté du panier on va indiquer le nombre de produit qui sont dedans.
     Voir l'exemple

   • Le deuxième membre du groupe va s'occuper de mettre en place le js pour le menu accordéon de la navigation :

     • Les catégories "jeans" et "shoes" peuvent être déployés ou non.
     • Il faudra aussi ajouter un élément graphique pour indiquer l'état de cette catégorie et la sous-catégorie qui est sélectionné.
     • Des animations devront être mise en place pour que le changement soit fluide.
     Voir l'exemple
   • Les deux membres du groupe vont ajouter leur modification au projet sur le remote.

3. Gestion des conflits

   • Un des deux membre du groupe va changer la couleur rouge avec la couleur : teal.
   • Le deuxième membre du groupe va changer la couleur rouge avec la couleur : slateblue.
   • Les deux membres du groupe vont ajouter leur modification au projet sur le remote.

Félicitation !

Vous avez fini le programme, vous avez désormais toutes les notions de bases en HTML/CSS et JavaScript. Il est conseillé de mettre toutes ces compétences en pratique dans votre portfolio.

Un portfolio est indispensable pour toute personne travaillant dans le milieu du web. C'est un support d'embauche et de communication plus important que le CV. Il permet de montrer vos meilleurs projets et vos compétences. Il permet également d'y intégrer votre CV.

Nos conseils :

• Pensez le en mobile first.
• Faites un formulaire de contact avec une verification en javaScript.
• À la validation du formulaire de contact faites apparaître un message de confirmation.
• Faites des transition et des animations sur vos éléments.
• Utilisez des fonctionnalités comme un carroussel, une fenêtre modal, menu à onglet, etc.
• Utilisez Git pour la gestion de votre Portfolio afin de pouvoir faire des points de sauvegardes.