CURSUS COMPLET

Développement front-end

Cette formation est destinée à faire de vous quelqu’un d’autonome dans le développement front-end, c’est à dire que vous serez en mesure de gérer la partie visible des sites web, sans en gérer les fonctionnalités back-end (connexion à la base de données, etc.).

Nous y voyons le HTML5 / CSS3, permettant de gérer le contenu et l’aspect de la page, ainsi que javascript, qui permet de rendre vos pages plus ergonomiques et dynamiques, en les modifiant lors d’évènements (clics, survols, etc.). Nous abordons ensuite jQuery, framework javascript permettant de coder plus efficacement et d’utiliser de nombreux plugins (diaporama, éléments avancés de formulaires, etc.).

Durée : 5 jours, soit 35 heures, modulables

Dates : sur demande

Lieu : formation dans vos locaux, ou les nôtres (vieux lyon)

Public & prérequis : toute personne souhaitant être autonome dans le développement front-end, formation qui ne requiert aucune connaissance en programmation.

Objectif : acquérir une autonomie dans le développement front-end : savoir développer en HTML / CSS, augmenter les interactions, l'ergonomie, et le dynamisme d'une page avec javascript, et accélérer son développement avec jQuery.

Tarif standard: 2500 € H.T.
Intra-entreprises : 600 € H.T./jour pour 1 pers. + 75€/jour par pers. sup.
Tarifs modulables en personnalisant la formation : nous contacter.

Programme (adaptable)

Résumé du programme :

  1. HTML5 / CSS3 – 2 jours
  2. Javascript –2 jours
  3. jQuery – 1 jour

 

1. HTML5 / CSS3 – 2 jours

  1. Introduction
    • différence HTML / CSS
    • historique et évolution du HTML et du CSS
    • conséquences de l’arrivée du HTML5 et du CSS3
  2. Contenu simple HTML
    • structure minimaliste d’une page
    • éléments textuels
    • liens
    • listes
    • tableaux
    • fenêtres
    • images
    • blocs
  3. Les styles CSS
    • lier HTML et CSS
    • structure CSS
    • sélecteurs et pseudo-classes
    • couleurs
    • propriétés communes
    • fonds
    • textes, polices, et multi-colonnes
    • ombres
    • bordures
    • transparence
    • dégradés
    • positionnements
    • compatibilité
  4. Mise en page
    • contenu sémantique
    • outline
    • types de contenus
    • process pour faire un site
  5. Gérer les médias
    • intégrer des vidéos
    • intégrer des sons
    • intégrer des images SVG
  6. Gérer les formulaires
    • les divers éléments de formulaires
    • validation des formulaires avec HTML5
  7. Animations simples et transistions CSS3
    • transitions simples CSS
    • transformations CSS
  8. Outils pour le responsive design
    • le responsive design
    • viewport
    • mediaqueries
    • positionnement par grille
  9. Présentation simple des possibilités liées aux APIs javascript
    • contrôle audio / vidéo
    • site web hors ligne
    • glisser / déposer
    • stockage local
    • stockage session
    • dessin 2D sur canvas
    • géolocalisation

 

2 – Javascript – 2 jours

  1. Présentation de javascript
    • les langages web et la place de javascript
    • caractéristiques de javascript
  2. Le langage javascript
    • où mettre son code ?
    • premières instructions
    • variables
    • opérateurs
    • structures de contrôle
    • boucles
    • fonctions
    • POO simple en javascript
    • quelques objets javascript (Date, Math, etc.)
  3. Manipuler le DOM
    • qu’est-ce que le DOM ?
    • compatibilité des navigateurs
    • quelques objets du DOM
    • noeuds du DOM : ajouts, suppressions, modifications
  4. Réagir aux événements
    • programmer des écouteurs
    • les différents événements : souris, clavier, formulaires…
  5. Utiliser les styles
    • rappels CSS
    • modifier l’id, la classe d’un élément
    • modifier les styles d’un élément
  6. Gérer les formulaires
    • manipuler les éléments de formulaires
    • valider un formulaire
  7. Introduction à jQuery
    • présentation de jQuery
    • installation
    • sélections de noeuds
    • modifications de noeuds
    • ajout / suppression de noeuds
    • réagir à des événements
    • faire de l’AJAX avec jQuery et PHP
    • présenation de jQuery UI

 

3 – jQuery – 1 jour

  1. Introduction à jQuery
    • présentation et avantages de jQuery
    • concurrents
    • le monde de jQuery
    • mise en place
  2. Les sélecteurs
    • sélection directe
    • sélection indirecte
    • sélection par attribut
    • sélections multiples
    • sélections par position
    • filtres
    • boucles
  3. L’arbre DOM
    • qu’est-ce que le DOM ?
    • modification d’attributs d’un noeud
    • modification des styles d’un noeud
    • modification du contenu html d’un noeud
    • création d’un noeud
    • insertion d’un noeud
    • remplacement d’un noeud
    • suppression d’un noeud
  4. Les événements
    • programmer des écouteurs avec jQuery
    • les différents événements : souris, clavier, formulaires…
  5. AJAX
    • principe d’AJAX
    • mise en oeuvre d’AJAX avec jQuery
  6. Effets visuels et interface jQuery
    • animations simples d’éléments
    • présentation de jQuery UI
    • mise en place de jQuery UI
    • tests d’interations, widgets, et effets
    • personnalisation de jQuery UI

Moyens pédagogiques, techniques, et d’encadrement
Support de formation remis au stagiaire.
Séances en salle, mise à disposition d’un ordinateur si souhaité ou utilisation de l’ordinateur personnel du stagiaire.
Formation basée sur la pratique, comportant un grand exercice fil rouge, ainsi que de nombreux tests.
La formation sera assurée par Alexandre Beaugrand, développeur web avec plus de 15 ans d’expérience.

Suivi, évaluation et attestation
En plus des exercices pratiques, des points réguliers ponctueront la formation : questions orales, reprises de certains points si nécessaire.
Le contact du formateur sera communiqué pour d’éventuelles questions post-formation.
Le formation nécessite la signature d’une feuille de présence ainsi que la le remplissage d’une feuille d’évaluation par stagiaire.
A la fin de la formation, le stagiaire se verra remis une attestation de fin de formation.