Formation JavaScript, maîtriser les fondements du développement natif Une passerelle vers les frameworks front-end


Formation JavaScript, maîtriser les fondements du développement natif Une passerelle vers les frameworks front-end

Catalogue : Technologies Web



Rappels HTML5, CSS3 et JavaScript
• Le XHTML, le HTML5 et les balises HTML.
• Doctype, viewport, mode quirks.
• Comprendre l'arborescence des différents fichiers : page web, feuilles de style, JavaScript.
• Méthodes de création dynamique d'objets.
• Propagation des événements : capturing, bubbling.
• Gestion des événements : passage de paramètres, this, event.
• Langage CSS 2.1 et 3 : sélecteurs, propriétés et valeurs.
• Structurer les feuilles de style et le rendu graphique.
Faciliter les développements CSS
• Les préprocesseurs SASS et LESS.
• Langages SASS et LESS.
• Variables, interpolation, imbrication des sélecteurs, fichiers partiels.
• Mixins, placeholders, maps, fonctions et boucles.
• Mise en page adaptative, grid layout et flexbox.
• Bootstrap 4 : utilisation et personnalisation.
• Responsive web design, media queries.
Travaux pratiques
Conception d’une feuille de style CSS pour une page responsive design.
HTML/CSS/JavaScript : programmer des interfaces utilisateur avancées
• Manipulation du DOM et ajout dynamique d'éléments.
• Gestion et validation de formulaires, bonnes pratiques.
• Composants, boîtes de dialogue modales, indicateur de scrolling.
• Déplacement vertical doux, date picker universel, slider circulaire.
• Boutons réseaux sociaux et formulaire de connexion avec les réseaux sociaux.
• Effets sur le texte : cutout, ombrage multiple/animé, text clipping.
• Tableaux dynamiques, barres de navigation évoluées.
• Fixed sidebar, fixed menu, effet accordéon, onglets.
Travaux pratiques
Conception d’un jeu en HTML5/CSS3/JavaScript.
Graphiques et animations pour des ergonomies fluides
• Différents formats d'images : GIF, JPG, PNG, SVG.
• Optimisation et réduction du poids.
• Affichage full-screen.
• Fusion de couleurs.
• Effet parallaxe en CSS, transitions, animations et keyframes.
• Effet de loupe, Zoom dans une galerie d'images, carrousel et slideshow.
• Responsive image grid.
• Filtres sur images, spinner/loader et clipping d'images.
Travaux pratiques
Création de diaporamas photos en mode carrousel et slideshow.
Audio et vidéo, 3D et cartographie
• Intégration d'une carte pour visualiser l'emplacement de la société.
• L’API Canvas pour gestion graphique avancée.
• Intégration de vidéos et d'audios dans une page web.
• La 3D avec Three.JS.
• Création et intégration du logo de la société sur les pages.
• Cartographie avec Leaflet et OpenStreetMap.
• Caméra, renderer, géométrie, texture et scène.
Travaux pratiques
Conception d’un logo de société en 3D.
Interfaçage de services web
• Les API utiles pour le développeur : randomuser.me, unsplash.it, placehold.it, googlefonts.
• Principe des services web, API REST.
• La bibliothèque AXIOS.
• L'API REST JSONPlaceHolder.
Travaux pratiques
Consommation de services web via des APIs REST.

 

Fiche de la formation



 Cible :

Développeurs et chefs de projets web, webmasters, webdesigners, graphistes.


 Prérequis :

Connaissances JavaScript de base.


 Durée : 4 jours

 Type : Stage pratique


 Contactez-nous