Formation Initiation HTML5 et CSS3

Franchissez le cap des langages HTML5 et CSS3 en créant une page d’agence de voyage conforme aux standards, accessible et en Responsive Webdesign.

Conçue sous la forme d'un fil rouge consistant à intégrer une page web d'agence de voyage fictive, 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.

Travaux Pratiques HTML et CSS

Que va vous apporter cette formation ?

  • les bases pour découvrir ou consolider les langages HTML et CSS,
  • les 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 HTML5 ?
  • Qu'est-ce que CSS3 ?

Le contenu : titrage et paragraphe

  • Balises de titres et de paragraphes (<h1>, … <h6>, <p>)
  • Premières décorations CSS : color et background-color
  • Alignements de contenus : text-align
  • Formats de couleurs (hexadécimal, mots-clés)
  • Familles de polices avec et sans empattements : font-family

Les liens

  • Créer un lien vers une autre page avec l’élément <a> et son attribut href
  • Souligner (ou pas) un lien : text-decoration

Appliquer des marges (internes et externes)

  • Introduction au Modèle de Boîte en CSS
  • Appliquer une marge sous ou sur un élément

Les listes

  • Créer une liste d’éléments : <ul> et <li>
  • Les puces par défaut et personnalisées

Anatomie d’une page web standard

  • Notion de “Doctype”
  • Éléments de structure : <html>, <head>, <body>

À l’assaut de ma première page web

  • Arborescence des fichiers
  • Comment appliquer les styles CSS ?
  • Les éditeurs de code

Les images

  • Afficher une image de contenu : <img> et ses attributs
  • Afficher une image décorative : background-image et propriétés associées
  • Distinguer une image (HTML) d’une image de fond (CSS)

Applications pratiques

  • Insérer une image dans le corps de la page
  • Un logo cliquable
  • Personnalisation de listes

Les sections d'un document

  • Notion de “section” : <header>, <aside>, <main>, <footer> (et autres éléments sectionnants)
  • Jouez vous aussi : deviner les sections d'après la maquette du projet
  • Listing des sections, titres et paragraphes de la page
  • Application des styles CSS généraux en conformité avec la maquette

Les composants

  • Qu’est-ce qu’un composant ?
  • Deviner les composants d'après la maquette
  • Mon premier composant : le bouton (avec bordures, notions de flux et pseudo-classes)
  • Le composant navigation (avec notion d’héritage et les sélecteurs CSS)
  • Les composants du pied de page
  • Le bloc info (avec le modèle de boîte suite et fin, width, height, box-sizing)
  • Le Composant "Card" (éléments HTML <figure> et <figcaption>)
  • Le Composant de formulaire de contact (éléments HTML du formulaire)

Qu'est-ce que le Responsive Web Design ?

  • Les points de rupture
  • Le viewport
  • Les CSS Media Queries

Centrer le contenu dans la page

  • Avec les propriétés CSS width et les marges automatiques
  • Ajout d’éléments neutres (<div>)
  • Les priorités en CSS

Le modèle Flexbox

  • Comment fonctionne Flexbox ?
  • Où a-t-on besoin d'appliquer Flexbox sur la maquette ?
  • Application pratique : composants "Séjours", "nav" et "footer"

Positionnement flottant

  • La propriété float
  • Application pratique : bloc "infos"

Éléments bonus

  • Les tableaux de données
  • Une grille d’éléments (composant “Destinations”)

Le futur de CSS avec Grid Layout

  • Qu'est-ce-que Grid Layout ? (principes, support, application)
  • Composant “Destinations” en Grid Layout

Les standards

  • 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 totalement autonome, sans éditeur visuel ni tableaux de mise en page. Concevoir des sites internet valides selon les standards W3C, connaître les principales balises HTML existantes, structurer son contenu (utiliser des éléments de liste, des liens hypertexte, des images), appliquer ses premières mises 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

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 physique de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les stagiaires et le formateur. Sanction : attestation de fin de stage.

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.

Voir les différents financements

À la suite de cette formation, nous vous recommandons :

Témoignages

Ils ont aimé

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.
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.

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

Calendrier des formations

Nous contacter

09 54 96 50 50 contact alsacreations point fr

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