Formation HTML5 et CSS3 les fondamentaux Réf : CHCF

Par Nicolas Hoizey

Développez des sites WEB dynamiques et modernes en utilisant les possibilités du HTML5 et du CSS3.

Durée :
5 jours
Lieux :
Paris

Partage :

  • Twitter
  • Facebook
  • E-mail
  • Linkedin
  • Viadeo

Soyez alertés par e-mail des nouvelles sessions : Poser une alerte,

Description

Cette formation présente, par la pratique, comment créer des sites WEB dynamiques et modernes via le langage de structration de contenu HTML et de présentation CSS, ainsi que l'ensemble des nouveautés apportées par HTML5 et CSS3.
Cette formation pratique sur les fondamentaux d'HTML5 et CSS3 s'adresse essentiellement à toute personne qui souhaite créer des applications WEB modernes, adaptées aux différents appareils et navigateurs actuels, via les nouveaux langages et spécificités apportés par le WEB d'aujourd'hui.

Certification MCSD, Web Applications :
Cette formation prépare à l'examen 70-480 - Programming in HTML5 with JavaScript and CSS3.
En complément des formations ASPN (ou M20486) et M20487, elles forment le cursus de Certification Officielle Microsoft MCSD: Web Applications.

Cette formation entre également en compte dans le cursus de Certification Officielle Microsoft MCSD: SharePoint Applications.

Objectifs pédagogiques

A l’issue de cette formation, les stagiaires seront en mesure de :
  • Développer plus rapidement des sites performants et modernes via les nouveaux apports du WEB
  • Tester et gérer la rétrocompatibilité de leurs sites sur les différents navigateurs
  • Animer du son et de la vidéo sans Flash, réaliser du graphisme avancé sans Photoshop
  • Optimiser le référencement de leurs sites sur les moteurs de recherche
  • Adapter l'affichage (Responsive Design) sur les différents appareils mobiles et tablettes


Public

Développeurs et intégrateurs WEB,
Chefs de projets.

Pré-requis

Il est nécessaire d'avoir une expérience pratique du Web.

Type

Stage pratique

Méthode pédagogique

Alternance de présentation magistrale et de travaux pratiques.

Plan de cours

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

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

TRAVAUX PRATIQUES
Créer une première page web avec HTML
L’objectif est de réussir à écrire les bases nécessaires au HTML et d’expérimenter les balises indispensables et leur imbrication.

Création d’une base réutilisable
Afin de gagner du temps, création d’une base HTML qui servira de base à tous les prochains projets

Ajout des styles
Créer une première feuille de style et l’ajouter
Ajouter des styles sur des textes, caractères, blocs et autres balises…

Formulaire
Création d’un formulaire complet avec mise en forme de sections, libellés, différents types de champs et mise en page ergonomique.

Mise en forme et structure
Création d’une grille simple de structure par colonne en float et en flex
Création de modèles simples de pages par sections et colonnes

Page Web complète
Utilisation du système de grille précédemment crée pour la création d’une page web complète structurée

Vers une page responsive
Adaptation de cette page pour du design fluide
Ajout des media queries pour une page responsive
Tests sur différents navigateurs, périphériques et résolutions

Ajoutons des Interactions et animations
Création de transitions et animations  et insertion dans la page

En route pour Internet
Mise en ligne de la page web

Application Web
Intégration d’une mini application web en mode plein écran afin de voir les différences de codage HTML/CSS par rapport à une page standard
Rendre son application responsive


Prochaines sessions

picto Du lundi 03/07 au vendredi 07/07 2017 Paris 2 290 € fleche S’inscrire à la session du lundi 03/07 au mardi 07/07
picto Du lundi 07/08 au vendredi 11/08 2017 Paris 2 290 € fleche S’inscrire à la session du lundi 07/08 au mardi 11/08
picto Du lundi 18/09 au vendredi 22/09 2017 Paris 2 290 € fleche S’inscrire à la session du lundi 18/09 au mardi 22/09
picto Du lundi 09/10 au vendredi 13/10 2017 Paris 2 290 € fleche S’inscrire à la session du lundi 09/10 au mardi 13/10
picto Du lundi 06/11 au vendredi 10/11 2017 Paris 2 290 € fleche S’inscrire à la session du lundi 06/11 au mardi 10/11
picto Du lundi 04/12 au vendredi 08/12 2017 Paris 2 290 € fleche S’inscrire à la session du lundi 04/12 au mardi 08/12
Proposer une session.

Pas de témoignage pour l'instant.

Cher(e) visiteur(euse),
Nous vous remercions pour l'intérêt porté à nos formations. La pré-inscription à une session de formation se fait via le formulaire d'inscription de la page formation.

La Convention de Formation Professionnelle Continue simplifiée vous sera envoyée par mail dans les 72H max. Votre inscription est considérée comme définitive, une fois cette convention signée par votre entreprise ou OPCA. La facture sera émise à l'issue de la formation, comme mentionnée dans nos conditions générales de vente.

A noter que les demandeurs d'emploi peuvent bénéficier d'une remise de 20% sur le prix public.

Pour toute information complémentaire ou demande de devis, n'hésitez pas à nous contacter au 01 53 34 66 10 ou à nous solliciter par mail.

A très bientôt dans l'un de nos centres de formation.
L'équipe Clever-Institut.

Les autres formations « Technologies front-end »  – Voir toutes les formations