Formation HTML5 CSS3 Lyon
Apprenez à concevoir
des sites web
modernes et élégants
Le webstatique à portée de main
Formation HTML5 CSS3 Lyon
Formation HTML5 CSS3 lyon
Cette formation HTML 5/CSS 3 est conçue pour vous fournir toutes les compétences nécessaires afin de créer des sites web modernes, interactifs et adaptés à tous les types d’appareils. Au cours de cette session, vous apprendrez les bases du HTML5 pour structurer vos pages, et vous maîtriserez les techniques avancées de CSS3 pour styliser et animer vos projets.
Que vous soyez débutant ou ayez déjà des connaissances en développement web, cette formation à Lyon vous permettra d’acquérir des compétences solides et directement applicables. Préparez-vous à plonger dans l’univers du design web moderne et à découvrir toutes les possibilités offertes par ces technologies !
Objectif de la formation
Comprendre et utiliser les balises HTML5 pour structurer des pages web de manière sémantique.
Appliquer les styles CSS3 pour contrôler l’apparence visuelle des éléments (mises en page, couleurs, fonds, bordures, etc.).
Concevoir des sites web responsifs qui s’adaptent aux différents écrans (ordinateurs, tablettes, smartphones) en utilisant les techniques de Responsive Design.
Optimiser l’utilisation des typographies pour améliorer la lisibilité et l’esthétique des pages web.
Créer des animations CSS3 pour dynamiser l’expérience utilisateur sans recourir à JavaScript.
Respecter les normes et les bonnes pratiques du développement web pour garantir la compatibilité et l’accessibilité des sites.
Pré-requis
Être à l’aise avec un ordinateur et internet ; et avoir un ordinateur portable équipé WiFi.
Durée de la formation & horaires
21 heures, soit 3 jours. Les horaires sont : de 9h00 à 17h00 avec une pause déjeuner d’une heure.
Coût de la formation
* 990 euros HT : Pour les étudiants et demandeur d’emploi
1290 euros HT : pour un particulier
Entreprises/Associations/Institutions : Me contacter
Renseignements supplémentaire
Échanges téléphoniques (ou par Skype) avant la formation pour faire le point sur votre projet, vos objectifs et votre futur site internet.
Suivi personnalisé d’une demie heure après la formation.
Plusieurs supports sont remis à chaque stagiaire.
Programme de formation
Formation HTML5 CSS3 Lyon
Introduction et notions de base
– Qu’est-ce que HTML ?
– Qu’est-ce que CSS ?
– Un navigateur ? Un éditeur de code ?
– Prise en main
HTML : les groupes d’éléments
– Les éléments sectionnants (corps de
page, entête, pied de page, titres, navigation)
– Les éléments textuels (paragraphes,
listes)
– Les éléments de texte en ligne (liens,
mises en exergue)
– Les médias (images, vidéos, audio)
HTML : anatomie d’un élément
– Les balises
– Le contenu
– L’élément
– Les attributs
HTML : éléments classiques
– Les titres
– Les paragraphes
– Les listes
HTML : Les images et médias
– Les images et leurs particularités
– Les autres médias (audio, vidéo)
Approche de CSS
– Premiers styles : couleurs, tailles, bordures,
rotations
– Un peu plus loin : alignements, graisse,
italique
Anatomie d’une règle CSS
– Le sélecteur CSS
– La propriété
– La valeur
– La déclaration
Les sélecteurs composés
– Le sélecteur de descendant
– Le sélecteur d’enfant
– Le sélecteur de groupe
– Composition de sélecteurs
– Résolution des conflits
Architecture d’un projet web
– Organisation et gestion des fichiers
– Liens absolus et relatifs
Découpe de maquette graphique
– Notion de zoning, wireframe,
moodboard, maquette, styleguide
– Ce qu’est un « Layout » (éléments sectionnants
en HTML)
– Ce qu’est un « Composant » (navigation,
formulaire, pied de page, etrc.)
Notre composant Navigation
– Comment intégrer une navigation ? (sémantique,
balisage, choix de nommage)
– HTML approprié
– Des styles sur mesure : polices, couleurs,
alignements, comportement au survol,
etc.
Le Modèle de boîte en CSS
– Boîtes en ligne et boîtes bloc
– Propriétés liées aux boîtes (tailles,
marges, bordures)
– Modèle de boîte standard et alternatif
– Unités et valeurs
Flux et positionnements en CSS
– Les modes Normal, Flottant et Absolu
– Le Flux et pourquoi « sortir du Flux »
– Listes des possibilités de positionnement
– Positionnements dans et hors du Flux
Qu’est-ce que le Responsive Design ?
– Les points de rupture
– Le viewport
– Les CSS Media Queries
Le modèle Flexbox
– Comment fonctionne Flexbox ?
– Quels intérêts et quelles apports ?
– Où a-t-on besoin d’appliquer Flexbox
sur la maquette ?
– Application pratique sur les composants
de notre projet
990€ HT*
3 jours
de 9h à 17h
Lyon
Prochaine session
Le 13, 14, 15 Novembre 2024
Public visé
Tout public souhaitant se former à la création de son site internet blog ou vitrine
Nombre de participants
De 1 à 8 stagiaires
Prérequis
Être à l’aise avec l’ordinateur, maîtriser Internet et les fonctionnalités des sites web marchands
En amont, un échange téléphonique entre le formateur et l’apprenant sera effectué pour échanger sur son projet et définir ses priorités.
Approche
20% de théorie
80% de pratique
Moyens pédagogiques
La formation est assurée par Vidal Anthony, formateur expert dans ce domaine
Matériel pédagogique
Ordinateur (du stagiaire), logiciels et applications dédiées, tutoriel et exercice, connexion Internet, la documentation complète de la formation est remise en fin de session
Adresse de formation
36 Rue du Sergent Michel Berthet, 69009 Lyon
ou 3 impasse Fernand Rey 69001 Lyon
ANTHONY VIDAL
École de webdesign, commerce et centres de formations
Ils me font confiance
Formation HTML5 CSS3 Lyon
Formateur HTML 5 ET CSS 3 Lyon
Anthony Vidal
Formation HTML 5 et CSS3
Anthony Vidal
Votre Webmaster à Lyon
Avec près de 12 ans d’expériences, Anthony Vidal et son agence web à Lyon est reconnue pour son expertise en développement de solutions digitales sur-mesure (création de site web, e-commerce, blog ou intranet), la stratégie de communication web et globale ainsi que le positionnement de site internet dans Google.
Grâce à son expertise et sa réactivité, il a établi une relation de confiance durable avec l’ensemble de ses clients.
Anthony Vidal à marqué ses débuts par différentes expériences en agence web et de communication, au sein de diverses associations et chez l’annonceur sur la ville de Lyon et à travers la région Rhône Alpes. Il a aussi travailler quelques années en tant que chargé de communication, développeur web, et formateur web indépendant sur WordPress et Prestashop notamment.
Il aime rendre chaque projet unique, car selon lui chaque structure est singulière.
Aujourd’hui il est primordial dans un monde ultra concurrentiel, que chaque entité se démarque et affirme une communication unique et différenciant. Que ce soit en collaboration avec des TPE/PME, artisans, professions libérales, grandes entreprise sur Lyon et sa région, il travaille pour tous types de structures et tous types de secteurs d’activités.
Écoute, Sensibilité et Transparence, sont ses maîtres mots.
« L’imagination est plus forte que le savoir »
Albert Einstein
Foire aux questions
Formation HTML5 CSS3 Lyon
Formation HTML5 CSS3 Lyon
Qu'est ce que le HTML 5 et CSS3 ?
HTML5
HTML5 (HyperText Markup Language version 5) est la dernière version du langage HTML utilisé pour structurer et présenter du contenu sur le web. Elle a introduit de nombreuses améliorations par rapport à ses prédécesseurs, notamment une meilleure prise en charge du multimédia, des API, et des fonctionnalités sémantiques.
Objectifs principaux de HTML5 :
- Sémantique : Ajouter des balises plus significatives pour mieux structurer le contenu et améliorer l’accessibilité.
Multimédia : Faciliter l’intégration de contenu multimédia (audio, vidéo) sans avoir recours à des plugins externes comme Flash grâce aux balises audio et video. - API : Intégrer des API natives pour le stockage local (localStorage), le dessin graphique (Canvas), la géolocalisation, et d’autres fonctionnalités interactives.
- Responsive Design : Rendre les sites plus adaptatifs aux différents appareils, du mobile au bureau, en conjonction avec CSS3.
CSS3
CSS3 (Cascading Style Sheets version 3) est la dernière évolution du langage CSS utilisé pour styliser et mettre en forme les pages web. CSS3 introduit de nouveaux modules et fonctionnalités qui permettent des conceptions plus riches et plus dynamiques.
Objectifs principaux de CSS3 :
- Mise en page avancée : Utiliser des fonctionnalités comme Flexbox, Grid, et les media queries pour créer des mises en page plus flexibles et responsive.
- Effets visuels : Intégrer des animations, des transitions et des transformations pour créer des interfaces plus dynamiques sans avoir besoin de JavaScript.
- Personnalisation du design : Ajouter de nouveaux types de polices (via @font-face), des ombres (box-shadow, text-shadow), des dégradés, et des bordures arrondies pour plus de créativité dans le design.
- Modularité : CSS3 est conçu sous forme de modules (par exemple, les modules Flexbox, Grid Layout), facilitant ainsi les mises à jour et l’extension du langage.
- Ensemble, HTML5 et CSS3 visent à rendre le développement web plus facile, plus rapide, et plus performant, tout en améliorant l’expérience utilisateur sur tous les appareils.
Comment importer des typographies en CSS3 ou par Google font ?
Pour importer des typographies sur un site web statique en CSS3, y compris via Google Fonts, voici les étapes à suivre :
1. Importer des typographies avec Google Fonts
Google Fonts offre un moyen simple d’intégrer des polices externes. Voici les étapes :
Étape 1 : Choisir la police
Rendez-vous sur Google Fonts.
Recherchez la police que vous souhaitez utiliser.
Cliquez sur la police, sélectionnez les styles (gras, italique, etc.), puis vous verrez une section avec le code d’intégration.
Étape 2 : Ajouter le lien dans votre HTML
Google Fonts vous fournira un lien à ajouter dans la sectionde votre fichier HTML.
Étape 3 : Utiliser la police dans votre fichier CSS
Après avoir ajouté le lien dans votre HTML, vous pouvez définir la police dans votre fichier CSS.
2. Importer des typographies avec @font-face en CSS3
Si vous avez une police personnalisée (par exemple, téléchargée sous forme de fichier .ttf, .otf, ou .woff), vous pouvez l’importer directement avec la règle @font-face.
Étape 1 : Ajouter la police dans votre projet
Placez le fichier de police dans votre projet (par exemple, dans un dossier /fonts).
Étape 2 : Utiliser la règle @font-face
Voici comment importer et utiliser la police dans votre fichier CSS :
@font-face {
font-family: ‘MaPolicePersonnalisee’;
src: url(‘fonts/montypo.woff2’) format(‘woff2’), /* Police WOFF2 */
url(‘fonts/montypo.woff’) format(‘woff’); /* Police WOFF */
font-weight: normal;
font-style: normal;
}
/* Utilisation de la police dans le style */
body {
font-family: ‘MaPolicePersonnalisee’, sans-serif;
}
Explication des formats :
WOFF/WOFF2 : Formats optimisés pour le web, largement pris en charge.
TTF/OTF : Formats classiques pour les polices, mais moins optimisés pour le web.
Conclusion
Google Fonts est simple à utiliser via un lien dans le HTML.
@font-face vous permet d’importer des polices personnalisées directement dans le CSS.
Comment faire un site web responsive en HTML 5 et CSS 3 ?
Rendre un site web Responsive signifie que son design s’adapte à différents types d’écrans et appareils (ordinateurs de bureau, tablettes, smartphones). Pour cela, on utilise principalement HTML5 et CSS3. Voici les étapes principales à suivre pour créer un site web Responsive :
1. Utiliser une structure HTML sémantique
La première étape consiste à structurer correctement votre site en HTML5 en utilisant des balises sémantiques comme header, nav, section, article, etc. Cela facilitera non seulement l’accessibilité mais aussi l’organisation du contenu pour les différentes tailles d’écran.
2. Utiliser la balise Meta Viewport
Cette balise dans la section head du HTML est essentielle pour assurer que votre site s’affiche correctement sur les appareils mobiles. Elle contrôle la mise à l’échelle et la taille initiale de la page.
3. Utiliser des unités relatives (rem, em, %)
En CSS, utilisez des unités flexibles comme rem, em ou % au lieu des pixels (px). Ces unités permettent au design de mieux s’adapter à différents écrans.
4. Mise en page flexible avec Flexbox ou Grid
Flexbox et CSS Grid sont deux techniques puissantes en CSS3 pour créer des mises en page flexibles. Ils permettent d’adapter facilement les éléments en fonction de la taille de l’écran.
5. Media Queries pour s’adapter aux différentes tailles d’écran
Les media queries permettent d’appliquer différents styles CSS en fonction de la largeur d’écran (ou d’autres caractéristiques comme la hauteur, la résolution, etc.). C’est l’une des techniques principales pour rendre un site Responsive.
6. Utiliser des images et des vidéos adaptatives
Pour que les images et les vidéos soient Responsives, utilisez des unités de taille relatives (max-width, height: auto), afin qu’elles s’ajustent à la largeur de leur conteneur.
7. Frameworks CSS pour le Responsive design
Vous pouvez également utiliser des frameworks comme Bootstrap ou Foundation qui sont conçus pour créer des sites web Responsives rapidement. Ils offrent des grilles flexibles et des composants prédéfinis qui s’adaptent automatiquement aux différents écrans.
Conclusion
Un site Responsive utilise principalement :
Les balises HTML5.
Des unités relatives comme rem, em et %.
Les mises en page Flexbox et Grid pour une structure adaptative.
Les media Queries pour appliquer des styles différents selon la taille d’écran.
Des images et vidéos flexibles qui s’adaptent à leur conteneur.