Astuce pour bien réussir : Utilisez la sémantique des balises, sectionnez votre page et utilisez la notion de parent/enfant.
À l'aide du cours, reproduisez le CV selon la maquette ci-dessous :
Voir la maquette Récupérer l'imageAstuce pour bien réussir : Utilisez les bons sélecteurs en prenant en compte l'importance et l'héritage CSS.
À l'aide du cours, mettez en forme le CV de l'exercice précédent, selon la maquette ci-dessous :
Voir la maquetteCet exercice va vous permettre de vous exercer et d'apprendre les différents sélecteurs CSS.
Les niveaux de 1 à 17 puis de 27 à 29 sont important à connaître.
Attention, le nom des balises dans cet exercice ne sont pas de vrai nom de balise.
Commencer l'exerciceÀ partir des maquettes, réalisez un formulaire d'inscription.
Télécharger l'exerciceVoici 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.
Le header sera fixe dans la page, au click sur le menu burger, une fenêtre s'ouvre avec les liens de navigation et le bouton pour fermer cette fenêtre. Selon les maquettes mobile :
Télécharger l'exerciceCet exercice va vous permettre de vous exercer et d'apprendre les différentes propriétés liées au display flex;
Le header sera fixe dans la page, au click sur le menu burger, une fenêtre s'ouvre avec les liens de navigation. Le bouton pour fermer cette fenêtre en sera pas géré pour le moment. Selon les maquettes mobile :
Télécharger l'exerciceÀ partir de l'exercice sur le positionnement du site myFood, Adaptez-le pour les versions tablettes et ordinateur, selon la maquette :
Voir la maquetteÀ partir de l'exercice sur le positionnement du site Analytics, en version mobile, au clic sur le bouton du menu si le menu est ouvert on va le fermer. Adaptez-le pour les versions tablettes et ordinateur, selon la maquette :
Voir la maquettePour aller plus loin vous pouvez vous renseigner avec les articles suivant :
Les bases de l’Ergonomie Statistiques internet 2022En reprennant le site analytics, ajoutez les transitions et animations suivantes :
Comme dans l'exemple :
Voir l'exempleFaire un bouton, au click sur ce bouton, on va augmenter la valeur d'un numéro qui indiquera le nombre de fois que ce bouton a été cliqué. Comme dans l'exemple :
Voir l'exempleÀ l'aide du cours, ajoutez un menu burger à votre CV de l'exercice précédent. Au click sur le bouton, une fenêtre s'ouvre avec les liens de navigation qui redirigent vers les différentes sections de la page et le bouton pour fermer cette fenêtre. Comme dans l'exemple :
Voir l'exempleEn reprenant le site myFood, les "popular tags" doivent être créés à partir d'un tableau en javascript. Au click sur un tag, il est mis en valeur avec un fond noir et un texte plus grand. Comme dans l'exemple :
Voir l'exempleEn reprenant le site myFood, les articles doivent être créés à partir d'objets en javascript. Ils comprennent donc une image, un titre et un texte descriptif. Comme dans l'exemple :
Voir l'exempleEn reprenant le site Analitycs, les éléments de la section "feeds" doivent être créés à partir d'objets en javascript. Comme dans l'exemple :
Voir l'exempleEn reprenant l'exercice du compteur de click, ajouté les conditions suivante :
Comme dans l'exemple :
Voir l'exempleAvec un tableau, construire une liste d'élément donné. Au clic sur un élément de cette liste, retirez-le de la liste et ajoutez-le à un deuxième tableau. Sur ce deuxième tableau faite le même procédé. Comme dans l'exemple suivant :
Voir l'exemplePour vous aider avec les expressions regulières (ReGex) vous pouvez utiliser l'outil ci-dessous :
Utiliser l'outil ReGexReprenez et faite la vérification du formulaire d'inscription de l'exercice précédent :
Comme dans l'exemple :
Voir l'exempleAu bout de 3 secondes, affichez un bouton qui au click donne le temps de réaction en secondes et millisecondes, entre l'affichage du bouton et le click. Si le bouton n'est pas cliqué au bout de 3 secondes un message apparait. Comme dans l'exemple suivant :
Voir l'exempleEn reprennant le site analytics, on va créer un carousel qui va remplacer la section "recent comments".
Comme dans l'exemple suivant :
Voir l'exempleRéaliser un carousel, en prenant en compte les précisions suivantes :
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 :
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é
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 ».
Reproduisez le site, en mobile first, selon les maquettes. Vous devrez créer 2 commits :
Apportez la modification suivante et faites un nouveau commit.
Voir la modificationMaintenant 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.
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 :