Formation Webmaster Intermédiaire : HTML5/CSS3 + Responsive Web Design (RWD)

icon public

Public : Tous

icon horloge

Durée : 5 jour(s)

Syllabus de la formation Webmaster Intermédiaire : HTML5/CSS3 + Responsive Web Design (RWD)

Pré-requis : Notions fondamentales en création de sites Web, HTML et CSS

Objectifs : Découvrir le potentiel des nouvelles normes HTML5/CSS3 - Connaitre les normes d'accessibilité - Apprendre à faire des sites multiplateforme : smartphone, tablette, etc.

Sanction : Attestation de fin de formation mentionnant le résultat des acquis

Taux de retour à l’emploi : Aucune donnée disponible

Référence : SIT653-F

Code RS : RS6245

Taux de satisfaction : 4,75 / 5

Certifications :

  • ENI : Créer et mettre en forme des pages web (HTML5 et CSS3) 574.67 /1000

Accessibilité : Si vous êtes en situation de handicap, nous sommes en mesure de vous accueillir, n'hésitez pas à nous contacter à referenthandicap@dawan.fr, nous étudierons ensemble vos besoins

Contact : commercial@dawan.fr

À partir de

875,00 € HT / jour

1 996,00 €HT

1 250,00 € HT

Pour 10 heures utilisables pendant 12 mois

2 495,00 € HT

Tarif plein:

  • Paiement à 60 jours
  • Report possible à J-3
  • 3 tickets d'assistance

1 996,00 € HT

Tarif remisé :

Contacter Dawan
Webmaster Intermediaire : intégrateur front-end HTML/CSS

Formation éligible au CPF (France)

Cliquez sur une date pour monter votre dossier CPF
ou contactez-nous au 09 72 37 73 73 pour en savoir plus

logo respect de la charte de déontologie CPF logo formation éligible à un financement  CPF

Programme de Formation Webmaster Intermédiaire : HTML5/CSS3 + Responsive Web Design (RWD)

Introduction

Histoire du HTML
Versions

Structure d'un document

Les bases d'un document HTML
Le Doctype
Les balises html, head, body
Les commentaires
Structures des balises et des attributs
Différences entre les balises inline et block

Les balises de contenu

Les titres (h1, h2, h3, etc)
Les paragraphes
Mise en gras et en italique
Les liens hypertexte
Les listes (ordonnées et non ordonnées)
Les tableaux

Atelier : Structurer une page html

Les Médias 

Les images et format d'image
Les attributs essentiels (src, alt, etc)
Intégrer des sons et des vidéos
Autres médias

Atelier : Intégrer plusieurs médias sur une page html

Le CSS

Présentation et définition
Attacher une css à une page html
Les sélecteurs (balise, id, class)
Les pseudo-classes
Les propriétés et valeurs
Les commentaires

Atelier : Attacher une feuille css à une page html

Les propriétés

Les propriétés de texte (police, taille, alignement)
Les couleurs hexadecimale, rgb, rgba et nommées
Les propriétés d'arrière plan
Les marges intérieurs et extérieur (margin, padding)
Les bordures
Les dimensions
Les listes

Atelier : Styliser une page existante

Le positionnement de bloc

Positionnement absolu ou relatif
Bloc flottant et fixe
Les blocs flexibles
Les grilles

Atelier : Positionner différents blocs sur une page

Les Formulaires 

Les balises de formulaire
Les attributs action et method
Les différents champs de formulaire
Les différentes formes du champs input
Les attributs pour les champs de formulaire (placeholder, required, etc)
Valider un formulaire

Atelier : Créer un formulaire d'inscription

Rédiger du contenu accessible

Découvrir les normes (WAI, WCAG)
Connaître les critères essentiels : textes alternatifs, liens, menus, navigation
Critères de choix des couleurs
Savoir adapter le code HTML et CSS
Structurer un formulaire, erreur à éviter

Atelier : Rendre une page accessible

Les animations

Les animations et transitions
Durée des animations
Les fonctions de transition
Les Keyframes

Atelier : Créer une animation

Autres propriétés CSS3

Les transformations
Les ombres de texte et de bloc
Les bordures arrondies
Les colonnes
La propriété box-sizing

Construire un site web adaptatif

Responsive Web Design (RWD) : définition, composantes
Contraintes ergonomiques et fonctionnelles
Viewport : notion, meta, valeurs
Unités relatives (%, em) vs. absolues (px)

Créer une grille d'affichage flexible

Tailles d'écran, résolution optimale
Modes portrait et paysage
Expression des tailles en pourcentage (%), em
Tailles minimales, maximales
Blocs, approche contenu/contenant
Principe des box, layout avec CSS3
Taille des fonts : fixer une base pour les tailles, conversions em
Eviter les débordements

Atelier : Multiples exemples de grilles flexibles

Utiliser des médias flexibles

Images flexibles : images de fond, adaptation HTML5
Marges et espaces flexibles
Vidéos adaptées
Support des propriétés CSS par les anciens navigateurs

Atelier : Eviter le débordements d'images/vidéos

Ecrire des CSS3 Media Queries

Adaptation de l'affichage en fonction de la résolution
Types de médias
Choix des règles conditionnelles : orientation, device-width
Medias queries internes, externes
Gestion des menus et sliders

Atelier : Création de site responsive pure css avec des media-queries

Frameworks RWD

Panorama des frameworks existants
Bootstrap
960 grid
Optimisation des ressources graphiques

Atelier : Construction d'un site adaptatif avec Bootstrap

Passage de la certification (si prévue dans le financement)

Ce cours présente les fondamentaux et les bonnes pratiques de la conception de page web ; l'aide du HTML5 et CSS3, les normes d'accessibilité, ainsi que les règles de mise en forme du Responsive Web Design.

  • Un support et les exercices du cours pour chaque stagiaire
  • Un formateur expert ayant suivi une formation à la pédagogie
  • Boissons offertes pendant les pauses en inter-entreprises
  • Salles lumineuses et locaux facilement accessibles
  • Méthodologie basée sur l'Active Learning : 75% de pratique minimum
  • Matériel pour les formations présentielles informatiques : un PC par participant
  • Positionnement à l'entrée et à la sortie de la formation
  • Certification CPF quand formation éligible

Suite de parcours et formations associées

Formation éligible au CPF (France), Cliquez sur une date pour monter votre dossier CPF ou contactez-nous au 09 72 37 73 73 pour en savoir plus

Pour suivre une session à distance depuis l'un de nos centres, contactez-nous.

Lieu Date Remisé Actions
Bordeaux Du 27/01/2025 au 31/01/2025 Oui S'inscrire - CPF
Bordeaux Du 07/04/2025 au 11/04/2025 Oui S'inscrire - CPF
Bordeaux Du 21/07/2025 au 25/07/2025 Oui S'inscrire - CPF
Bordeaux Du 29/09/2025 au 03/10/2025 Oui S'inscrire - CPF
Bordeaux Du 08/12/2025 au 12/12/2025 Oui S'inscrire - CPF
Distance Du 20/01/2025 au 24/01/2025 Oui S'inscrire - CPF
Distance Du 24/02/2025 au 28/02/2025 Oui S'inscrire - CPF
Distance Du 31/03/2025 au 04/04/2025 Oui S'inscrire - CPF
Distance Du 23/06/2025 au 27/06/2025 Oui S'inscrire - CPF
Distance Du 01/09/2025 au 05/09/2025 Oui S'inscrire - CPF
Distance Du 06/10/2025 au 10/10/2025 Oui S'inscrire - CPF
Distance Du 17/11/2025 au 21/11/2025 Oui S'inscrire - CPF
Distance Du 08/12/2025 au 12/12/2025 Oui S'inscrire - CPF
Lille Du 20/01/2025 au 24/01/2025 Oui S'inscrire - CPF
Lille Du 31/03/2025 au 04/04/2025 Oui S'inscrire - CPF
Lille Du 23/06/2025 au 27/06/2025 Oui S'inscrire - CPF
Lille Du 01/09/2025 au 05/09/2025 Oui S'inscrire - CPF
Lille Du 17/11/2025 au 21/11/2025 Oui S'inscrire - CPF
Lille Du 08/12/2025 au 12/12/2025 Oui S'inscrire - CPF
Lyon Du 03/02/2025 au 07/02/2025 Oui S'inscrire - CPF
Lyon Du 14/04/2025 au 18/04/2025 Oui S'inscrire - CPF
Lyon Du 21/07/2025 au 25/07/2025 Oui S'inscrire - CPF
Lyon Du 29/09/2025 au 03/10/2025 Oui S'inscrire - CPF
Lyon Du 08/12/2025 au 12/12/2025 Oui S'inscrire - CPF
Marseille Du 03/02/2025 au 07/02/2025 Oui S'inscrire - CPF
Marseille Du 14/04/2025 au 18/04/2025 Oui S'inscrire - CPF
Marseille Du 21/07/2025 au 25/07/2025 Oui S'inscrire - CPF
Marseille Du 29/09/2025 au 03/10/2025 Oui S'inscrire - CPF
Marseille Du 08/12/2025 au 12/12/2025 Oui S'inscrire - CPF
Montpellier Du 27/01/2025 au 31/01/2025 Oui S'inscrire - CPF
Montpellier Du 07/04/2025 au 11/04/2025 Oui S'inscrire - CPF
Montpellier Du 21/07/2025 au 25/07/2025 Oui S'inscrire - CPF
Montpellier Du 29/09/2025 au 03/10/2025 Oui S'inscrire - CPF
Montpellier Du 08/12/2025 au 12/12/2025 Oui S'inscrire - CPF
Nantes Du 10/02/2025 au 14/02/2025 Oui S'inscrire - CPF
Nantes Du 12/05/2025 au 16/05/2025 Oui S'inscrire - CPF
Nantes Du 04/08/2025 au 08/08/2025 Oui S'inscrire - CPF
Nantes Du 20/10/2025 au 24/10/2025 Oui S'inscrire - CPF
Nice Du 03/02/2025 au 07/02/2025 Oui S'inscrire - CPF
Nice Du 14/04/2025 au 18/04/2025 Oui S'inscrire - CPF
Nice Du 21/07/2025 au 25/07/2025 Oui S'inscrire - CPF
Nice Du 29/09/2025 au 03/10/2025 Oui S'inscrire - CPF
Nice Du 08/12/2025 au 12/12/2025 Oui S'inscrire - CPF
Paris Du 20/01/2025 au 24/01/2025 Oui S'inscrire - CPF
Paris Du 24/02/2025 au 28/02/2025 Oui S'inscrire - CPF
Paris Du 31/03/2025 au 04/04/2025 Oui S'inscrire - CPF
Paris Du 23/06/2025 au 27/06/2025 Oui S'inscrire - CPF
Paris Du 01/09/2025 au 05/09/2025 Oui S'inscrire - CPF
Paris Du 06/10/2025 au 10/10/2025 Oui S'inscrire - CPF
Paris Du 17/11/2025 au 21/11/2025 Oui S'inscrire - CPF
Rennes Du 10/02/2025 au 14/02/2025 Oui S'inscrire - CPF
Rennes Du 12/05/2025 au 16/05/2025 Oui S'inscrire - CPF
Rennes Du 04/08/2025 au 08/08/2025 Oui S'inscrire - CPF
Rennes Du 20/10/2025 au 24/10/2025 Oui S'inscrire - CPF
Strasbourg Du 10/02/2025 au 14/02/2025 Oui S'inscrire - CPF
Strasbourg Du 12/05/2025 au 16/05/2025 Oui S'inscrire - CPF
Strasbourg Du 04/08/2025 au 08/08/2025 Oui S'inscrire - CPF
Strasbourg Du 20/10/2025 au 24/10/2025 Oui S'inscrire - CPF
Toulouse Du 27/01/2025 au 31/01/2025 Oui S'inscrire - CPF
Toulouse Du 07/04/2025 au 11/04/2025 Oui S'inscrire - CPF
Toulouse Du 21/07/2025 au 25/07/2025 Oui S'inscrire - CPF
Toulouse Du 29/09/2025 au 03/10/2025 Oui S'inscrire - CPF
Toulouse Du 08/12/2025 au 12/12/2025 Oui S'inscrire - CPF

Nos centres de formation

  • Bordeaux

    Nos locaux sont accessibles

    Bât Ravezies - 2e étage 250 avenue Emile Counord

    33300 Bordeaux

    Liaison directe de la gare Bordeaux Saint-Jean via le tram C

  • Distance

    32 Boulevard Vincent Gâche

    44000 Nantes

  • Lille

    Nos locaux sont accessibles

    46 rue des Canonniers - 2è étage

    59800 Lille

    Proche des deux gares

  • Lyon

    Nos locaux sont accessibles

    62 rue de Bonnel - 1er étage Ascenseur à droite de l'entrée

    69003 Lyon

  • Marseille

    Nos locaux sont accessibles

    38/40 rue de la République Escalier A, 1er étage

    13001 Marseille

    A proximité du vieux port

  • Montpellier

    Nos locaux sont accessibles

    26 Allée de Mycènes Le Thèbes, Bât. A, 3è étage

    34000 Montpellier

    Quartier Antigone

  • Nantes

    Nos locaux sont accessibles

    32 Boulevard Vincent Gâche 5 ème étage

    44200 Nantes

  • Nice

    Nos locaux sont accessibles

    455 promenade des Anglais Bât Arenice, 7è étage

    06200 Nice

  • Paris

    Nos locaux sont accessibles

    11 rue Antoine Bourdelle

    75015 Paris

    dans le 15e arrondissement

  • Rennes

    Nos locaux sont accessibles

    3 place du Général Giraud

    35000 Rennes

  • Strasbourg

    Nos locaux sont accessibles

    4 rue de Sarrelouis - 4è étage

    67000 Strasbourg

  • Toulouse

    Nos locaux sont accessibles

    1 place Occitane Bât. Le Sully - 4è étage

    31000 Toulouse

    Proche de Jean-Jaurès et du Capitole

  • L'environnement d'apprentissage est agréable et propice à la concentration
  • Le contenu du cours est clair et bien organisé, avec des exemples pertinents
  • Le cours est adapté à mon niveau et répond à mes attentes en matière de développement frontend
  • Le formateur est compétent et disponible pour répondre aux questions, ce qui facilite l'apprentissage
  • Muhammad Shahid H.

  • Très bon formateur, sympathique et à l'écoute.
  • Mohamed Amine A.

  • Formateur très compétent et disponible pendant toute la durée de la formation.
  • Michael L.

  • L'environnement de travail est très bien, rien à ajouter la dessus.
  • Cours très très riche, beaucoup même à mon gout.
  • Le formateur est toujours la à notre écoute, le rythme va malheureusement beaucoup trop vite pour moi et pas le temps d'acquérir les notions découvertes durant cette formation, le niveau était un peu trop élevé pour moi.
  • Rien à redire sur le formateur, excelle dans son domaine.
  • Wafik B.

  • Environnement de travail très agréable et calme, avec du bon matériel.
  • Cours assez dense et complet avec un fil rouge logique.
  • Niveau plus avancé que ce quoi à je m'attendais, un très bon point, qui m'a permis de voir plus loin.
  • Bon formateur, vivant et agréable, qui explique bien et prend le temps de répondre aux questions et de faire des démonstrations. Quelques unes étaient un peu longues car plus ou moins improvisées.
  • Kristina K.

  • La formation s'est déroulée de manière fluide dans un très bon environnement de travail, aucun souci en particulier.
  • Le contenu du cours est riche, il nous donne de solides bases pour progresser davantage en HTML et en CSS. De nombreuses notions ont été abordées, le cours couvre dans l'ensemble l'essentiel de ces deux langages, notamment grâce à un projet que l'on a réalisé au fur et à mesure, à travers de nombreux exemples.
  • Très bon rythme de formation, j'ai pu suivre la formation correctement. Néanmoins, j'aurais aimé aller plus loin sur certaines notions, notamment l'accessibilité et le SEO, et pourquoi pas réaliser un projet concret d'intégration de maquettes.
  • Formateur compétent et très à l'écoute pour aider. Une très bonne formation.
  • Johan C.

  • Pas très fan du front end mais pourtant très instructif pour avoir les bases
  • Rayan N.

  • Merci pour cette formation.
  • Mathias T.