A l’issue de la formation, l’apprenant sera capable de maîtriser le javascript, comprendre les concepts fondamentaux de React.js, Redux et Node.js.
- Développement
- Développement web
Formation Développement d’applications Web Front End
Objectifs
Prérequis
Un entretien en amont avec notre expert permet de prendre en compte le profil de chaque participant (niveau, objectifs et résultats attendus, contexte professionnel, enjeux…) et d’adapter le contenu de la formation si besoin.
Cette formation ne peut être financée que dans le cadre d’un projet d’entreprise (prise en charge entreprise ou OPCO). Les dossiers à financement personnel et CPF ne sont pas pris en compte.
Public
Concepteurs-Développeurs
Intégrateurs Web
Dernière mise à jour
Bon à savoir
Evaluez votre niveau
Formations modulables
Travaux pratiques
Les Modules
de formation
Introduction
Zones de saisie basiques
Méthode GET ou POST
Améliorer la saisie
Principales balises du formulaire
Valider un formulaire
Attributs de la liste déroulante
Attributs globaux HTML
Evénements de la fenêtre
Evénements du formulaire
Evénements du clavier
Evénement de la souris
Evénements liés au presse-papiers
Evénements des médias
Evénements divers
Démonstration : Formulaire HTML
Travaux pratiques : Créer un formulaire HTML
Quiz – QCM de validation des acquis
Présentation de jQuery
Ecosystème jQuery
Fonction jQuery
Installation de jQuery
La méthode ready
Les différents modes de sélection
Modifier le DOM
Evénements
Démonstration : Utilisation de jQuery
Travaux pratiques : Fonctionnalités jQuery sur l’application My Music
Quiz – QCM de validation des acquis
La balise audio
Le format mp3
Le format Ogg Vorbis
Le format Wav
Le format AAC
La compatibilité des formats audio
La balise video
Le format H.264 MPEG-4
Le format OGG
Le format H.265 MPEG-4
Le format WebM
La compatibilité des formats vidéo
Démonstrations :
La balise audio
La balise video
Quiz – QCM de validation des acquis
Maquetter une page
L’historique d’HTML
Les balises, attributs et règles d’HTML
Les premières balises
Les éléments HTML4 obsolètes
Doctype : simplification HTML5
La balise html
La balise head
La balise title
La balise meta
L’encodage des caractères
La balise body
Placer du texte sur une page HTML
Les commentaires
Les liens
La validation du code HTML
La mise en page à l’aide d’éléments conteneurs
Les images
Les couleurs
Les nouveautés HTML5
La balise header
La balise nav
La balise section
La balise aside
La balise article
La balise footer
Les avantages des nouvelles balises
Les nouvelles balises sémantiques
Les nouveaux attributs
Tester la compatibilité des balises suivant le navigateur
Bien coder
Démonstrations :
Maquetter une page
Les principales balises HTML
Travaux pratiques :
Zoning
Biographie
Quiz – QCM de validation des acquis
Respecter le Doctype HTML 5
Fermer les balises
Indiquer l’URL canonique
Définir le cache
Définir les emplacements pour le JavaScript
Respecter la sémantique
Respecter la hiérarchie des titres
Influencer le référencement
Bien choisir le texte d’un lien
Utiliser l’attribut nofollow
Mettre un attribut alt à chaque balise d’image
Préciser la taille des images
Utiliser la balise time
Limiter le nombre de balises div
Préférer les feuilles de style CSS aux attributs style
Utiliser l’attribut id
Limiter et combiner les fichiers du même type
Limiter le nombre de connexions à d’autres domaines
Assurer la compatibilité avec Internet Explorer
Tester le rendu final
C’est quoi le Web ?
Comprendre les expressions du Web
Le W3C
Historique et usage d’Internet en France
Différence entre page Web statique et dynamique
Rôle du client et du serveur
Définition des principaux éléments d’un site Web
Quelques chiffres Internet
Premier site Web
Dates clés du Web
Protocole HTTP
Clients légers : navigateurs et moteurs de rendu
Quelques chiffres sur les navigateurs
Avantages et inconvénients du client léger
Choix des navigateurs
Démonstrations :
Installation des outils pour les navigateurs
Installation d’un outil de développement
Quiz – QCM de validation des acquis
Définition
Les règles de base
Les sélecteurs
Les modes de sélection
Cascade et héritage des propriétés
Le positionnement des éléments
La typographie et le texte
Les Web fonts
Les listes
Les arrière-plans
Les liens hypertextes et les pseudo-éléments
Les propriétés des boîtes
Les tableaux
Les bordures
La mise en page
La version CSS3
Les bords arrondis (CSS3)
Les ombres (CSS3)
La gestion du texte (CSS3)
Les arrière-plans multiples (CSS3)
Les dégradés de couleurs (CSS3)
Les transformations (CSS3)
Les transitions (CSS3)
Les animations (CSS3)
Les transformations 3D (CSS3)
Démonstrations :
Intégrer des Web fonts avec Font Squirrel
Intégrer des Web fonts avec Google Font Web
Travaux pratiques :
Biographie avec les balises CSS
Mettre en forme un formulaire HTML
Quiz – QCM de validation des acquis
Utilité et définition d’un framework
Présentation de Bootstrap
Fonctionnement de Bootstrap
Points forts de Bootstrap
Le fichier normalize.css
Evolutions de Bootstrap
Le conteneur
Dossiers d’installation de Bootstrap
Installation de Bootstrap
Minification des fichiers
Utilisation de Bootstrap
Eléments Bootstrap
Compatibilité avec les navigateurs
Scripts JavaScript à ajouter
Le code Bootstrap en résumé
Présentation du système de grille
Optimisation du système de grille
Penser Mobile First
Thèmes et documentations Bootstrap
Présentation des éléments
Eléments de la catégorie CSS
Eléments de la catégorie Composant
Eléments de la catégorie JavaScript
Amélioration des interfaces
Les fenêtres modales
Personnalisation de Bootstrap
Jumbotron
Démonstrations :
Installation de Bootstrap
Système de grille
Offset Bootstrap
Personnaliser Bootstrap avec les CSS
Travaux pratiques : Application My Music
Quiz – QCM de validation des acquis
Historique
Les bases du langage JavaScript
Les tableaux
La commande console
Les opérateurs
Les différents tests d’égalité
Les fonctions
Les événements
La programmation orientée objet
La création d’une classe
La mise en œuvre de l’héritage
Démonstrations :
La console JavaScript
Modification du DOM
Travaux pratiques :
Le jeu du pendu
Fonctionnalités JavaScript sur l’application My Music
Quiz – QCM de validation des acquis