Travail maison

Travail personel

Programme sur ${time} ans

Plan

Lab : Etudier le code

Aller dans le fichier test : code

Comment inspecter l'info bulle ?

Quelle magie permet son apparition/disparition ?

TD : environnement

A lire

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.

test inspector !

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 :

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