AJC FORMATION : 02. HTML5, CSS3, Responsive – Création de pages web
Organisme
75009 PARIS 9Voir toutes ses formationsAutres organismes proposant cette formation
Durée
Modalités
- Classe virtuelle
- Présentiel
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
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