HTML5 CSS3 et BOOSTRAP, les bases

Qualités requises

• Toute personne souhaitant concevoir un site web.
• Etre autonome sur un poste informatique.

Compétences développées

A l’issue de la formation, les stagiaires seront capables de :

• Coder des pages en HTML5
• Utiliser des feuilles de styles CSS3
• Installer un template responsive framework BOOTSTRAP
• Faire l’intégration de pages web

Points Forts

Notre formation intègre un dispositif pédagogique d’E-Learning

• la plateforme de Blended Learning (allie cours à distance, tutoriels, exercices et QCM en ligne avec Scoring),
• une expérience complémentaire en adéquation avec la formation en présentiel,
• permet d’approfondir et de compléter ses connaissances logicielles,
• un accès de 1 mois à la plateforme pour continuer à effectuer la totalité des cours et exercices en ligne.

Programme

• Introduction à HTML 5 et CSS3 :

Contexte : fonctionnement d’un site internet / Les normes du W3C / Les changements avec HTML 5 / Roadmap HTML 5 / Quand choisir le HTML 5 

•  Utiliser le HTML 5 avec des navigateurs qui ne le supportent pas :

Disparition des notions «en ligne» et «bloc» / Doctype, NameSpace, Encoding / Les nouveaux éléments : section, article, aside, nav, pour entêtes, pied de pages / Les indispensables balises telles que menu, command, details, summary / La compatibilité entre les navigateurs

•  Optimisation des balises pour les moteurs de recherche :

Les formulaires HTML 5 / Balise form / Créer et utiliser des formulaires HTML 5 / Email, url, date / Les validations de formulaire en HTML5

• L’Audio et la Vidéo en HTML 5 :

Les conteneurs / Contrôler la vidéo, l’audio / Support et formats (WebM, MP4, H.264, Ogg Theora, MP3, AAC, Vorbis) / Gérer plusieurs sources vidéos et audios / Sous-titres et vidéo HTML5

•  Dessiner avec HTML 5 :

Dessiner en JavaScript / Contexte / Accessibilité

•  La géo-localisation avec HTML 5 :

Vue d’ensemble / La vie privée de l’utilisateur / Géolocaliser ses utilisateurs sur Google Maps

•  CSS3 :

Ce que ça change / Coins arrondis / Ombres portées / Transparence / Mise en page et positionnement / Autres propriétés / Gestion des éléments de formulaire via CSS : enabled, disabled, valid, required, optionnal / Intégrer ses propres polices / Mise en page multi-colonnes / Media Queries CSS3 pour créer des sites Web plus réactifs / Responsive design – Feuille de style CSS multi-écran pour ordinateur, mobile et tablette

•  La mise en page et le positionnement :

Niveau de présentation / Mise en page par patron ou multi-colonne / Mise en page par boite horizontales ou verticales / Positionnement par la grille

•  CSS3 : Les animations

Transformations (2D et 3D) / Transitions / L’animation

•  Vue d’ensemble de Bootstrap :

Présentation du framework Bootstrap / Pourquoi Bootstrap ? /Bootstrap et le responsive design /Bootstrap et le frameworks javascript : JQuery

• Inclure Bootstrap dans un projet :

Architecture Bootstrap / Des composants basés sur des classes CSS / Les templates de base / Doctype HTML5 / Le système de grille pour positionnement : Grille fixe et élastique / Les layouts / Le responsive Design

•  Les classes CSS de base avec Bootstrap :

Typographie / Les tableaux / Les formulaires / Les boutons / Les images / Les icones / Vignettage 

• Les composants Bootstrap :

Menus déroulants / Groupement de boutons / Barres de navigation / Fil d’arianne / Alertes / Barre de progression / Pagination / Classes diverses

•  Manipuler Bootstrap en Javascript via jquery :

Les transitions / Gérer les fenêtres modals (type lightbox) / Menus déroulants / Créer des tabulations / Mettre en place des aides / Le caroussel de photos

•  Graphisme :

S’approprier Bootstrap graphiquement / Ajouter, gérer son proper css / Surécriture de css

Débouchés et suites de parcours

• Webdesigner/Intégrateur Web
• Poursuivre en formation Designer Web (TP Niveau III)
• Poursuivre en formation Webdesigner (CCP)
• Poursuivre en formation Community Manager TP (Niveau II)