HTML5 CSS3 + Javascript

• Savoir créer une page web statique (dit site vitrine).
• Savoir et comprendre et interpréter le langage HTML5 et CSS3.
• Apprendre quelques connaissances sur l'apprentissage d'un CMS de type WordPress.
• Savoir programmer en Javascript

Durée de la formation: 19 heures

Prérequis 

Pour qui ?

PROGRAMME

• Présentation de la formation

Présentation de la formation

• Module Ressources

Module Ressources (fichier zippé de plus 600 Mo de données)

• Introduction

Test de positionnement
Origine et naissance du HTML
Gestion des navigateurs ou browsers (Safari, Firefox, Chrome, Edge)
Installation d'un IDE (Visual Studio Code)
Enregistrement fichier Web (extension html)

• Apprentissage du HTML5

Structure de base 
Gestion de quelques balises de base
Encodage des caractères (ASCII)
Gestion des listes (ul, ol, dl)
Gestion des images (png, jpg, tif, svg)
Gestions des liens
Gestion des tableaux table, tr, td, thead, tbody, tfoot
Gestion commentaires
QUIZZ - Apprentissage du HTML5 - Partie 01
Gestion de la balise DIV et SPAN
Différence entre un chemin absolu et relatif
Gestion d'une Structure HTML5 (main, nav, section, article)
Inspecteur WEB lié à un navigateur (Firefox, Chrome, Edge)
Autres balises de mise en forme
Mise en ligne du site Web (domaine, transfert ftp, http)
Gestion du formulaire - Partie 01
Gestion du formulaire - Partie 02
Gestion des balises AUDIO et VIDEO (MP3, ACC, AVI, MOV, WEB, MP4)
Gestion de la balise IFRAME
QUIZZ - Apprentissage du HTML5 - Partie 02
Allons plus loin sur les balises HTML5
Validation du HTML5 par le site web validator W3C

• Apprentissage du CSS3

Origine du CSS
Insertion du CSS (3 méthodes)
Les sélecteurs de base
Les couleurs (RGBA, HSL, Hexadécimal ...)
La gestion des Fonts (Interne ou externe)
La gestion des boîtes (Propriété DISPLAY, MARGIN, PADDING)
La gestions des unités de mesure(px, pt, em, rem, %)
Résumons ce que l'on a appris en CSS
Gestion de la propriété POSITION (Static, Absolute, Relative, fixed et Sticky)
Gestion de la propriété float + la propriété clear
Aperçu de l'outil de type Flexbox (Début de responsive au niveau du site Web)
Aperçu de l'outil de type Grid (création d'un portfolio et d'une structure Web dit Template).
Gestion des sélecteurs avancées (combinateurs, sélecteur d'attribut, pseudo classes, pseudos éléments)
Gestion de la propriété Background
Gestion de la propriété BORDER
QUIZZ - Apprentissage du CSS

• Allons plus loin

Box-sizing
Gestion de la propriété Transform (Translate, Rotate, Scale)
Gestion de la propriété Animation et transition
Gestion des Media Queries et le système Responsive
Les FrameWorks en CSS (BootStrap, Foundation JS, W3.CSS et ainsi de suite)
La gestion des variables (Scope local et Global)
Le reset en CSS et Normalize
Mise en ligne du site Web (sur mon laboratoire)
Validation du site Web (HTML/CSS) par le site web Validator

• Introduction au CMS

introduction au CMS
Introduction sur WordPress
3 façons d'installer WordPress
Aperçu de l'interface (articles, catégories, étiquettes)
Gestion des médias (images, fichier, vidéos, sons)
Gestion des menus + thème
Conclusion

• Introduction aux bases en JavaScript

Module Ressources (fichier Zippé de 3 Mo) comprenant les exercices en JavaScript
Introduction
Gestion des variables (partie 01) - Variable de base, constante, calcul, 
Gestion des variables (partie 02) - Gestion des tableaux, objets
Gestion de document (InnerText, InnerHTML, getElementById, getElementsByClassName
Gestion des conditions (if, else, else if, switch)
Gestion des boucles (for, while, for in, for of)
Gestion des fonctions (fonction simple, fonction avec argument)
Gestion des objets (nous verrons un peu comment utiliser, déclarer, ajouter des éléments à un objet)
Gestion des Events (3 façons de déclarer ceux-ci, HTML, JavaScript ou AddEventListener

Pour finir, j'ai fait en sorte de regrouper tous les cours de bases dans un fichier Web, celui-ci se nomme Menu_JavaScript. 

• Conclusion 

Quizz Final (une trentaine de question afin de voir vos connaissances en HTML5/CSS3 et JavaScript)