Aller au contenu principal

AJC FORMATION : 02. HTML5, CSS3, Responsive – Création de pages web

Durée

21 heures

Modalités

Formation
  • Classe virtuelle
  • Présentiel
Évaluation

Les participants réalisent tout au long des exercices, QCM et/ou cas pratiques. En fin de formation, les acquis sont vérifiés

Prix

Inter
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
926.1€ HT / personne
Intra
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
4788€ 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é

Introduction à HTML

  • Fonctionnement d' un site Web
  • Présentation du langage HTML
  • Structure d'un document HTML
  • Le doctype
  • Balises Meta
  • Positionnement de HTML par rapport à CSS
  • Choix d'un éditeur de Texte

Travaux pratiques : Mise en place d'une page simple via un éditeur de texte

 

Les balises de base

  •  Syntaxe des balises 
  •  Les balises à contenu et les balises vides
  •  Les attributs de balise
  •  Les balises de titre
  •  Les balises de structure
  •  Les liens
  •  Les images
  •  Les listes
  •  Les tableaux

Travaux pratiques : Création d'une page simple (Titres, Paragraphes, image, liens), Création d'une page présentant les films 

 

Les formulaires

  •  Les inputs du formulaire
  •  Principe d'envoi des formulaires
  •  Les différents éléments du formulaire

Travaux pratiques : Création d'un formulaire de création de compte client

 

Les nouveautés HTML5

  •  Les nouvelles balises de structure
  •  Les nouveaux inputs de formulaire
  •  Validation native des formulaires
  •  Ajouter du son et des vidéos
  •  Le canvas
  •  Le format SVG

Travaux pratiques : Adaptation avec de nouveaux inputs dans le précédent formulaire

 

Présentation de CSS

  •  Utilité des feuilles de style
  •  Où écrire le CSS ?
  •  Syntaxe de base
  • Principe de fichiers tels que reset.css ou normalize.css

 

Les sélecteurs

  • Quelques propriétés de base
  • Les couleurs (RGB, HSL, HEX)

Travaux pratiques : Ajout de styles dans la page créée par les balises de base

 

Structure et positionnement des éléments

  •  Les éléments block, inline
  •  Marges et bordures
  •  Le positionnement dans le flux
  •  Position relative et absolue
  •  Autres positions

Travaux pratiques : Création d'un gabarit

 

Les nouveautés CSS3

  •  Les nouveaux sélecteurs
  •  Créer des dégradés
  •  Les bordures arrondies
  •  Les effets de texte
  •  Les transitions
  •  Les animations
  •  Le positionnement en grille
  •  Le positionnement Flexbox

Travaux pratiques : Adaptation du précédent gabarit, ajout de différents effets 

 

Introduction au Responsive Web Design

  •  Les modes du web
  •  Compatibilité des navigateurs
  •  Part de marché des navigateurs
  •  Le marché mobile
  •  La nécessité du Responsive Design
  •  Les différents types de terminaux
  • Les limites du Responsive Design

Travaux pratiques : Présentation d'outils de Test d'un site responsive

 

Application du Responsive Web Design

  • Une solution basée sur HTML et CSS
  •  Adaptation des contenus visuels (images, icônes, polices, …)
  •  Adaptation du positionnement
  •  Adaptation de la navigation
  • Les différentes unités de mesure
  • Principe de Grille

 

Les Media Queries et propriétés CSS

  • Approche portrait/paysage, tactile, impact sur l'ergonomie
  •  Règles conditionnelles (orientation, device-width...)
  •  Réglage complémentaire de rendu visuel (Viewport)
  •  Eviter les débordements. Points de rupture

Travaux pratiques : Faire évoluer le gabarit à l'aide des Media Queries 

 

 

 

 

 

Sessions

Filtrer les 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
Les compétences professionnelles visées par la formation sont validées via un test permettant d’obtenir une certification officielle.
Ces sessions ne peuvent être ni annulées ni reportées par l’organisme de formation.