ITvities logo
← Retour aux formations

Plan de formation · Développement · Débutant à Intermédiaire

Développement Web Frontend (HTML, CSS, JS)

Formation intensive de 3 jours pour apprendre le développement web frontend : HTML5, CSS3 (Flexbox, Grid, Animations), JavaScript (DOM, Fetch API) et projet final de site complet déployé en ligne.

Durée

3 jours (21h)

Format

Présentiel

Prérequis

Aucun (savoir utiliser un navigateur et un éditeur de texte)

Public

Débutants en programmation, stagiaires, communicants

1

Jour 1 — HTML : structure et sémantique

1j
  • Introduction au web : client/serveur, HTTP, URL, DNS, hébergement
  • Éditeur : VS Code, extensions, Emmet, Live Server
  • Structure HTML : DOCTYPE, html, head, body, meta, title
  • Balises sémantiques : header, nav, main, section, article, aside, footer
  • Texte : h1-h6, p, strong, em, span, br, hr
  • Liens : a href, ancres, target, title, rel
  • Images : img src, alt, width, height, figure, figcaption
  • Listes : ul, ol, li, dl, dt, dd
  • Tableaux : table, thead, tbody, tr, th, td, colspan, rowspan
  • Formulaires : form, input (text, email, password, number, date, file), textarea, select, button
  • TP intensif 1 : créer une page web complète : page d'accueil + formulaire de contact + tableau de données
2

Jour 1 — CSS : mise en forme et mise en page

  • Introduction CSS : sélecteurs, propriétés, valeurs, cascade, spécificité
  • Couleurs : hex, rgb, rgba, hsl, dégradés linéaires/radiaux
  • Texte : font-family, size, weight, style, line-height, text-align, decoration
  • Boîte (Box Model) : margin, padding, border, width, height, box-sizing
  • Background : couleur, image, repeat, position, size, attachment
  • Flexbox : display flex, direction, wrap, justify-content, align-items, gap
  • Grid : display grid, template columns/rows, gap, areas
  • Position : static, relative, absolute, fixed, sticky, z-index
  • Responsive : media queries, mobile-first, breakpoints, viewport
  • TP intensif 2 : reproduire une maquette de site vitrine complète (en-tête, hero, services, footer) avec Flexbox et Grid
3

Jour 2 — CSS avancé et design moderne

1j
  • Pseudo-classes : hover, focus, active, nth-child, not, is, has
  • Pseudo-éléments : before, after, content, quotes
  • Transitions : property, duration, timing, delay
  • Transformations : rotate, scale, translate, skew, transform-origin
  • Animations : @keyframes, animation-name, duration, iteration, direction
  • Variables CSS : custom properties, var(), héritage, fallback
  • Filtres CSS : blur, brightness, contrast, grayscale, sepia
  • Ombres : box-shadow, text-shadow, drop-shadow
  • Polices : @font-face, Google Fonts, Font Awesome, icônes SVG
  • TP intensif 3 : créer une landing page animée avec transitions, transformations et animations CSS
4

Jour 2 — JavaScript : les bases

  • Introduction JS : variables (var, let, const), types (string, number, boolean, null, undefined)
  • Opérateurs : arithmétiques, comparaison, logiques, ternaire
  • Conditions : if/else, else if, switch, short-circuit
  • Fonctions : déclaration, expression, flèche, paramètres, return
  • Tableaux : création, push, pop, forEach, map, filter, find
  • Objets : création, propriétés, méthodes, this
  • DOM : document.getElementById, querySelector, textContent, innerHTML, style
  • Événements : addEventListener, click, submit, mouseover, keydown, scroll
  • TP intensif 4 : créer une page interactive avec manipulation du DOM (menu burger, accordéon, onglets, slider)
5

Jour 3 — JavaScript avancé et API

1j
  • Fonctions avancées : callbacks, closures, setTimeout, setInterval
  • Promesses et async/await : fetch(), then/catch, try/catch
  • API Fetch : GET, POST, JSON, headers, gestion d'erreurs
  • Stockage : localStorage, sessionStorage, cookies
  • Formulaires : validation, regex, preventDefault, FormData
  • ES6+ : destructuring, spread/rest, template literals, modules import/export
  • TP intensif 5 : créer une application météo avec API fetch + stockage localStorage + validation de formulaire
6

Jour 3 — Projet final : site web complet

  • Cahier des charges : définir les pages, fonctionnalités et design
  • Structure HTML : pages, navigation, formulaires
  • Styles CSS : responsive, animations, thème visuel
  • Interactivité JS : menu, slider, formulaire, API
  • Tests : responsive, validation HTML/CSS, performance Lighthouse
  • Déploiement : GitHub Pages / Netlify / Vercel, nom de domaine
  • Présentation : démontrer le site et expliquer les choix techniques
  • Évaluation et certification : grille de compétences frontend

Ce plan est personnalisable

Adapté aux débutants complets comme aux personnes ayant quelques bases. Le projet final peut être votre propre site.

Demander une formation sur mesure Obtenir un devis
1