Aller au contenu principal
Afficher le fil d'ariane

PLB CONSULTANT : 02. HTML5, CSS3, Responsive – Création de pages web

Organisme

PLB CONSULTANT
3-5 RUE MAURICE RAVEL
92300 LEVALLOIS PERRET
Voir toutes ses formationsAutres organismes proposant cette formation

Durée

21 heures

Modalités

Formation

  • Classe virtuelle
  • Présentiel

Évaluation

Travaux pratiques. Auto-évaluation en début et en fin de formation.

Prix

Inter
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
840€ HT / personne
Intra
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
3360€ HT / groupe
4 stagiaires minimum

Public

Développeurs, concepteurs web, chefs de projets…

Pré-requis

- Avoir des connaissances internet standard.

- Une expérience pratique du web est souhaitable

Objectifs pédagogiques

- Concevoir et développer des applications Web en HTML5 et CSS3 

- Mettre en place et valider la structure HTML 5 des pages Web 

- Habiller des pages Web en CSS 3 afin de les rendre plus attractives

- Savoir produire des pages compatibles avec les différents navigateurs internet 

- Rendre responsive design les pages Web d'un site 

- Créer des images et des animations vectorielles


Programme détaillé

 

Les bases du web

Fonctionnement d’un échange entre navigateur et serveur

Les protocoles http et https

Les navigateurs web

Présentation des différents langages web

Les logiciels pour coder et mettre en ligne

L’inspecteur de code

Ressources web utiles

 

Le HTML 5

Qu’est-ce que le HTML et quel est son rôle

Que sont les balises ?

Structure de base d’un document (Doctype, head, body)

Comment écrire son premier document HTML

Les balises principales (liens, images, tableaux, blocs, paragraphes, listes…)

Hiérarchie et imbrication des éléments, parents / enfants, tabulations

Nouvelles normes HTML5 d’écriture

Travaux pratiques

Créer une première page web avec HTML 

L’objectif est de réussir à écrire les bases nécessaires au HTML et d’expérimenter les balises indispensables et leur imbrication.

Création d’une base réutilisable 

Afin de gagner du temps, création d’une base HTML qui servira de base à tous les prochains projets

 

CSS 3

Qu’est-ce que le CSS ?

HTML, CSS : le fond/ la forme

Rôle du CSS

Lier une feuille de style à une page HTML

Arborescence de projets web, structure des dossiers standards

Principe de base : sélecteurs, propriétés, valeur

Principales propriétés CSS

Mise en forme du texte, paragraphes et caractères

Nommer ses styles : classes, identifiants

Les sélecteurs CSS

Quelques sélecteurs CSS avancés

Nouvelles propriétés CSS3

Nouvelles syntaxes CSS3

Pseudo classes

Préfixes et compatibilité

Travaux pratiques

Ajout des styles 

Créer une première feuille de style et l’ajouter

Ajouter des styles sur des textes, caractères, blocs et autres balises…

 

Structurer une page avec HTML et CSS

Les blocs et divisions

Le modèle de boite CSS

Positionnement (statique, absolu, fixe)

Principaux modes de positionnement :

Principe de positionnement

Protection des conteneurs

Positionnement gauche/droite des images

Positionnement de blocs

Structurer une page en colonnes

 

Flexbox

Principe moderne

Compatibilité des navigateurs

Bases et box-sizing

Les conteneurs et les éléments

Possibilités de positionnement

Structurer une page simple avec des colonnes

Comparatif Float / Flex

Grille simple de mise en page Float et Flex

Travaux pratiques

Mise en forme et structure 

Création d’une grille simple de structure par colonne en float et en flex

Création de modèles simples de pages par sections et colonnes

 

Formulaires

Éléments et fonctionnement d’un formulaire

Méthodes d’envoi et traitement

Les champs de formulaire

Nouveaux types de champs HTML5

Travaux pratiques

Formulaire 

Création d’un formulaire complet avec mise en forme de sections, libellés, différents types de champs et mise en page ergonomique

 

Graphisme avancé

Polices de caractères personnalisées

Couleurs avancées et dégradés

Ombres et opacité

Bordures et arrière-plans avancés

 

Compatibilité des technologies

Tester la compatibilité du navigateur

Comment connaître la compatibilité d’une technologie

 

Outils, méthodes d’optimisation, et bonnes pratiques

Contrôler la compatibilité des technologies (canIuse)

Écriture de code avec auto complétion avec Emmet

Outils d’analyse de performance avec Google Speed

Optimisation des images

Qu’est-ce qu’un CDN

Faire de la veille : bénéfices, outils

 

Les Frameworks CSS

Normaliser les styles de base avec Normalize.css

Une base saine avec HTML5 Boilerplate

Approche de twitter Bootstrap et Foundation

Travaux pratiques

Utilisons des CSS Grid  

Création de blocs de présentation flexibles afin de bien comprendre la puissance des grilles CSS par rapport aux tableaux traditionnels

 

Responsive Web Design

Introduction au RWD, enjeux, état des lieux

Principe de base

Mise en place des bases code

Un design fluide

Les media queries

Créer une grille responsive

Conception de structure fluide

Coupures avec les media queries et les breakpoints

Tests sur navigateurs et mobile en temps réel

Travaux pratiques

Page Web complète 

Utilisation du système de grille précédemment crée pour la création d’une page web complète structurée

Vers une page responsive 

Adaptation de cette page pour du design fluide

Ajout des media queries pour une page responsive

Tests sur différents navigateurs, périphériques et résolutions

 

HTML/CSS avancé

Animations et transformations

Transformations de base (rotation, translation, etc.)

Transformations 3D (perspective)

Transitions : changement progressif d'un style

Animations autonomes

Travaux pratiques

Ajoutons des Interactions et animations 

Création de transitions et animations et insertion dans la page

Vectoriel

Utilisation d’images vectorielles SVG

Nouvelles balises audio/video

Balise audio et options

Balises vidéo et options

Formats pris en charge

Techniques

Notation BEM

CSS Orienté Objet

Code maintenable

 

Mise en ligne

Transfert des fichiers via FTP

Configuration de son hébergement

Travaux pratiques

En route pour Internet 

Mise en ligne de la page web

Application Web 

Intégration d’une mini application web en mode plein écran afin de voir les différences de codage HTML/CSS par rapport à une page standard

Rendre son application responsive

Sessions

Filtrer les résultats

46 résultats

Modalités pédagogiques
Formation synchrone se déroulant avec la présence physique du (des) formateur(s) et du (des) apprenant(s) réunis dans un même lieu de formation.
Formation combinant des séquences en présentiel et des séquences à distance synchrones ou asynchrones.
Formation à distance, asynchrone, s’appuyant sur une plateforme d’apprentissage, pouvant être complétée par d’autres modalités de formation à distance (visio-conférence…)
Formation à distance, synchrone, s’appuyant sur un dispositif de visio-conférence. La classe virtuelle recrée à distance les conditions d’une formation en salle traditionnelle.
Type de formation
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
Options
Ces sessions ne peuvent être ni annulées ni reportées par l’organisme de formation.

0 résultat