• Ouvrir dans un navigateur la page index.html située dans le dossier "1-html seul". La page apparaît avec les propriétés graphiques par défaut pour chaque élément.
• Faire un clic droit afin d'ouvrir le code source.
• Identifier les éléments HTML qui composent la page. Ouvrir le fichier dans un éditeur comme Atom. Rechercher et supprimer la balise fermante </h1>.
• Rafraîchir la page dans le navigateur. Que se passe t'il? Remettre la balise qui ferme l'élément h1
• Mettre un deuxième titre h2 avec le texte de votre choix.

• Ouvrir dans un navigateur la page index.html située dans le dossier "2-html css".
• Faire un clic droit afin d'ouvrir le code source. Repérer les 3 différences avec la version précédente.
• Faire un clic droit sur le titre h1 et expliquer les règles css appliquées.
• Utiliser l'inspecteur du navigateur pour modifier les règles CSS (couleur de fond, type de police, etc...).

En utilisant un framework, il est possible de positionner les éléments différemment selon la largeur de l'écran.

• Ouvrir l'exemple du w3school utilisant bootstrap ou la solution utilisant le framework w3.css.
• Analyser le code source en identifiant les éléments à ajouter pour utiliser un framework responsive.