Web B2

Appearance

Positionnements CSS

Natura Morta by Jon Rafman

Aujourd'hui ​

Positionnements CSS ​

Fixer des éléments dans la page, ou les positionner par rapport à d'autres éléments.

En savoir plus

Media Queries ​

css
img {
    max-width:100%;
}

@media (width <= 767px) { ... }

@media (767px <= width <= 960px ) { ... }

XR6 ​

Créez une page avec :

  • Une favicon
  • Une vingtaine de paragraphes (min 2x la hauteur de la fenêtre).
  • Un titre et deux paragraphes
  • Le background de la page et la couleur du titre qui changent en fonction de la largeur de la fenêtre (desktop, tablette, telephone) - Media Queries
  • Mettez en ligne

Bonus:

Un bouton sur lequel on clique pour renverser la page à 180°.

Snippets ​

Faire apparaître un élément quand on scrolle de plus de 300px:

html
<script>
    window.addEventListener('scroll', function() {
        var monElement = document.getElementById('foot');
        if (window.scrollY >= 300) {
            monElement.style.display = 'flex';
        } else {
            monElement.style.display = 'none';
        }
    });
</script>

Modifier le contenu d'éléments HTML en fonction de la largeur de l'écran:

html
<script>
    window.addEventListener('resize', function() {
        var largeurEcran = window.innerWidth;
        var element = document.getElementById('titre');

        if (largeurEcran < 768) {
            element.textContent = "Tu es sur un petit écran!";
        } else if (largeurEcran < 1400) {
            element.textContent = "Tu utilises un écran moyen..";
        } else {
            element.textContent = "Big screen que tu as!";
        }
    });
</script>

Pour ajouter/supprimer une classe quand on clique sur un bouton:

js
var bouton = document.getElementById('monBouton');
var body = document.body;

bouton.addEventListener('click', function() {
body.classList.toggle('changed');

Outils et balises intéressantes ​

  • Ouvrir un lien dans une nouvelle fenêtre
  • Les iframes (et intégration de contenus externes (réseaux sociaux, youtube, jitsi, ..))
  • Les positionnements CSS
  • Les media-queries
  • Les transformations CSS
  • Les animations CSS
  • La balise audio
  • La balise video
  • Les fichiers SVG (que vous pouvez styler avec CSS)
  • Les dégradés
  • Les ombres portées (sur les boîtes ou sur le texte)
  • Les backgrounds (couleurs, images, videos)
  • flexbox
  • Les filtres CSS
  • Pourquoi pas javascript ..
  • etc..

Geonetart ​

Pour rappel, lors de la première lecture du travail : ​

  • Le lieu de référence doit être choisi
  • La façon doit le site en ligne fera référence ou dialoguera avec le lieu doit déjà avoir été envisagée.
  • Un projet de conception de site doit être réalisé (même si c'est sur une feuille de papier)
  • Merci d'être là 5 minutes avant l'heure prévue

Quelques travaux précédents ​

Mais aussi... (les autres stars du web) ​