Sélecteurs et propriétés CSS

Où écrire le CSS

Les commentaires en CSS

Les sélecteurs CSS simples

Les attributs id et class

L'héritage en CSS

Les types block et inline

Les éléments HTML div et span

La propriété CSS font family

Autres propriété CSS de type font

Couleur et opacité en CSS

Propriétés CSS de type text

Gestion des espaces en CSS

Le modèle des boîtes

Largeur et hauteur en css

Les bordures en CSS

Padding et margin en CSS

Les ombres des boîtes

La propriété CSS display

Les propriétés position et z index

Les propriétés float et clear

L'alignement en CSS

La couleur de fond

Images de fond et gestion du fond

Dégradés linéaires

Dégradés radiaux

Créer un tableau simple

Créer un tableau structuré

Opérations sur les tableaux

Opérations sur les images

Insérer de l'audio en HTML

Insérer des vidéos en HTML

Intégration de média et sémantique

Notations CSS short hand et long hand

Pseudo classes CSS

Pseudo éléments CSS

Les sprites en CSS

Les transitions CSS

Les animations CSS

Présentation des formulaires

Créer un formulaire HTML simple

Types d'input et listes d'options

Les attributs des formulaires

Organiser et mettre en forme un formulaire

Introduction au responsive design

Meta viewport et valeurs CSS relatives

Media queries CSS

Création d'un site personnel (site cv) 1/4

Création d'un site personnel (site cv) 2/4

Création d'un site personnel (site cv) 3/4

Création d'un site personnel (site cv) 4/4

Conclusion

Introduction au cours HTML et CSS

Définition et Usage

Évolution de l'informatique et des langages Web

Travail en local et en production

Choix et installation d'un éditeur de texte

Eléments, balises et attributs HTML

Structure minimale d’une page HTML valide

Enregistrement et affichage d’une page HTML

L’indentation et les commentaires en HTML

Les titres et les paragraphes en HTML

Exercice : Structurer un texte brut en texte HTML

Les espaces et retours à la ligne en HTML

Exercice : Ajouter des espaces et des retours à la ligne

Définir le niveau d’importance des contenus en HTML

Exercice : Définir le niveau d'importance des textes

Créer des listes en HTML

Exercice : Structurer le texte en listes

Créer des liens en HTML

Exercice : Créer des liens ouvrant des pages internes

Envoi de mails et téléchargement de fichiers en HTML

Exercice : Créer un lien de téléchargement et un lien d’envoi de mail

Compatibilité, support et validation du code HTML et CSS

Sélecteurs et propriétés CSS

Exercice : Changer la couleur d’un texte

Où écrire le code CSS ?

Commentaires et indentation en CSS

Exercice : Appliquer des propriétés CSS à l’aide de sélecteurs simples

Sélecteurs CSS simples et combinateurs

Les attributs HTML class et id et les sélecteurs CSS associés

Exercice : Mettre en forme le texte à l’aide d’une classe ou d’un id

Ordre d’application (cascade) et héritage des règles en CSS

Exercice : Respecter l’héritage des règles CSS

Les éléments HTML div et span (conteneurs génériques)

Exercice : Appliquer le CSS en renseignant les balises et attributs

Les niveaux ou "types" d’éléments HTML block et inline

Notations complètes “long hand” et raccourcies “short hand’ CSS

Exercice : Alterner entre notation « long hand » et « short hand »

Fonts

Exercice : Appliquer des Google Fonts et des polices alternatives

Les autres propriétés CSS liées à la police

Exercice : Appliquer les propriétés CSS liées aux polices

Texte

Exercice : Appliquer les propriétés CSS liées au texte

Gérer la taille des interlignes et des espaces dans les textes en CSS

Exercice : Modifier les interlignes et les espacements

Gérer la couleur et l’opacité des textes

Exercice : Gérer la couleur et l’opacité des textes

Introduction

Conteneurs - Width et Height

Exercice : Modifier la largeur et la hauteur des balises

Padding

Exeercice : Appliquer des marges internes (padding)

Bordures

Exercice : Ajouter des bordures

Margin

Exercice : Appliquer des marges externes (margin)

Box Sizing

Exercice : Utiliser la propriété CSS box-sizing

Bordures Arrondies

Exercice : Appliquer des bordures arrondies

Display

Exercice : Mettre en forme un questionnaire

Position

Exercice : Mettre en forme une page d’accueil

Float

Exercice : Mettre en forme un titre et un bloc de citation dans un texte

Conflit avec Display, Position et Float

Création

Exercice : Départs en gare

Structure

Exercice : Tableau des dépenses

Mise en forme

Exercice : Tableau des stocks et commandes

Images

Exercice : Insérer des images

Audio

Exercice : Insérer une piste audio à formats multiples

Vidéo

Exercice : Insérer une vidéo

iFrame

Couleur de fond

Image de fond

Exercice : Insérer et cumuler plusieurs images d’arrière-plan

Dégradé Linéaire

Exercice : Appliquer un dégradé linéaire en arrière-plan

Dégradé Radiaux

Exercice : Appliquer un dégradé radial en arrière-plan

Ombres

Exercice : Ajouter des ombres aux éléments en CSS

Sélecteurs CSS d'attributs

Exercice : Manipuler les sélecteurs d’attributs

Pseudo Classes

Exercice : Utiliser les pseudo-classes CSS

Pseudo éléments

Exercice : Les pseudo-éléments CSS

Atelier - Menu Horizontal Sticky

Atelier - Menu Déroulant

Présentation

Exercice : Créer un formulaire d’inscription

Eléments de formulaires

Exercice : Créer un formulaire complexe

Attributs de Formulaires et Sécurité

Exercice : Attributs des formulaires et sécurité

Projet SIte Web Restaurant Jadoo 2

Transitions

Exercice : Créer des transitions

Animations

Exercice : Animer un élément pour obtenir un effet néon

Transformation

Exercice : Course contre la montre

Atelier - Diaporama

Introduction

Direction

Exercice : Afficher des articles de manière flexible

Alignement

Exercice : Centrer un élément et mettre en forme un formulaire

Taille

Exercice : Paramétrer les dimensions des éléments flexibles

Utilisation et Limites

Atelier - Menu Flexbox

Introduction

Meta Viewport

Media Queries

Exercice : Créer une interface responsive

Images

Exercice : Adapter les images à l’écran avec la balise picture

Menu Déroulant Responsive

Sémantique

Exercice : Adapter la sémantique des éléments à leur usage

Atelier - Site CV

Introduction

Exercice : Appliquer un modèle de grille CSS flexbox

Création

Exercice : Faciliter la mise en page à l’aide des grilles

Positionnement

Exercice : Utiliser les grilles pour mettre en forme une interface

Alignement

Exercice : Paramétrer l’alignement et l’espace entre les éléments d’une grille

Atelier - 3 Colonnes

Introduction

Fonction

Variables

Arobase

Imbrication et héritage étendu

Projet Site Web - Jadoo

Div

P

Ul

Ol

Li

Dl

Pre

Liste complète des balises HTML

Carte Interactive

Formulaire

Guide complet Flexbox

Writing Mode et Valeurs Logiques

Guide complet des Grilles CSS

Liste des propriétés CSS

Visibility - Display

Sélecteurs CSS

Placeholder

Centrage Parfait

Introduction

Optimisation SEO

Mise en garde

Meilleurs référencement