HTML5 & CSS3 – Les bases pour Débutants

Formations, web

Programme de 84 heures de formation

– Maîtriser les bases du HTML5

Les balises et leurs attributs, la structure d’une page HTML5.
Séparer le contenu de la forme : HTML5 pour le contenu et CSS3 pour la forme.
Identifier une page, définir un en-tête, un title et le charset.
Les balises «header», «footer», «nav», «section», «aside» et «article».
Gérer les div pour la mise en forme.
Centrer un design quel que soit la taille de la fenêtre du navigateur.
Montage HTML / CSS d’une maquette WEB graphique complexe

– Intégrer les visuels, la vidéo et le son
Propriétés «alt» pour l’accessibilité et «title» pour l’infobulle.
Balise «figure» et «figcaption».
Les formats du son et de la vidéo pour le Web.
Intégrer du son avec la balise audio.
Création d’un lecteur audio en HTML5
Intégrer de la vidéo avec la balise video.
Création d’un lecteur vidéo en HTML5

– Gérer les CSS3
Les classes personnalisées, les pseudo-classes, les balises et les «id».
Positionner les CSS : dans une balise, dans une page, dans un fichier externe.
Balises «inline» et balises «block».
Éléments flottants avec la balise «float».
Gestion des images : taille, position, opacité.
Polices de base, styles, couleurs, enrichissements, nouvelle gestion des polices avec @font-face.
Google font directory

– Animer son site
Intégrer des effets dynamiques avec des éléments de la bibliothèque Javascript jQuery : un diaporama et un menu déroulant.
Tester son site dans les navigateurs.

– Utiliser le responsive design
Structurer un document afin que son design s’adapte au support utilisé (smartphone, tablette, portable, ordinateur de bureau, etc.) en utilisant un «framework CSS responsive» prêt à l’emploi.
Personnaliser les éléments du design en intervenant dans le CSS.
Utiliser les «media queries» pour adapter automatiquement la mise en forme en fonction du périphérique détecté.
Upload multiple drag&drop;

Bootstrap : Développement web rapide & adaptif
Intégration responsive d’une maquette Photoshop avec Bootstrap
Intégrer avec Bootstrap 3 une landing page flat design