Intégration Front End : HTML / CSS / jQuery

Apprendre les bases de l'intégration statique avec HTML & CSS & jQuery
Limité à 6 stagiaires - 2 Jours

logo Formation Intégration Front End

Objectifs :

  • Apprendre les fondamentaux de l’intégration Front-end avec HTML5-CSS3.
  • Respecter les standards de conception, la compatibilité navigateurs et les bonnes pratiques.
  • Savoir utiliser jQuery pour les effets d’animations, d’interactions et de transitions.
  • Comprendre les principes et les enjeux du responsive web design.

Pré requis :

Être à l’aise avec l’outil informatique.

Public :

Personne voulant acquérir les bases fondamentales dans l’intégration d’un site internet statique en découvrant les principales balises HTML5, leurs customisations graphiques avec CSS3 puis de leurs animations avec javascript (jQuery).

Exemple : Graphiste / Webdesigner souhaitant acquérir les bons réflexes et fondamentaux pour devenir autonome dans l’intégration de ses maquettes ou mieux comprendre un projet web.

PLAN DE FORMATION : 2 JOURS

Journée 1

1. Introduction

  • Historique
  • Fondements de l'évolution
  • Les standards et la conformité
  • Compatibilité navigateurs
  • Les extensions navigateurs et outils

2. La structure d’un document HTML

  • Comment s’articule une page web ?
  • La sémantique HTML/HTML5
  • Le doctype
  • Structure d'une page web
  • Atelier : Réaliser une structure de page HTML5

3. Les principales balises HTML/HTML5

  • Mise en forme de texte
  • Création de liens hypertextes et cibles
  • Insertion d'images et légende
  • Listes à puces
  • Tableaux : en-têtes, corps, propriétés
  • Formulaires : principe, composants, propriétés, attributs
  • Sons, vidéos
  • Atelier : Ajouter des composants à sa page HTML (texte, images/vidéos, liens, formulaire de contact)

4. Les bonnes pratiques

  • Accessibilité
  • Présentation des enjeux du référencement
  • Optimisation CDN
  • Requêtes et performance de chargement

5. La syntaxe CSS

  • La syntaxe de base : sélecteur, propriété, valeur
  • Définition d'une règle CSS
  • Les commentaires CSS

6. Le principe de base de CSS

  • Types de sélecteurs (Balise, ID, Classe)
  • Pseudo-sélecteurs et pseudo-éléments CSS3
  • Architecture de feuilles de style
  • Politique de style d’un site Internet
  • Atelier : créer un menu déroulant à l’aide des CSS

7. Les principales propriétés CSS

  • Dimensions, margin et padding
  • Les bordures
  • Gestion des couleurs
  • Gestion du texte (typographie, puces, alignements)
  • Les unités de mesures (px, %, em et rem)
  • Les arrières plans
  • Atelier : mettre en forme un article

8. Le positionnement CSS

  • Le modèle de boîte CSS (margin, padding, box-sizing)
  • La propriété display (inline, block, inline-block...)
  • Les éléments flottants (float, clear)
  • La propriété position pour le positionnement CSS (relative, fixed, absolute)
  • Le positionnement multi-colonnes
  • Le modèle de boîte flexible (flexbox)
  • Atelier : créer un menu déroulant à l’aide des CSS

9. Pour aller plus loin

  • Bonne pratique du reset.css
  • Les sélecteurs avancés (css2.1 et css3)
  • Les propriétés décoratives CSS (border-radius, box-shadow, opacity, background-size…)
  • Les transformations, transitions et animations CSS
  • Initiation au Responsive Web Design (media-queries)

Journée 2

10. Introduction à jQuery

  • Fonctionnement et installation de jQuery
  • Bonnes pratiques de JavaScript
  • Modes d'interactions HTML/CSS
  • Notions de performance et optimisation

11. Les sélecteurs jQuery

  • Les sélecteurs CSS
  • Filtres et sélecteurs avancés
  • Règle de chaînage

12. Les principales manipulations HTML et CSS

  • Manipulation de balises HTML et attributs
  • Manipulation des classes, du contenu et des valeurs
  • Remplacement, insertion, copie et suppression d’éléments
  • Interactions avec les propriétés CSS
  • Animations et effets

13. Les plug-in jQuery

  • Recherche de plug-in
  • Installation type d'un plug-in
  • Exemples : lightbox, SmoothScroll, diaporama, effet « parallax »
CE QUE VOUS ALLEZ FAIRE / NE PAS FAIRE

Ce que vous ferez :

  • Coder / Intégrer un site Statique avec une introduction au responsive web.
  • Comprendre la Philosophie d’un site web : « Séparation du contenu de la forme » avec les principales balises HTML & CSS (balises HTML5 et règles CSS3 incluses).
  • Créer de petites animations avec le framework javascript jQuery en codant (ou adaptant des scripts existants) très facilement.

Ce que vous ne ferez pas :

  • Apprendre tout l’univers HTML et CSS : seules les balises et les règles les plus usuelles seront abordées (vous deviendrez autonome pour utiliser et découvrir les autres balises)
  • Javascript avancé (Ajax, requêtes back-end). JQuery sera principalement utilisé pour l’animation d’éléments avec une seule ligne de code ou avec un plugin déjà existant
  • Le design web, le développement PHP et/ou l’utilisation de CMS comme Wordpress ne sont pas prévus dans le programme de formation.
DURÉE ET LIEU

Horaires :

De 9h30 à 17h30 avec une pause déjeuner de 12h30 à 13h30
soit 7 heures de formation par jour.

Lieu de formation :

Nos formations se déroulent en plein centre historique de la belle ville de Nantes à La Rosière.
la Rosière d'Artois - 35 Rue de la Rosière d'Artois - 44100 Nantes.

Petit déjeuner & Repas gourmand du midi inclus.
6 Stagiaires maximum par session

DATES ET TARIF

Les prochaines dates de formation :

  • 23 et 24 Mars
  • 14 et 15 Juin
  • 26 et 27 Octobre

Le tarif de la formation :

  • 950€ HT pour les 2 jours de formations.

Petit déjeuner & Repas gourmand de midi inclus.
6 Stagiaires maximum par session

Contacter Marine pour toute demande d'inscription ou d'informations complémentaires.

FORMATION INTRA-ENTREPRISE

Nos formateurs peuvent également se déplacer dans vos locaux. En fonction de vos besoins, nous vous accompagnons dans votre démarche.

Consultez Marine pour plus d’informations !

FINANCEMENTS

Vous souhaitez connaitre les possibilités de financement de votre formation ?

Financement Formation Professionelle
Manuel Pinard - Bar à Formations

"Passionné par le monde numérique, j'ai la conviction que l'épanouissement professionnel se base sur le partage des connaissances. Depuis 2009 je me suis spécialisé dans l'intégration web et la veille technologique. Je me démarque par mon approche pluridisciplinaire. J'ai fait de la veille mon atout stratégique et différenciant pour booster vos activités !"

Manuel Pinard, formateur