Formation HTML5, CSS3, Responsive - Création de pages web Créer des sites web dynamiques et responsives avec HTML5, CSS3 et CSS Grid

4.7 sur 5 étoiles

5 étoiles
72%
4 étoiles
28%
3 étoiles
0%
2 étoiles
0%
1 étoile
0%
Voir les 25 avis
(25 avis)
Durée 3 jours
Niveau Fondamental
Classe à distance
Possible

Vous pouvez suivre cette formation en direct depuis votre domicile ou votre lieu de travail. Plus d'informations sur notre solution de classe à distance...

Référence IHTS
Éligible CPF Non

Cette formation HTML CSS est destinée à toute personne souhaitant maîtriser la conception de sites Internet et d’applications web modernes tirant parti de toutes les nouvelles spécifications et technologies apportées par le Web d’aujourd’hui.

Le HTML est un langage texte qui permet de décrire le contenu d’une page web grâce à des balises (structure du document, données, images, formulaire, programme, etc.) Les feuilles de style CSS permettent d’en définir la présentation. L’idée de fond est de ne pas mélanger les données et leur visualisation pour faciliter la mise en place d’un site et son évolution.

Indépendamment de la complexité des architectures, les langages HTML et CSS demeurent des standards depuis des années. Les nouvelles versions du HTML5 et du CSS3 ont encore renforcé cette hégémonie en étendant leurs possibilités pour prendre en compte les équipements mobiles, le référencement, le dessin vectoriel, la vidéo, le rendu 3D, les animations, etc. Bref, il devient maintenant possible de proposer des applications clients/serveurs et des pages web attractives grâce à l’utilisation conjointe de HTML5 et CSS3.

Lors de cette formation, vous comprendrez, dans un premier temps, comment les navigateurs échangent avec les serveurs web, puis comment créer des sites web dynamiques et modernes en utilisant les possibilités du HTML et du CSS que vous compléterez avec les apports des nouveautés proposées par le HTML5 et le CSS3.
Leur utilisation vous sera présentée sous un angle professionnel avec notamment le souci de répondre à la question "Comment faire de la mise en page Web avec les technologies et les outils modernes du moment ?". Ce qui vous le verrez n'est pas complexe si on se limite à la simple présentation des technologies.

De même, nous vous aiderons à préparer votre veille technologique post-formation et à analyser avec recul les tendances du moment. Nous vous présenterons une série d’outils et méthodologies visant à professionnaliser vos développements, être plus efficace et gagner en productivité. Vous apprendrez également à pallier les problèmes redondants de rétrocompatibilité afin de concevoir des sites et des applications nativement compatibles dans le plus grand nombre de navigateurs.

Objectif opérationnel :

Savoir créer un site ou une application web dynamique, moderne et responsive en utilisant le langage HTML5 et les feuilles de style CSS3.

Objectifs pédagogiques :

À l'issue de cette formation HTML CSS, vous aurez acquis les connaissances et compétences nécessaires pour :

  • Savoir structurer un site ou une application web à l’aide du balisage HTML5
  • Savoir mettre en forme une page HTML5 en y intégrant des feuilles de style CSS3
  • Savoir optimiser son code et mettre en œuvre la compatibilité avec les différents navigateurs
  • Être capable d’intégrer des pages « responsive » dans ses développements
  • Être capable d’intégrer des images, des animations vectorielles et du son au sein de ses développements

Public :

Ce cours HTML CSS s’adresse principalement aux nouveaux développeurs souhaitant acquérir les bases nécessaires pour concevoir et développer des sites ou des applications web modernes et dynamiques. Ces développeurs, juniors, disposent d’une connaissance pratique du web, des grands principes du balisage et d’une notion du code source sans pour autant avoir développé un site ou une application professionnelle par eux-mêmes.

La formation intéressera également les chefs de projet web devant coordonner des développeurs et graphistes pour mieux comprendre la participation de chacun au sein de la conception d’un site ou d’une application web. Ces mêmes chefs de projet peuvent aussi suivre cette formation pour acquérir des pistes de réflexion sur les optimisations possibles en termes de performances (technique, SEO, vitesse d’affichage), de procédés de tests ou de veille globale.

Prérequis :

Les participants à cette formation HTML CSS doivent posséder une connaissance pratique du web, initiée à travers des travaux d’étude ou nourrie par une curiosité personnelle. Aucun strict prérequis de programmation n’est cependant demandé.
Des notions d’ergonomie et de responsive design sont souhaitables afin d’orienter vos premiers projets de développement conformément aux bonnes pratiques du Web.

J1

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’écritureTravaux pratiquesCré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 pratiquesAjout 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…J2

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 FlexTravaux pratiquesMise 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 HTML5Travaux pratiquesFormulaire 
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, outilsJ3

Les Frameworks CSS

Normaliser les styles de base avec Normalize.css
Une base saine avec HTML5 Boilerplate
Approche de twitter Bootstrap et FoundationTravaux pratiquesUtilisons 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éelTravaux pratiquesPage 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 transformationsTransformations de base (rotation, translation, etc.)
Transformations 3D (perspective)
Transitions : changement progressif d'un style
Animations autonomesTravaux pratiquesAjoutons des Interactions et animations 
Création de transitions et animations et insertion dans la pageVectorielUtilisation d’images vectorielles SVGNouvelles balises audio/videoBalise audio et options
Balises vidéo et options
Formats pris en chargeTechniquesNotation BEM
CSS Orienté Objet
Code maintenable

Mise en ligne

Transfert des fichiers via FTP
Configuration de son hébergementTravaux pratiquesEn 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
Date de mise à jour du programme : 15/12/2022

Dates et lieux

Du 05 au 07 juin 2024
Lieu
Distanciel
Durée
3 jrs
1850 € HT
Du 05 au 07 juin 2024
Lieu
Paris
Durée
3 jrs
1850 € HT
Du 03 au 05 juillet 2024
Lieu
Distanciel
Durée
3 jrs
1850 € HT
Du 03 au 05 juillet 2024
Lieu
Paris
Durée
3 jrs
1850 € HT
Du 04 au 06 septembre 2024
Lieu
Distanciel
Durée
3 jrs
1850 € HT
Du 04 au 06 septembre 2024
Lieu
Paris
Durée
3 jrs
1850 € HT
Du 06 au 08 novembre 2024
Lieu
Distanciel
Durée
3 jrs
1850 € HT
Du 06 au 08 novembre 2024
Lieu
Paris
Durée
3 jrs
1850 € HT
Du 04 au 06 décembre 2024
Lieu
Distanciel
Durée
3 jrs
1850 € HT
Du 04 au 06 décembre 2024
Lieu
Paris
Durée
3 jrs
1850 € HT

Logo partenaire action collective de l'OPCO Atlas Votre formation HTML CSS prise en charge jusqu'à 100% des coûts pédagogiques ! *

Depuis 2011, Atlas (ex-Fafiec) a sélectionné PLB Consultant pour vous proposer les meilleures formations autour du développement objet avec .NET, Java et C++.
-  Sessions inter-entreprise sur Paris et Lille.
-  Sessions intra-entreprise sur toute la France.

* jusqu'à 100% des coûts pédagogiques selon votre branche d'activité dans la limite des fonds mutualisés dédiés aux actions collectives et en application des critères de prise en charge en vigueur (cf conditions détaillées sur le site d'Atlas)

Avis des participants à la formation HTML5, CSS3, Responsive - Création de pages web

Note moyenne de 4.7/5(25)

Les avis figurant ci-dessous sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.

LIETART Sébastien
5/5

Mon avis sur le contenu du stage :

"La formation réponds tout à fait a mes attentes et j'ai même appris bien plus que ce je pensais apprendre au départ !! Le niveau technique augmente graduellement au fur et a mesure ce qui est très bien ! Beaucoup de TP, ce qui est une bonne chose et même des TP que l'on peut s'approprier en construisant notre propre site web :)"

Mon avis sur le formateur :

"Le formateur maîtrise son sujet et c'est un plaisir de l'écouter parler. Le formateur est très bon pédagogue, les notions parfois un peu complexes sont expliquées avec des mots simples et mis en images à l'aide des nombreuses références web et littéraires. Le formateur s'assure de notre assimilation continuellement en recueillant notre feedback, il est à l’écoute de nos interrogations et y réponds rapidement. Le formateur maîtrise le scénario du stage, on sait en permanence où on en est et ou l'on va."

Ce que j'ai le plus apprécié :

"Convivialité respectueuse et bonne ambiance de travail dans notre petit groupe de stagiaires + formateur"

Ce que j'ai le moins apprécié :

"ras"

GD
5/5

Mon avis sur le contenu du stage :

"Formation parfaite pour les chefs de projet web, product owners, UX designers, rédacteurs web et autres référenceurs, qui ont besoin de connaître l'étendue du possible offerte par HTML5, CSS, Bootstrap, GIT, etc, mais aussi pour connaître les bonnes pratiques nécessaires au travail en équipe avec des développeurs. Je recommande !"

Mon avis sur le formateur :

"Thierry est à l'écoute, pédagogue, il s'adapte en fonction des interlocuteurs et réoriente les exercices en fonction de nos questionnements. Grand merci !"

Mon avis sur la salle de formation :

"Adobe connect et logmein fonctionnent mais avaient tendance à couper (pas toujours en même temps ce qui signifie que ce n'était pas un problème de connexion au réseau)"

Ce que j'ai le plus apprécié :

"FOAD possible"

Ce que j'ai le moins apprécié :

"ràs"

CF
5/5

Mon avis sur le contenu du stage :

"Très bonne formation pour découvrir le HTML/CSS avec un peu de JS. Correspond bien aussi pour consolider ses aquis et reprendre les bases. Actualiser le support du cours (mise en page et code)"

Mon avis sur le formateur :

"Le formateur est un très bon animateur et pédagogue. Il se démène pour mettre tous les outils à disposition des formés et être dans de bonnes conditions d'apprentissages. Il n'hésite pas à reformuler et prendre le temps d'expliquer et d'aider les participants. Je le recommande"

Mon avis sur la salle de formation :

"La visioconférence est bonne. "

Ce que j'ai le plus apprécié :

"Visioconférence et dialogue avec le formateur"

Ce que j'ai le moins apprécié :

"Lag dans la partie stream du PC, difficultés d'affichage de l'écran (sur VDSL2 80mo down et 20mo up)"

Danielle
5/5

Mon avis sur le contenu du stage :

"Le stage a complètement répondu à mes attentes, même plus. "

Mon avis sur le formateur :

"Explications complètement à la portée d'un débutant, claires, ordonnées. Le formateur d'adapte aux besoins du participant."

Mon avis sur la salle de formation :

"Rien à redire de l'environnement, c'est bien situé, c'est propre, le café est bon."

Ce que j'ai le plus apprécié :

"Le petit nombre de participants (nous étions 3 puis 2), qui rend la formation beaucoup plus efficace."

RD
5/5

Mon avis sur le contenu du stage :

"Contenu de la formation et TPs très bien adaptés aux besoins."

Mon avis sur le formateur :

"Thierry est très compétent et pédagogue ! Thierry est très disponible et s'adapte à toutes les situations et tous les problèmes exposés."

Ce que j'ai le plus apprécié :

"Qualité de la connexion. Partages d'écrans formateur stagiaires. Possibilité d'échanger des fichiers entre nous tous."

Ce que j'ai le moins apprécié :

"Ne fait pas le café :-)"

GILBERT Marguerite
5/5

Mon avis sur le contenu du stage :

"Bon support, avec des exemples pratiques et bien clairs."

Mon avis sur le formateur :

"Thierry s'adapte parfaitement aux problèmes de chacun. Patient et très clair dans ses explications. Sait rendre le cours intéressant et dynamique. Thierry arrive à faire en sorte que tout le monde puisse suivre sans prendre du retard. Très bon animateur et souriant en plus."

Ce que j'ai le plus apprécié :

"Le partage de l'écran, très pratique pour communiquer avec le formateur. Le support de cours communiqué à l'avance"

HUSSET Arnaud
5/5

Mon avis sur le contenu du stage :

"Des journées riche en savoir et connaissances."

Mon avis sur le formateur :

"Très disponible et à l'écoute étant donné que nous étions 3 puis 2 personnes en cours lors de cette semaine de formation. "

Mon avis sur la salle de formation :

"Très bonne implantation."

Ce que j'ai le plus apprécié :

"Une salle de pause grandiose!"

Ce que j'ai le moins apprécié :

"Aucun"

BOYADZHIEVA Maya
4/5

Mon avis sur le contenu du stage :

"Mettre à disposition la dernière version; veiller qu'on puisse copier du code du support vers l'éditeur sans devoir formater en permanence; quelques fautes de frappe; se renseigner quel SysExploit (Windows dans notre cas) est imposé aux stagiaires et en utiliser le même."

Mon avis sur le formateur :

"Si les stagiaires sont en train d'xécuter un exercice, ne pas donner en même temps nouvelles infos."

Ce que j'ai le plus apprécié :

"Amabilité du formateur."

DV
5/5

Mon avis sur le formateur :

"Bon en tous points, compétences techniques poussées "

Mon avis sur la salle de formation :

"Formation à distance, parfois la connexion a été un peu lente avec LogMeIn, surtout pour les transitions entre les pages"

Ce que j'ai le plus apprécié :

"Facilité d'utilisation Adobe Connect et logMeIn"

Ce que j'ai le moins apprécié :

"Quelques retards parfois à cause de la connexion"

MOISAN Soraya
5/5

Mon avis sur le contenu du stage :

"Génial, tellement contente de rafraîchir mes connaissances et d'apprendre de nouvelles choses ! "

Mon avis sur le formateur :

"Top, pédagogue et patient Un peu rapide mais sur deux jours c'est compliqué de faire mieux. "

Ce que j'ai le plus apprécié :

"Fluide."

Ce que j'ai le moins apprécié :

"RAS"

PETIT MAIRE Pierre
5/5

Mon avis sur le contenu du stage :

"Mon besoin : approfondir des connaissances acquise sur le tas (pas ma formation initiale). Parfaitement remplis."

Mon avis sur la salle de formation :

"A distance ! toutefois le matériel d'accès à distance fonctionne très bien."

Ce que j'ai le plus apprécié :

"logme in : La machine sous les yeux du formateur est pratique."

PJ
4/5

Mon avis sur le contenu du stage :

"Dommage d'avoir plusieurs supports (ancienne version/nouvelles). 1ère journée à remplacer avec des autres parties plus technique si le public semble à l'aise avec les bases."

Ce que j'ai le plus apprécié :

"la partie technique css."

Ce que j'ai le moins apprécié :

"les changements de supports. "

GC
5/5

Mon avis sur le contenu du stage :

"La documentation qui a été fournie via la clè usb mériterait une mise à jour (statistiques et codes)."

Ce que j'ai le plus apprécié :

"qualité de l'intervenant, cours complet qui correspond exactement à mes attentes"

Ce que j'ai le moins apprécié :

"coupure réseau"

BI
5/5

Mon avis sur le contenu du stage :

"Le support de cours n'est pas à jour."

Mon avis sur le formateur :

"RAS Animateur compétent et à l'écoute. "

Ce que j'ai le plus apprécié :

"RAS"

Ce que j'ai le moins apprécié :

"RAS"

FL
5/5

Mon avis sur le contenu du stage :

"Support de cours pas au goût du jour. Contenu formation pas totalement totalement respecté"

Mon avis sur le formateur :

"Grande adaptation aux besoins de chacun"

Ce que j'ai le plus apprécié :

"Grande disponibilité et accueil parfait"

CONTASSOT Manon
5/5

Mon avis sur le contenu du stage :

"Très fluide, intéréssant, on ne s'ennuie pas!"

Mon avis sur le formateur :

"Patient, agréable, trés bon orateur, c'était super merci !"

Ce que j'ai le plus apprécié :

"La salle, le batiment, l'emplacement"

4/5

Mon avis sur le contenu du stage :

"Pas très adapté aux personnes qui n'ont jamais codé."

Ce que j'ai le plus apprécié :

"Disponibilité."

Ce que j'ai le moins apprécié :

"Trop rapide pour les débutants."

EC
5/5

Mon avis sur le contenu du stage :

"J'aurais aimé avoir plus de jours de formation.. pour faire beaucoup de cas pratiques, exercices... "

Mon avis sur le formateur :

"L'animateur explique bien le cours, les exercices. Je n'ai rien à rapprocher..."

LW
4/5

Mon avis sur le contenu du stage :

"Le contenu est bon mais beaucoup d'informations en seulement 2 jours."

Mon avis sur le formateur :

"55 / 5,000 Translation results. Le formateur est patient il a répondu à toutes nos questions."

CA
4/5

Mon avis sur le contenu du stage :

"Niveau un peu faible pour les développeurs"

Ce que j'ai le plus apprécié :

"Accées à la VM via Guacamole, rien besoin d'installer"

ADORGLOH Audrey
4/5

Mon avis sur le formateur :

"Très à l'écoute et agréable"

Ce que j'ai le plus apprécié :

"à l'écoute et patient"

CN
5/5

Mon avis sur le formateur :

"Pédagogue, compétent et patient"

Ce que j'ai le plus apprécié :

"Interaction aisée avec le formateur"

VC
4/5

Mon avis sur le formateur :

"Animateur sympathique dans un contexte pas si évident où tout le monde était derrière son écran sans caméra."

PC
5/5

Mon avis sur le formateur :

"Super formateur qu'est Thierry"

Ce que j'ai le plus apprécié :

"le formateur"

BRAHIM Rabeb
5/5

Mon avis sur le formateur :

"Instructeur pédagogue. qui explique super bien."


Formations Informatique
et Management
en ligne à ce jour

+
Stagiaires dans nos salles
de cours sur
l'année

%
De participants satisfaits
ou très satisfaits de nos
formations


Formateurs experts
validés par
PLB