HTML - CSS

HTML/CSS – NIVEAU DÉBUTANT (VIDÉO) 18 leçons

• Présentation du cours
• Pourquoi apprendre à coder ?
• Définitions et rôles
• Versions HTML et CSS
• Travail en local et en production
• L'éditeur de texte
• Eléments, balises et attributs
• Structure d'une page HTML
• Création d'une page HTML
• Indentation et commentaires HTML
• Titres et paragraphes en HTML
• Espaces et retours à la ligne en HTML
• Les niveaux d'importance des textes
• Les listes en HTML
• Liens internes et externes en HTML
• Autres types de liens HTML
• Insérer des images en HTML
• Validation et compatibilité du code

HTML/CSS – NIVEAU INTERMÉDIAIRE (VIDÉO) 33 leçons

• 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

HTML/CSS – NIVEAU CONFIRMÉ (VIDÉO) 19 leçons

• 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 5 leçons

• 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

Les bases du HTML 17 leçons

• 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

Les bases du CSS 15 leçons

• 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 »

Css : Mise en forme 10 leçons

• 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

Modèles de boîtes 13 leçons

• 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

Position et affichage 7 leçons

• 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

Tableaux 6 leçons

• Création
• Exercice : Départs en gare
• Structure
• Exercice : Tableau des dépenses
• Mise en forme
• Exercice : Tableau des stocks et commandes

Médias 7 leçons

• Images
• Exercice : Insérer des images
• Audio
• Exercice : Insérer une piste audio à formats multiples
• Vidéo
• Exercice : Insérer une vidéo
• iFrame

Fond, Dégradé et Ombre 9 leçons

• 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 complexes 8 leçons

• 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

Formulaires 7 leçons

• 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

Transition, Animation et Transformation 7 leçons

• 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

Flexbox 9 leçons

• 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

Responsive Design 7 leçons

• 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 3 leçons

• Sémantique
• Exercice : Adapter la sémantique des éléments à leur usage
• Atelier - Site CV

Modèle de grille 9 leçons

• 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

Evolution du CSS 6 leçons

• Introduction
• Fonction
• Variables
• Arobase
• Imbrication et héritage étendu
• Projet Site Web - Jadoo

Guide des balises 8 leçons

• Div
• P
• Ul
• Ol
• Li
• Dl
• Pre
• Liste complète des balises HTML

Atelier : Création avancée 2 leçons

• Carte Interactive
• Formulaire

Css : Aller plus loin 8 leçons

• 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

SEO 4 leçons

• Introduction
• Optimisation SEO
• Mise en garde
• Meilleurs référencement