Formation Initiation HTML5 et CSS3

Franchissez le cap des langages HTML5 et CSS3 en créant une page web de toutes pièces, conforme aux standards, accessible et en Responsive Webdesign.

Durée de formation : 3 jours

Lieux de formation :
  • Présentiel à Strasbourg
  • Possible en groupe (intra-entreprise)

Conçue sous la forme d'un fil rouge consistant à intégrer une page web (de type blog, e-commerce ou youtube), cette formation entre immédiatement dans le vif du sujet et répond à toutes les questions pratiques d'un·e intégrateur(trice) junior en production. Alsacréations étant elle-même une agence web, se voit confrontée au quotidien à de multiples challenges décortiqués au sein de ce programme.

Capture écran d’un site réalisé pendant les travaux pratiques HTML et CSS

Que va vous apporter cette formation ?

  • les bases pour découvrir ou consolider les langages HTML et CSS,
  • énormement de bonnes pratiques pour produire du code propre, maintenable et performant,
  • ce qu'est le code sémantique et ses avantages pour le référencement ou l'accessibilité,
  • comment découper un design graphique et le transformer en langage web,
  • la faculté de pouvoir reprendre du code existant, conçu par d'autres.

Plongez dès maintenant dans ce programme de trois journées riches de cas pratiques et d'exercices concrets !

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 CSS simples

  • Le sélecteur d'élement
  • Le sélecteur d'identifiant
  • Le sélecteur de classe

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

TP fil rouge : on avance sur notre projet web

Qu'est-ce que le Responsive Web 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

Le modèle Grid Layout

  • Comment fonctionne Grid Layout ?
  • Quels intérêts et quelles apports ?
  • Application pratique sur le Layout de notre projet

Et c'est pas fini !

  • Les tableaux de données
  • Votre code passera-t-il au validateur ?
  • Notions d'entités HTML

Ressources HTML et CSS

Public

Tous métiers liés au Web : graphistes, webmasters débutants, rédacteurs de contenu souhaitant comprendre le code manipulé.

Objectifs

Savoir réaliser une conception de pages web en langages HTML5 et CSS3 de façon autonome, sans éditeur visuel. Être capable de construire des sites internet, valides selon les standards W3C. Connaître les usages des principales balises HTML et leurs attributs. Savoir structurer le contenu (utiliser des éléments de liste, des liens hypertexte, des images). Savoir appliquer une mise en forme à l'aide des styles CSS.

Prérequis

Être déjà familier avec les outils informatiques et le Web en général.

Moyens pédagogiques

Durant chaque formation, les participants et participantes auront l’opportunité de mettre en application leurs apprentissages grâce à de nombreux cas pratiques et exercices. Ces exercices seront ensuite corrigés et explicités par le formateur ou la formatrice. Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 8 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.

Suivi et appréciation des résultats

L'exécution de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les participants et le formateur. Sanction : attestation de présence. Un bilan des acquis est effectué à l'issue de la formation par questionnaire individuel en ligne et par les exercices réalisés durant la session.

Modalités de positionnement et d’évaluation

Le positionnement à l'entrée est évalué par questionnaire individuel en ligne (comportant des questions relatives au profil, aux attentes, aux connaissances initiales et aux prérequis techniques) ainsi que par échange e-mail lors de la prise de contact et de la préparation du dossier. Un entretien préalable par visioconférence a lieu dans le cas des groupes en intra.

Dernière mise à jour de ces informations :

Besoin d'un financement ?

Une formation est un investissement : pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées dont la prise en charge par votre OPCO.

Voir les différents financements

À la suite de cette formation, nous vous recommandons :

Témoignages

Ils ont aimé

Le cours a été bien présenté et bien structuré. Le formateur était à l'écoute et disponible. Le cours est bien pour des développeurs sans connaissances web.
Un bon rythme théorie/pratique, une formatrice pédagogue, un bon accueil, des supports réutilisables... Je me sens plus armée dans mon métier de designer UX et ai désormais envie de m'exercer pour approfondir le sujet HTML/CSS.
Une super formation (bien meilleure que la précédente que j'avais suivi avec un autre organisme sur le même sujet) ! J'ai adoré ces 3 jours, et chapeau Coralie pour ta patience et ta pédagogie.

Envie de connaître la date
de nos prochaines formations ?

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France

En soumettant ce formulaire vous acceptez que les informations saisies soient utilisées pour permettre de vous répondre. Votre e-mail ne sera pas mémorisé pour un autre usage. En savoir plus