Cours HTML et CSS en ligne
Le cours en ligne HTML et CSS sur CodeWorlds compte 11 modules de courtes leçons avec un éditeur de code et 843 exercices pratiques, racontés comme une aventure. Tu peux lire les leçons gratuitement sur ce site.
Pour apprendre HTML5 et CSS3, nous remontons le temps et découvrons les secrets de l'Égypte antique. Change les pages de l'histoire grâce à une technologie de pointe connue à l'époque actuelle.
Ton guide
Mohamed
Guide de l'Égypte
Ce que tu apprendras
- Structure sémantique des documents HTML5
- Sélecteurs avancés et cascade CSS
- Mises en page responsives avec Flexbox et Grid
- Préprocesseur SASS - variables, mixins, imbrication
- Animations et transitions CSS
- Mobile-first et media queries
- Formulaires HTML et validation
- Accessibilité et bases du SEO
Projets principaux
Au cours de la formation, tu construiras de vrais projets que tu pourras ajouter à ton portfolio
Page Pyramide
Construis une landing page sur une pyramide égyptienne avec une galerie de photos et un menu responsive
Portfolio du Pharaon
Portfolio complet avec CSS Grid, animations et mode sombre
Temple de Karnak
Site web multi-pages avec formulaires avancés et navigation
Programme du cours
11 modules remplis d'exercices interactifs et de projets pratiques
Premiers hiéroglyphes
Bases du HTML
Ce qu'est le HTML, éléments et balises, structure du document HTML et ta première page de style égyptien
60 exercices
Route vers Héliopolis
Internet et éléments HTML
Fonctionnement d'internet et du navigateur, texte, liens, images, listes, tableaux, formulaires, vidéo et HTML sémantique
98 exercices
- Comment fonctionne Internet
- Navigateurs, HTTPS et adresses IP
- Mise en forme du texte en HTML
- Liens et navigation en HTML
Toutes les leçons (15)
- Les images en HTML
- Histoire et évolution d'Internet
- Mini-projet : Carte de visite d'un explorateur égyptien
- La sémantique en HTML
- Les listes HTML
- Propriétés des éléments HTML
- Les tableaux HTML
- Les formulaires HTML
- Fichiers vidéo en HTML
- Où trouver des informations sur le HTML ?
- Projet : Guide complet d'Internet
Énigmes des hiéroglyphes
Bases du CSS
Règles et sélecteurs, cascade et spécificité, héritage, box model, unités, float, positionnement, z-index et pseudo-classes
119 exercices
- Introduction au CSS
- Les règles CSS
- Structure et mise en forme du CSS
- Créer un projet HTML/CSS : un guide
Toutes les leçons (19)
- Mise en forme du texte et unités CSS
- Les classes et les ID en CSS
- Sélecteurs CSS avancés
- Cascade et spécificité en CSS
- L'héritage des styles en CSS
- Le modèle de boîte CSS
- Afficher les éléments les uns par rapport aux autres
- Le flottement des éléments (float) en CSS
- Positionnement CSS
- Z-index et empilement des éléments
- Pseudo-classes et pseudo-éléments CSS
- Filtres CSS
- Transformations CSS
- Préfixes vendeurs CSS
- Projet principal du module
Les secrets des pyramides
Flexbox
Axes principal et secondaire, alignement des éléments, order et align-self, retour à la ligne, flex-grow, flex-shrink, flex-basis et gap
78 exercices
- Flexbox - Mise en page flexible
- Axe vertical ou horizontal ?
- Aligner les éléments sur l'axe horizontal
- Axe principal et axe secondaire dans Flexbox
Toutes les leçons (15)
- Aligner les éléments sur l'axe vertical
- Propriétés des éléments flex : order et align-self
- order et align-self - le contrôle individuel des éléments
- Retour à la ligne des éléments
- Align Content
- Propriétés raccourcies de Flexbox
- Flex-grow, Flex-shrink, Flex-basis - Contrôle de la taille
- Créer une grille avec Flexbox
- Gap - Espacement moderne dans Flexbox
- L’accessibilité en HTML - construire pour tous
- Projet principal : construire une page web avec Flexbox
Obélisques du temple
Responsive design
Viewport, mise en page fluide, unités vw et vh, optimisation des images, media queries et approche mobile-first
64 exercices
Visite chez Cléopâtre
Animations CSS
Transformations 2D et 3D, transitions, animations @keyframes, fonctions de timing, direction et performances avec le GPU
79 exercices
Vallée du Nil
SASS
Variables, imbrication, mixins, maps et listes, partials et modules, @extend, opérateurs et SASS face aux CSS custom properties
64 exercices
Le temple d'Abou Simbel
CSS Grid
Tailles et unités de la grille, placement des éléments, grid et template areas, et combinaison de Grid avec Flexbox
63 exercices
La vallée des Rois
CSS moderne
Container queries et :has(), imbrication native, cascade layers, subgrid, clamp(), @property, Stylelint et tests multinavigateurs
92 exercices
- Container Queries et :has() - la réactivité moderne
- CSS Nesting - l'imbrication native des styles
- Cascade Layers - contrôler l'ordre de la cascade CSS
- CSS Subgrid - partager les grilles avec les descendants
Toutes les leçons (14)
- Fonctionnalités CSS modernes - Partie 1 : clamp(), aspect-ratio, :is(), :where()
- @property - les propriétés CSS typées
- Fonctionnalités CSS modernes - Partie 2 : scroll-snap, @supports, accent-color, color-mix()
- Fonctions CSS - les mathématiques à la manière des scribes égyptiens
- Fonctionnalités CSS modernes - l'avenir du style des hiéroglyphes égyptiens
- Stylelint - Un linter pour CSS
- Tests multi-navigateurs
- State of CSS - Le futur et les tendances du CSS
- Projet - Page de portfolio moderne avec des techniques CSS avancées
- Projet final : Landing page réactive « Aventure égyptienne »
Le musée du Caire
Accessibilité (a11y)
WCAG, HTML sémantique, ARIA, navigation au clavier, formulaires et médias accessibles, contraste des couleurs et tests d'accessibilité
63 exercices
Chambre du pharaon
Outils de développement
Chrome DevTools, Emmet, validateurs HTML et CSS, favicon et Open Graph, polices web, optimisation des performances et hébergement
63 exercices
- Chrome DevTools - les panneaux Elements, Console, Network, Lighthouse
- Emmet - écrire du HTML rapidement
- Les validateurs HTML et CSS - vérifier l'exactitude du code
- Favicon et balises meta Open Graph
Toutes les leçons (9)
- Optimisation des performances - minification, compression, lazy loading
- Web Fonts - Google Fonts et @font-face
- Hébergement de sites statiques - GitHub Pages, Netlify, Vercel
- Techniques de workflow avancées - balises meta, commentaires, variables CSS
- Projet : Page complète du musée avec un workflow complet
Thème du cours
Hiéroglyphes et Pyramides
Chaque module est ancré dans un univers unique qui transforme l'apprentissage en aventure.
Ton guide
Mohamed
Guide de l'Égypte
Il te guidera à travers tous les défis et t'aidera à acquérir de nouvelles compétences.
Questions fréquentes sur le cours HTML et CSS
Le cours HTML et CSS est-il gratuit ?
Oui, tu peux commencer gratuitement le cours HTML et CSS sur CodeWorlds. Un compte gratuit te donne 10 unités de carburant par jour et chaque tâche coûte du carburant. Le plan premium supprime cette limite, pour que tu puisses apprendre sans interruption.
Combien de temps dure le cours HTML et CSS ?
La durée d'apprentissage estimée du cours HTML et CSS est de 40-60 heures. Le cours compte 11 modules et plus de 843 tâches, et c'est toi qui choisis le rythme.
Ai-je besoin d'une expérience préalable pour le cours HTML et CSS ?
Avant le cours HTML et CSS, il est utile d'avoir : Connaissances de base en informatique, Navigateur web.
Qu'est-ce que je vais apprendre dans le cours HTML et CSS ?
Dans le cours HTML et CSS, tu apprendras entre autres : Structure sémantique des documents HTML5, Sélecteurs avancés et cascade CSS, Mises en page responsives avec Flexbox et Grid, Préprocesseur SASS - variables, mixins, imbrication.
Comment se passe l'apprentissage sur CodeWorlds ?
Sur CodeWorlds, chaque module est une série de courtes leçons avec un éditeur de code en direct, des quiz et des tâches pratiques. Ta progression te rapporte de l'XP et débloque de nouveaux lieux du monde Égypte antique.
Commence à apprendre HTML5 dès aujourd'hui
Rejoins CodeWorlds et découvre des méthodes d'apprentissage modernes qui rendent la programmation fascinante et accessible à tous.