TEST
Dans les deux articles qui suivent, notre seul espoir de faire disparaître l'étoile de la mort est d'inspecter le code à la recherche d'indice permettant de débloquer un code secret et un bouton.
Attente du mister MAgie !
Nous avons vu dans notre premier cours l'inspecteur. Le seul outil de développement que vous devez maîtriser. Mais quel outil !
Nous pourrons découvrir la magie de propriété permettant de jolie effet
overflow en action
C'est à dire rechercher des informations sur la propriété CSS overflow.
Nous pourrons découvrir la magie de propriété permettant de jolie effet
Exemple
Découvrez la propriété "overflow". Elle est très utile dans bien des effets.overflow en action
Mes attentes :
Dans quelque temps, suite à ce genre de cours, vous devrez travailler par vous même.C'est à dire rechercher des informations sur la propriété CSS overflow.
Mon rôle :
Mon but est de vous permettre d'être autonome dans votre recherche.
Je ne peux pas travailler pour vous et faire la 1/2 heure de travail personnel quotidien.
En cours ou en TD, je vous montrerai que l'inspecteur permet de simuler la position de votre souris sur un élément. Cette information facilitera votre recherche.
 |
Lab : Etudier le code
Aller dans le fichier test : code
Comment inspecter l'info bulle ?
Quelle magie permet son apparition/disparition ?
Comment inspecter l'info bulle ?
test : devTools
Utiliser l'inspecteur pour répondre aux questions suivantes
Rechercher l'onglet permettant de visualiser le bloc Start Wars sous la forme suivante.
Rechercher l'onglet permettant de visualiser le bloc Start Wars sous la forme suivante.
DEVTOOLS : Chrome
Commencez par lire l'article sur Chrome et ses outils de développement : ici.
Télécharger ensuite sur votre bureau (ou dans le répertoire de votre choix) le dossier contenant les fichiers de travail : ici
Nous considérons donc que :
N'oubliez pas d'autoriser l'accès à Chrome.
voir : cssText
dans le fichier JS, ajouter le code suivant :
document.querySelectorAll(".aside")[0].classList.add("test");
Télécharger ensuite sur votre bureau (ou dans le répertoire de votre choix) le dossier contenant les fichiers de travail : ici
Nous considérons donc que :
You have the source code for your site on your desktop.
Mise en place
Ajouter le dossier de travail comme le montre la vidéo.
N'oubliez pas d'autoriser l'accès à Chrome.
Objectif
Nous allons pouvoir modifier modifier les trois types de fichiers (HTML, CSS, JS) sans passer par un éditeur !
靧 Un seul et unique outil de travail.
Pour exercice nous allons nous entraîner à modifier les trois types de fichiers HTML,CSS et JS.
Modification du fichier HTML
Modifier le titre de votre fichier.Modification de votre site
Modifier le fichier CSS pour mettre une grille en place.Modification du fichier JS
Modifier du style :
document.querySelectorAll(".aside")[0].style = 'border:solid 3px; padding : 1em;';
voir : cssText
Remarque : il faudrait éviter de mettre du style directement en JS.
Voici une bonne pratique (ajout d'une classe) :
dans le fichier CSS, ajouter la classe test :
.test {
border : 1em solid;
padding : 1em;
}
dans le fichier JS, ajouter le code suivant :
document.querySelectorAll(".aside")[0].classList.add("test");
Modifier le texte :
Modifier le texte du paragraphe "Inspired by a trip to the library of Fonmon ... " en mettant la date d'aujourd'hui.Modifier la structure
voir cours
Inscription à :
Articles (Atom)