Découverte - S'initier à la notion de cascade et d'imbrication. Première prise de contact avec "l'envers du décor" par l'intégration des "balises" de base et par un aperçu rapide du rôle des feuilles de style dans la gestion du design. Cette première phase est destinée à sensibiliser aux règles spécifiques du Web. En suivant les consignes de l'exercices, vous pourrez créer une structure HTML en intégrant des balises h1, h2, h3, p, ul, li dans une page pour créer la structure Html.

Utilisation des balises "inline" pour la gestion des textes dans une page Html: h1, h2, h3, p, ul, ol, li, span, br et la balise img pour l'habillage des images avec du texte. Méthode d'intégration des polices Google. Utilisation de certains attributs Css pour personnaliser graphiquement ses textes : color, text-align, font-size, font-weight, ou float, introduction des attributs de padding et de margin. Création de cadres autour des images avec l'attribut border top, bottom, right et left.

Règles de conversion des images pour le Web, anciens formats à abandonner et nouveaux formats à privilégier, utilisation de Photoshop pour adapter tous les visuels aux contraintes du Web et techniques de création d'animations GIF. Quels usages pour les images vectorielles du Web, les subtilités de la balise Img et initiation aux attributs CSS Width, Height, Border, Padding, Margin , Background-image et Background-size

Application - Introduction aux différentes étapes de création d'un site Web, introduction à l'utilisation d'un outil FTP pour mettre à disposition son site sur un serveur Web, découpe de son design en Zoning et Wireframing, lien entre design et structure Html, lien entre design et utilisation des Css, attributs Css de background (color, position, repeat) box-sizing, border-radius, line-height, text-transform et la pseudo class hover.

Important - Comprendre le fonctionnement des options de la Grille Css pour mettre en forme simplement les étapes de "zoning" et de "Wireframing" de l'UI-UX design. Quel usage doit-on faire des attributs grid-template, grid-gap, grid-column, grid-row pour créer des colonnes, des rangées, des cellules, des zones, comment placer les éléments sur les lignes, dans les colonnes, dans les zones, ajouter des gouttières et utilité de la nouvelle unité Fr.

Important - Comprendre la complémentarité des fonctions "Flex" et "Grid" pour assurer la compatibilité des sites avec les exigences du Web moderne. À quel moment doit-on préférer utiliser justify-content, align-items, ordonner les éléments, occuper l'espace restant sans entrer de valeur fixe ? Comment structurer son HTML pour optimiser la mise en page fluide et responsvie. Application de ces principes en créant une gallerie d'images.

Apprendre à se passer des "class" pour cibler des éléments sur la page, comprendre la sématique HTML et optimiser l'usage des "nth" enfant ou type pour personnaliser chaque partie de la page selon les besoins du Design. Découvrir les avantages de pseudo éléments "Before" et "After", des bénéfices de "l'Overflow" et d'autres sélecteurs avancés pour rendre les cascades des styles sans le moindre risque pour la santé.

Application - Déclinaison de l'exercice de création d'un site pour un salon de coiffure en utilisant les nouvelles fonctions CSS. Création d'une "One Page" et personnalisation des différentes sections du site avec nth-of-type, ">", et les cascades de style. Révisison des "Grid", des "Flex", des "Font-Family", "Font-Weight", "Float", "Position" ou "Background-Image".

Théorie - Découverte des outils du logiciel XD pour créer graphiquement le design d'un site ou d'une application. Énonciation des 20 règles utilisées dans le design Web moderne et explications pratiques sur la meilleure façon de les appliquer, aperçu des différentes étapes pour concevoir et créer un site ( ou toute autre création destinée à être publiée sur le Web ), réflexions pratiques sur un exemple de site développant la présence d'un boutique de thé sur le Web.

Exercice partie A - Les nouvelles options CSS "Transform" et "Transition". Comment déplacer (Translate), redimensionner (Scale) et même tourner (Rotation) des objets Html en indiquant leur centre de transformation (transform-origine). Apprendre à lier ces transformations au survol d'un élément en :hover et les animer avec "Transition" en réglant durée, démarrage et type de transitions. Application pratique avec un exercice de diaporama.

Exercice partie B - Appliquer les transformations et les transitions à une action de clic de souris avec le :target. Créer des identifiants (id) sur les éléments HTML pour lier les changements d'état à un clic. Avantages et inconvénients du :target. Augmenter la portée de la fonction en la couplant avec les options NTH. Suite de l'application pratique avec l'exercice de diaporama.

Convertir une vidéo pour le Web (MP4, WebM, Ogg, AV1…) appliquer une balise "video" et gérer ses options, créer des liens vers les hébergeurs de vidéos (YouTube, Vimeo… ), choisir une animation Gif ou une vidéo, animer les éléments du code avec les Css, animer des suites d'images en STEP comme dans AfterEffects… Introduction aux mediaQueries et à la gestion Responsive des sites.

Application :: partie 1 - Tester ses connaissances. Première partie pour évaluer sa compréhension des fonctions CSS Grid et Flex, comment et quand les utiliser. Enrichissement des textes, gestion de la position des éléments "footer" et "nav", gestion des images, margin, padding et du "float".

Application :: partie 2 - Intégration de polices Google, gestion des visuels pour chaque page, sélection des éléments selon leur position dans la page et application de style différents, (nth-of-type), répartir des éléments selon un oordre modifié, (order), color, text-align, font-size, font-weight, position sticky, before et after, action de survol adaptée, ombrage, border…