Détails

Écrit par messaoudi

Catégorie : Développement

Publication : 28 juin 2016

Création : 28 juin 2016

Mis à jour : 11 mars 2022

HTML5 et CSS3 pour les designers et intégrateurs

 formation continue pour Vous faciliter l’intégration dans la vie professionnelle et/ou améliorer vos compétences techniques sur le plan pratique.

Les bases du web

Fonctionnement d’un échange entre navigateur et serveur
Les protocoles http et https
Les Navigateurs Web
Présentation des différents langages Web
Les logiciels pour coder et mettre en ligne
L’inspecteur de code
Ressources web utiles

HTML 5

Qu’est-ce que le HTML et quel est son rôle
Que sont les balises ?
Structure de base d’un document (Doctype, head, body)
Comment écrire son premier document HTML
Les balises principales (liens, images, tableaux, blocs, paragraphes, listes…)
Hiérarchie et imbrication des éléments, parents / enfants, tabulations
Nouvelles normes HTML5 d’écriture

CSS 3

Qu’est-ce que le CSS ?
HTML, CSS : le fond/ la forme
Rôle du CSS
Lier une feuille de style à une page HTML
Arborescence de projets web, structure des dossiers standards
Principe de base : Sélecteurs, propriétés, valeur
Principales propriétés CSS
Mise en forme du texte, paragraphes et caractères
Nommer ses styles : Classes, identifiants
Les sélecteurs CSS
Quelques sélecteurs CSS avancés
Nouvelles propriétés CSS3
Nouvelles syntaxes CSS3
Pseudo classes
Préfixes et compatibilité

Structurer une page avec HTML et CSS

Les blocs et divisions
Le modèle de boite CSS
Positionnement (statique, absolu, fixe)
Principaux modes de positionnement :

Float

Principe de positionnement
Protection des conteneurs
Positionnement gauche / droite des images
Positionnement de blocs
Structurer une page en colonnes

Flexbox

Principe moderne
Compatibilité des navigateurs
Bases et box-sizing
Les conteneurs et les éléments
Possibilités de positionnement
Structurer une page simple avec des colonnes
Comparatif Float / Flex
Grille simple de mise en page Float et Flex

Formulaires

Eléments et fonctionnement d’un formulaire
Méthodes d’envoi et traitement
Les champs de formulaire
Nouveaux types de champs HTML5

Graphisme avancé

Polices de caractères personnalisées
Couleurs avancées et dégradés
Ombres et opacité
Bordures et arrière-plans avancés

Compatibilité des technologies

Tester la compatibilité du navigateur
Comment connaître la compatibilité d’une technologie

Outils, méthodes d’optimisation, et bonnes pratiques

Contrôler la compatibilité des technologies (canIuse)
Compatibilité CSS : autoprefixer
Ecriture de code avec auto complétion avec Emmet
Introduction aux préprocesseurs
Compilation et minification des fichiers
Outils d’analyse de performance avec Google Speed
Optimisation des images
Qu’est-ce qu’un CDN
Validation W3C
Faire de la veille : bénéfices, outils

Les Frameworks CSS

Normaliser les styles de base avec Normalize.css
Une base saine avec HTML5 Boilerplate
Approche de twitter Bootstrap et Foundation

Responsive Web Design

Introduction au RWD, enjeux, état des lieux
Principe de base
Mise en place des bases code
Un design fluide
Les média queries
Fonctions utiles (calc)
Outils utiles au responsive : browser refreshing, serveur local, prepoc.io
Créer une grille responsive
Conception de structure fluide
Coupures avec les media queries et les breakpoints
Tests sur navigateurs et mobile en temps réel

HTML/CSS avancé

Animations et transformations

Transformations de base (rotation, translation, etc.)
Transformations 3D (perspective)
Transitions : changement progressif d'un style
Animations autonomes

Vectoriel

Utilisation d’images vectorielles SVG
Dessiner en vectoriel grâce à JavaScript et Canvas

Nouvelles balises audio/video

Balise audio et options
Balises video et options
Formats pris en charge

Techniques

Notation BEM
CSS Orienté Objet
Code maintenable
Futur du CSS : Polymers et web composants

Mise en ligne

Transfert des fichiers via FTP
Configuration de son hébergement