Objectifs
- Comprendre le rôle du HTML5 et du CSS3 dans la création d'un site Web.
- Structurer des pages Web à l'aide des balises sémantiques HTML5.
- Mettre en forme les contenus avec les feuilles de style CSS3.
- Concevoir des interfaces responsives adaptées aux différents appareils.
- Publier un site Web sur un serveur.
Compétences visées
- Structurer des pages Web conformes aux standards HTML5.
- Mettre en forme une interface avec les principales fonctionnalités de CSS3.
- Réaliser des mises en page modernes avec Flexbox, Grid et les Media Queries.
- Concevoir un site Web responsive adapté aux différents écrans.
- Publier et maintenir un site Web statique.
Pré-requis
Être à l'aise avec l'utilisation d'un ordinateur et de son environnement de travail. Aucune connaissance préalable en développement Web n'est nécessaire.
Quel profil ?
Cette formation s'adresse aux débutants souhaitant découvrir le développement Web, ainsi qu'aux graphistes, webdesigners, intégrateurs, webmasters, chefs de projet et à toute personne amenée à créer ou modifier des pages Web.
Formations associées
Au programme de la formation
Développer des sites Web avec HTML5 et CSS3
Introduction
- Définition et utilité de HTML/CSS/JavaScript, les langages du web
- Concepts généraux de la conception de documents WEB
- Le navigateur, outil de diffusion et de développement
Hébergement - Publier son document sur le Web
- Notions de serveurs/clients
- Choisir un nom de domaine et un hébergement
- Se connecter via FTP avec Filezilla
HTML – La structure d’un document HTML
- Les balises sémantiques de HTML5
- Différentes parties d'un document HTML (header, footer, main, nav, …)
- Les principales balises et leurs attributs
HTML – Utiliser des balises sémantiques
- Balises title et meta
- Insertions des feuilles de styles CSS et des scripts JavaScript
- Les balises principales de contenu : titres, paragraphe, listes ...
HTML – Multimédia et interactivité
- Notion de lien absolu et de lien relatif
- Créer des menus et des ancres
- Ajouter des formulaires
- Les images et les règles à respecter
- Vidéo et audio (sans Flash)
CSS – Habiller le document
- Les sélecteurs de balise
- Utilisation des attributs HTML « id » et « class »
- Utilisation des pseudo-classes et mise en forme des liens
- Utilisation des sélecteurs d'attributs
- Calculer les règles de priorité
CSS – Positionner les éléments
- Principe des « boites » et leur positionnement
- Display : inline / block / inlineblock
- Dimensions, marges, espacements et bordures
- Positionnement classique : float / clear
- Les pièges des float et l'astuce du clearfix
- Positionnements spéciaux (relatif, absolu, fixe)
- Positionnements par Grille ou via Flexbox
CSS – Animations et effets
- Coins arrondis
- Ombres portées
- Transparence
- Filtres graphiques
- Transformations 2D
- Animations autonomes
- Valeurs dynamiques : calc()
CSS – Adapter la police et ajouter des couleurs
- Polices et textes
- Unités de mesure
- Couleurs
- Fonds
- Styles des listes
CSS – Adapter le document aux appareils
- Principes du Responsive Web Design (RWD)
- Différence entre résolution et taille d'affichage
- Mise en page fluide et adaptative
- Principe des media queries CSS
- Points de rupture et règles conditionnelles
- Menus adaptatifs
Comment se déroule la formation ?
Chaque notion est abordée de manière concrète, puis appliquée à travers des exercices et des cas pratiques. Les groupes sont limités à 8 participants pour favoriser les échanges et permettre un accompagnement adapté à chacun.
Un support pédagogique est remis à l'issue de la formation pour retrouver facilement les notions abordées.
Comment les acquis sont-ils évalués ?
En fin de parcours, une évaluation permet de mesurer l'atteinte des objectifs pédagogiques. Selon la formation, elle peut prendre la forme d'un questionnaire, d'un exercice pratique ou d'une certification.
Le suivi est formalisé par une feuille d'émargement et une évaluation des compétences.
Autres formations de la même catégorie
Approfondissez votre maîtrise du HTML5, du CSS3 et de JavaScript afin de concevoir des interfaces Web modernes, responsives et interactives.
Apprenez les fondamentaux de JavaScript afin de créer des pages Web interactives, manipuler le DOM et développer vos premières fonctionnalités côté client.
Approfondissez votre maîtrise de JavaScript en découvrant la programmation orientée objet, les design patterns et les techniques utilisées dans le développement d’applications Web modernes.
Apprenez à concevoir des interfaces Web responsives, ergonomiques et adaptées aux usages actuels sur ordinateur, tablette et smartphone.
Apprenez les fondamentaux de PHP et MySQL pour créer des sites Web dynamiques, traiter des formulaires et exploiter une base de données.
Approfondissez votre maîtrise de PHP et MySQL afin de développer des applications Web plus robustes, maintenables et évolutives.
Apprenez à développer un thème WordPress personnalisé en exploitant le système de templates, les contenus dynamiques, les Custom Post Types et les champs personnalisés.
Apprenez à intégrer une maquette HTML/CSS dans WordPress et à concevoir un thème personnalisé conforme aux standards du Web et à l’architecture du CMS.
Apprenez à développer des plugins WordPress sur mesure afin d’ajouter des fonctionnalités fiables, sécurisées et adaptées aux besoins d’un projet.
Apprenez à développer et personnaliser une boutique PrestaShop en créant des modules, des hooks, des contrôleurs et des fonctionnalités adaptées aux besoins métier.
