Agence web lyon, Agence wordpress lyon, Agence graphisme lyon

Demande de devis en ligne

06 30 88 00 44

Formation HTML5 CSS3 Lyon

Apprenez à concevoir
des sites web
modernes et élégants

Le webstatique à portée de main
Formation HTML5 CSS3 Lyon

visuel séparateur art déco pour les sous titres de l'agence web à lyon Anthony Vidal

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

Formation HTML5 CSS3 Lyon, Logo des languages de webstatique, HTML 5 et CSS 3

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

contact@anthony-vidal.com

06 30 88 00 44

École de webdesign, commerce et centres de formations
Ils me font confiance

visuel séparateur art déco pour les sous titres de l'agence web à lyon Anthony Vidal

Formation HTML5 CSS3 Lyon

Formateur Webstatique Lyon, Anthony Vidal partenaire de CCI formation pour des formations webstatique Lyon
Formation webstatique, formation HTML 5 et CSS3 Lyon
Formation HTML5 CSS3 Lyon à l'INSEEC de BAC+2 à BAC +5
Ancien formateur digitales à l'INSTIC, formateur WordPress et Webstatique, formation HTML 5 et CSS3 à Lyon
Anthony Vidal, formateur en HTML 5 et CSS 3 à Lyon
Formateur de création de site internet sur mesure en HTML 5 et CSS 3

Formateur HTML 5 ET CSS 3 Lyon
Anthony Vidal

visuel séparateur art déco pour les sous titres de l'agence web à 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.

Anthony Vidal, votre webmaster freelance à Lyon, maintenance de site internet, expert WordPress, Prestashop

« L’imagination est plus forte que le savoir »
Albert Einstein

Foire aux questions
Formation HTML5 CSS3 Lyon

visuel séparateur art déco pour les sous titres de l'agence web à Lyon Anthony Vidal

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.