Formation Intergrateur Web

HTML

Partie 1 – La syntaxe

1. Introduction et Historique
2. Structure minimale d’une page web
3. Les outils

Partie 2 – Les éléments principaux

1. Le Doctype
2. La balise HTML
3. La balise HEAD
   1. La balise TITLE
   2. La balise META
4. La balise BODY

Partie 3 – Les balises de types Inline et Block

1. Les balises de types Block
   1. Les balises génériques
   2. Les balises sémantiques
   3. Les balises text, list, form, table et multimedia
2. Les balises de types Inline

Partie 4 – Les attributs, les tableaux et formulaire

1. Les attributs
2. Les tableaux
3. Les formulaires

Partie 5 – Notions de SEO, W3C et Emmet

1. HTML et le référencement naturel
2. Standard W3C
3. Emmet pour le HTML

CSS – 1ère PARTIE

Partie 1 – La syntaxe

1. Introduction et Historique du CSS
2. Structure de base
3. L’analyse de la page par un navigateur
4. Les sélecteurs de base
5. Propriété
6. Emplacement des règles
7. Les bonnes pratiques

Partie 2 – texte, fond, effets graphiques

1. Mise en forme du texte
2. Arrière-plan
3. Les effets graphiques

Partie 3 – Le modèle de boîtes CSS

1. Modèles de boîtes
2. Dimensions
3. Bordures
4. Marges
5. Affichage

Partie 4 – Positionnement

1. Positionnement
2. Flottement
3. Alignement

Partie 5 – Le Responsive Web Design

1. Adapter la page au support
2. Modifier les éléments en fonction du support
3. Vérifier l’adaptabilité d’une page dans un navigateur

CSS – 2ème PARTIE

Partie 6 – Les FlexBox et Grid

1. Positionnement des FlexBox
2. Positionnement du Grid

Partie 7 – Sélecteurs avancés

1. Sélecteur universel
2. Sélecteurs d’éléments filiaux et adjacents
3. Sélecteurs d’attributs
4. Pseudo-classes
5. Pseudo-éléments
6. Pseudo-parent
7. Racine, variable, calculs

Partie 8 – Les features queries, règles des couches, impression

1. Les features queries
2. Les règles des couches
3. L’impression

Partie 9 – Propriétés visuelles, Transitions et Transformations

1. Propriétés visuelles
2. Transitions
3. Transformations

Partie 10 – Les animations CSS

1. Principes de base
2. Une animation simple

JavaScript

Partie 1: Premiers pas en JS

1. L’histoire du JavaScript
2. Les bases du langage
3. L’outil console
4. Où placer son code Javascript ?
5. Les commentaires
6. L’utilitaire snippet

Partie 2 – Les variables

1. Définir ce qu’est une variable
2. Déclarer et initialiser une variable
3. Concaténation et caractères d’échappement
4. Ecrire plusieurs variables sur une ligne
5. Passer à la ligne
6. Importance de l’ordre

Partie 3: Les types et méthodes de chaînes de caractères

1. Les différents types
2. Vérifier le type d’une variable
3. Les modèles de libellé
4. Conversions de type
5. Méthodes et propriétés utiles pour les chaînes de caractères

Partie 4: Les opérateurs de calcul et fonctions

1. Les opérateurs de calcul
2. Les méthodes sur les nombres
3. Définir ce qu’est une fonction
4. Déclarer et appeler une fonction
5. Utiliser une fonction pour retourner une valeur return
6. Ecrire une fonction avec un paramètre
7. Ecrire une fonction avec plusieurs paramètres
8. Combiner des fonctions
9. Appel incomplet à une fonction
10. Donner une valeur par défaut à un paramètre
11. Créer une fonction sans paramètre (anonyme)
12. Fonctions natives JavaScript
13. Notions de hissage hoisting

JavaScript – POO

Partie 1: Vision d’ensemble des classes

1. Histoire de la POO.
2. Le mécanisme des classes.
3. Définition des propriétés et méthodes public, private.
4. Création de classe Template.
5. Comprendre le mécanisme de prototype, __proto__.
6. Objet et typage des objets TypeOf, instanceOf.

Partie 2: Constructeur et propriétés

1. Comprendre les mécanismes de constructeur.
2. Constructeur basé sur Object.create.
3. Constructeur literal.
4. Principe de scope safe.
5. Création par singleton, pattern.
6. Méthodes de création des propriétés, portée (private, public, static) des propriétés.
7. Portée des méthodes, mécanismes de polymorphisme.
8. Préserver et gérer le Context this..

Partie 3: Les concepts d’héritage

Comprendre les mécanismes d’héritage en JavaScript.

1. Héritage simple, multiple.
2. Héritage par prototype.
3. Travaux pratiques
4. Création d’une classe héritée simple avec et sans les prototypes.

Partie 4: Comprendre le type Object

1. Création Object literal, avec un constructeur.
2. Création de propriétés et méthodes.
3. Duplication d’objet par valeur, référence.
4. Gestion du context this avec Object.apply et Object.call.
5. Démystifier les propriétés de Object.
6. Modules : Object, AMD.

Partie 5: Mécanismes JavaSript avancés

1. Déclaration des variables, typage, nomenclature, accès au DOM.
2. Comprendre le mécanisme de Hoisting.
3. Promises et la Programmation asynchrone.
4. Echange Ajax d’objets structurés et serialization de multiples formats (texte, image, JSON).
5. Création d’un Namespace static, Namespace objet, module pattern, namespace proxy.
6. Fonctions anonymes, closures.
7. Comprendre les principes du callback.

Bootstrap

Module 1: Introduction à Bootstrap

• 1.1 Présentation de Bootstrap
  • • Historique et objectifs
    • Avantages de l’utilisation de Bootstrap
• 1.2 Installation et configuration
• • • Téléchargement et installation
    • Intégration dans un projet web

Module 2: Les bases de Bootstrap

• 2.1 La grille (Grid System)
  • • Comprendre le système de grille de Bootstrap
    • Création de mises en page responsives
• 2.2 Composants de base
• • • Utilisation des classes de typographie
    • Boutons et formulaires Bootstrap
    • Images réactives et icônes

Module 3: Les composants avancés

• 3.1 Navigation
  • • Barres de navigation
    • Menu déroulant et onglets
• 3.2 Composants de mise en page
• • • Panneaux
    • Modaux
    • Accordéons

Module 4: Personnalisation et extensions

• 4.1 Personnalisation du thème
  • • Utilisation du générateur de thèmes Bootstrap
    • Personnalisation des styles
• 4.2 Extensions JavaScript
• • • Utilisation des plugins JavaScript de Bootstrap
    • Intégration de fonctionnalités avancées

Module 5: Projets pratiques

• 5.1 Projet 1: Site Web Personnel
  • • Création d’une page personnelle utilisant la grille et les composants de base de Bootstrap
• 5.2 Projet 2: Application Web Responsive
• • • Développement d’une application web responsive en utilisant les composants avancés de Bootstrap