Seul.e ou par groupe de deux, et à l'aide de cette page de documentation, créez deux pages web, liées entre elles, qui réagissent (apparaissent) différemment en fonction du contexte de navigation (desktop, tablette, mobile, print ..)

Doit être présent/utilisé dans le travail, d'une manière ou d'une autre :

• Positionnements CSS (pour au moins un élément)
• Un popover
• Un formulaire stylé (pour ceux et celles qui l'ont déjà rendu: un lien vers l'url de leur exercice dans un nouvel onglet)
• Utilisation des Media Queries. Songez à ce qui change ou peut changer lorsque l'on passe sur un téléphone. Notez vos observations.

Be creative!

Un part importante de cet exercice (et de tout travail sur le web) concerne votre aptitude à lire et utiliser une documentation en ligne, ou à y trouver les ressources nécessaires. N'hésitez pas à utiliser des outils d'IA pour vous aider ou vous aventurer là où vous n'avez pas pied. (voir ci-dessous) N'oubliez pas que ces outils peuvent générer du code, certes, mais aussi corriger/organiser le vôtre si nécessaire. Faites un projet rapide sur papier avant de commencer.

Astuces et pistes

• https://layoutit.com/ ou https://cssgrid-generator.netlify.app/
• propriété CSS content
• propriété CSS clip-path + Clippy
• Filtres CSS

Aides IA:

• Chat GPT
• Copilot
• Perplexity.ai

Ce travail sera principalement réalisé au cours et doit être remis de la même façon que les autres.