UE Programmation Web 1

Compte rendu du projet

ROSTALSKI Baptiste & CIMBARO Mathéo

1 - Compte rendu de votre travail

Travail à réaliser

Le fichier est divisé en main > section > article.
Le style est ajouté grâce au fichier style_general.css.

2 - Prise en main du code fourni

Questions

  1. a. Le sélecteur header nav et header h1 sélectionnent respectivement les nav et les h1 decsendant d'un header.
    b. La propriété inline-block premet a un element de se comporter comme un bloc tout en étant inline. C'est-à-dire, qu'il conserve ses propriétés widht et heigth tout en étant inline.

  2. La balise meta charset permet d'indiquer que le fichier est encodé en UTF-8.
    La balise meta viewport est une première étape dans la création d'une page responsive. Cela permet de définir la taille de la page à celle de l'écran de l'utilisateur pour faire une "adaptation automatique".

  3. Les élèments de la page ont les classes description et illustration. Cela permet de les structurer grâce à du code CSS.

3 - Agencements

La condition utilisée est screen and (max-width: 640px)

Agencement desktop

  1. a. Un header avec un titre h1 et un nav auquel est ajoutée la propriété CSS float: right.
    b. La propriété utilisé est display: none.

  2. Une section avec deux articles contenant chacun une image et un paragraphe. Les articles ont la classe description et les images la classe illustration. L'attribut float: right a été ajouté aux deux classes.

  3. La structuration du pieds de page utilise simplement la balise footer avec l'atribut text-align: center.

Agencement mobile

  1. La classe illustration obtient les attributs suivants : display: block, float: none, margin-left: auto et margin-right: auto.

  2. Aucun changement n'a été oppéré par rapport à l'agencement Desktop, la mise en forme était déjà correctement gérée.

  3. a. Le sélecteur #buttonMenu a reçu la propriété display: initial dans agencement_flex.css.
    b. Le comportement a dû être modifié dans le fichier agenceent_flex.css.
    c. Le menu est découpé de manière à être facilement gérable (chaque élément du menu est un élement a dans div #menu). Le clique sur le bouton en haut de la page déclenche un événement côté JavaScript qui s'occupe de mettre à jour la propriété display entre flex et none pour afficher ou masquer les éléments du menu.