Outils graphiques / Web création Outils graphiques / Web création
Référence formation : 2-H5-PERF - Durée : 2 jours

Formation éligible CPF  
  • Objectifs
  • Pré-requis
  • Pédagogie
Comprendre le positionnement des éléments dans une page.Modifier dynamiquement l'apparence d'une page par rapport au périphérique de consultation.Utiliser les transformations et animations.
Des connaissances en HTML et CSS sont nécessaires

Méthodes pédagogiques

Présentation des concepts, démonstration, exécution, synthèse et exercices pratiques d'assimilation

Modalités pédagogiques

Présentiel - Distanciel - AFEST

Moyens pédagogiques

Formateur expert du domaine - 1 ordinateur, 1 support de cours version papier ou numérique, un bloc-note et un stylo par personne - vidéo projecteur - tableau blanc

Modalités d'évaluation

Positionnement préalable oral ou écrit - Evaluation formative tout au long de la formation - Evaluation sommative faite par le formateur ou à l'aide de la certification RS2724 - Certification IT – Développement de sites web avec le langage de balises HTML et des feuilles de styles CSS - France Compétences (francecompetences.fr)

Public concerné

Salariés - Demandeur d'emploi - Reconversion professionnelle

Si vous êtes en situation de handicap, vous pouvez joindre notre référent Handicap. Voir notre fiche Accès correspondante.

Contenu pédagogique

HTML - Rappels sur la structuration d'une page

  • Balises span et div
  • Les sections logiques d'une page
  • Les balises block et inline
  • Propriété CSS display
  • Définir la largeur, la hauteur et l'alignement
  • Définir les bordures
  • Définir les marges externes et internes

CSS - Les sélecteurs et les pseudos-classes évoluées

  • Rappels sur les sélecteurs courants
  • Rappels sur les pseudos-classes courantes
  • Les pseudos-classes évoluées
  • CSS pour réaliser un compteur
  • CSS pour créer du contenu

CSS - Les média-queries

  • Les propriétés d'affichage
  • Propriété CSS visibylity
  • La fonction calc() et la propriété min – max

Mise en pratique - Ecriture d'une page qui s'adapte automatiquement

Positionnement des éléments

  • Positionnement des éléments
    • Les positions absolues, relatives et fixes
    • Les éléments flottants
    • Utilisation de top, bottom, left, right

    Gérer les scrollers dans ma structure

    • Propriété CSS overflow
    • Mettre en place un effet parallaxe dans une page

    Mise en pratique - Utilisation d'un effet parallaxe

    CSS - Transformation

  • CSS - Transformation
    • Gérer la position x et y
    • Modifier la taille proportionnellement
    • Rotation
    • Déformation

    Mise en pratique - Mise en page polaroid

    CSS - Transition

  • CSS - Transition
    • Les propriétés visées par la transition
    • La durée et le délai de déclenchement

    CSS - Animation

    • Définir une animation
    • Appliquer une animation

    Mise en pratique - Faire un slider

    Mise en pratique - Apparition d'étiquette au survol d'un élément

  • Mise en pratique - Apparition d'étiquette au survol d'un élément