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'exempleReproduisez le site, selon la maquette en prenant en compte les précisions suivantes :
Faire 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'un objet en javascript. Ils comprennent donc une image, un titre et un texte descriptif. Comme dans l'exemple :
Voir l'exempleEn reprenant l'exercice du compteur de click, ajouté les conditions suivante :
Comme dans l'exemple :
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'exempleDans un premier temps télécharger Bootstrap.
Télécharger bootstrapEnsuite, lier les feuilles de style CSS et les fichiers JavaScript, avec le code ci-dessous :
<!-- Liaison CSS Bootstrap -->
<link href="bootstrap/css/bootstrap.css"
rel="stylesheet">
<!-- Liaison de la bibliothèque d'icones -->
<link href="bootstrap/icons/icons-1.5.0/font/bootstrap-icons.css"
rel="stylesheet">
<!-- Liaison au script Bootstrap -->
<script src="bootstrap/js/bootstrap.js"
type="text/javascript"></script>
Enfin, à l'aide de la documentation et des fichiers fournis, reproduisez la maquette de l'exercice pour vous exercer.
Vous devez uniquement vous servir des classes bootstrap (sans utiliser de CSS) afin de finir et compléter la page HTML présente dans le dossier.
Dans le fichier HTML fournis, les liaisons CSS et JS sont déjà faites et des indications sont mises en commentaire.
Télécharger l'exercice Accéder à la documentation BootstrapAu 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.
Ces exercices sont réalisable en groupe de deux.
Un des deux membre du groupe va s'occuper de mettre en place le js pour ajouter un produit au panier :
Le deuxième membre du groupe va s'occuper de mettre en place le js pour le menu accordéon de la navigation :
teal.slateblue.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 :