

Incertain où
commencer?
Track
Certificat
Web Developer from Zero to Hero
4.6+
★★★★★
★★★★★
56 avis
Beginner
Discover the power to create captivating websites by harnessing HTML, CSS, and JavaScript. Immerse yourself in building dynamic web applications enhanced with cutting-edge frameworks and libraries. Afficher plus
HTML/CSS
JavaScript
React
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity TeamsWhat you will learn
- Comprendre le rôle fondamental des balises et des attributs dans la création de pages web.
- Comprendre la structuration des documents web en apprenant le flux de documents et les éléments de tête.
- Développer la capacité d'insérer et de gérer des images, de l'audio et de la vidéo, améliorant la gestion des médias web.
- Acquérir une maîtrise dans la création et l'organisation de formulaires, en maîtrisant l'utilisation des types d'entrée et des éléments de formulaire.
- 241 chapters
- 28 hours
- 226 tasks
Trusted by employees of leading companies
Learning track content
Module 1 / HTML Ultime
Explorez le fonctionnement interne du web. Apprenez comment les données circulent à travers les réseaux, découvrez le rôle des protocoles et démêlez les mystères des adresses IP et des noms de domaine. Acquérez une compréhension approfondie de la manière dont les navigateurs web et les serveurs communiquent pour fournir du contenu web.
Découvrez le pouvoir des balises pour structurer le contenu, des titres et paragraphes aux listes et tableaux. Apprenez à améliorer les éléments avec des attributs.
- BalisesPreview
- AttributsPreview
- Balises Paires et SimplesPreview
- Balisage de TextePreview
- Défi : Créer le Paragraphe de Votre Première Page WebPreview
- Défi : Créer une Page Web de Présentation PersonnellePreview
- Défi : Créer une Page Web de Présentation de FilmsPreview
- Balisage de Texte à Usage SpécialPreview
- Défi : Créer des Liens vers des Sites Web PopulairesPreview
- ValidationPreview
Le cœur de la structure d'un document HTML. Apprenez les composants d'un document HTML, y compris la déclaration doctype, l'en-tête et le corps. Comprenez le but de chaque élément et comment ils contribuent à la structure globale d'une page web.
Rendez une page web plus attrayante à l'aide de médias tels que des images, de l'audio et de la vidéo. Travaillez avec des données tabulaires structurées sous forme de tableaux.
Explorez la polyvalence des formulaires HTML. Apprenez à concevoir des formulaires intuitifs et conviviaux en exploitant des concepts et techniques clés. Découvrez comment les formulaires permettent l'interaction utilisateur et la soumission de données sur les sites web.
Module 2 / CSS Fundamentals
Learn what CSS is, how to connect it with HTML, and how to style HTML elements using selectors. Explore foundational concepts like text colors, user action pseudo-classes, and variables in CSS.
- What is CSS?Preview
- Connecting HTML and CSSPreview
- Selectors for Styling HTML ElementsPreview
- Challenge: Add Your First StylesPreview
- Challenge: Add The Styles using the Class NamePreview
- User Action Pseudo-ClassesPreview
- Challenge: User Action Pseudo-ClassesPreview
- Text ColorsPreview
- Effective Work with CSSPreview
- Challenge: Variables in CSSPreview
Discover how to style and format text on your web pages. Learn to apply custom fonts and explore various font properties to enhance the appearance of text.
Learn the fundamentals of the box model, which defines the layout and spacing of elements on a web page. Explore concepts such as box sizing, adding space to elements, working with block-level and inline elements, and utilizing structural and functional pseudo-classes for advanced styling.
- Box ModelPreview
- Box SizingPreview
- Adding Space to ElementsPreview
- Challenge: Box-SizingPreview
- Structural and Functional Pseudo-ClassesPreview
- Challenge: Structural Pseudo-ClassesPreview
- Element TypesPreview
- Working with Block-Level ElementsPreview
- Working with Inline ElementsPreview
- Challenge: Predict the Page LayoutPreview
Discover Flexbox, a powerful CSS layout method for arranging elements in rows and columns. Learn how to control the direction, alignment, and spacing of elements horizontally and vertically, as well as customize individual flex items for precise layouts.
Learn how to enhance the visual appeal of your web pages with CSS. Explore techniques for applying background colors and images, styling images, using decorative pseudo-elements, and adding shadows to create stunning designs.
Module 3 / Techniques CSS Avancées
Découvrez ce que les apprenants peuvent attendre de ce cours avancé sur le style HTML et CSS. Que devez-vous savoir avant de commencer le cours ? Quels sujets seront abordés ?
Positionnez et gérez les éléments sur les pages web. Apprenez les différentes propriétés de positionnement, découvrez comment utiliser l'ordre d'empilement pour contrôler la visibilité des éléments qui se chevauchent, et enfin, gérez le débordement de contenu.
- Qu'est-ce Que le Positionnement?Preview
- Positionnement RelatifPreview
- Défi : Positionnement RelatifPreview
- Positionnement AbsoluPreview
- Défi : Positionnement AbsoluPreview
- Positionnement FixePreview
- Défi : Positionnement FixePreview
- Positionnement StickyPreview
- Défi : Positionnement StickyPreview
- Ordre d'EmpilementPreview
- Défi : Ordre d'EmpilementPreview
- Débordement de ContenuPreview
Explorez la puissance des transitions et apprenez à améliorer l'expérience utilisateur. Découvrez comment animer les propriétés de manière fluide et progressive, créant des transitions d'état harmonieuses.
Apprenez à connaître la propriété d'animation et comment elle peut être utilisée pour créer des designs dynamiques et engageants. Découvrez comment créer des animations complexes en utilisant des keyframes et comment contrôler l'animation.
Explorez la propriété de transformation, qui permet de modifier l'apparence et la position des éléments sur une page web. Apprenez à mettre à l'échelle, à faire pivoter, à incliner et à déplacer des éléments en deux et trois dimensions. Combinez plusieurs transformations pour créer des effets plus complexes.
Les principes et techniques utilisés dans la conception adaptative/réactive visent à rendre les sites web et les applications accessibles et visuellement attrayants sur différents appareils, tailles d'écran et orientations.
Apprenez à connaître les préprocesseurs en CSS et comment ils peuvent aider à écrire un code plus efficace et facile à maintenir. Comprenez comment utiliser les préprocesseurs pour simplifier le flux de travail et générer un code CSS plus propre.
Module 4 / Introduction à JavaScript
Découvrez les fondamentaux de JavaScript, y compris son objectif et sa syntaxe. Apprenez à travailler avec la console pour la sortie et à utiliser des commentaires pour organiser et documenter votre code. Ces compétences fondamentales vous prépareront à une exploration plus approfondie des capacités de JavaScript.
Explorez les éléments de base de JavaScript en distinguant les littéraux et les variables. Comprenez les types de données principaux, y compris `null` et les tableaux, et apprenez à les manipuler à l'aide des méthodes de tableau.
Apprenez à manipuler les types de données de JavaScript grâce à des opérations essentielles. Maîtrisez l'affectation, les opérations mathématiques, l'incrémentation et la décrémentation, les comparaisons, les opérations logiques et la concaténation de chaînes.
- AffectationPreview
- Opérations MathématiquesPreview
- Opérations avec AssignmentPreview
- Incrémenter et DécrémenterPreview
- Défi : Opérations sur les VariablesPreview
- Opérations de ComparaisonPreview
- Opérations LogiquesPreview
- Défi : Comparer les VariablesPreview
- Concaténation de ChaînesPreview
- Défi : Construction de PhrasesPreview
Découvrez comment contrôler le flux de vos programmes avec des instructions conditionnelles. Maîtrisez `if`, `else` et `else if` pour indiquer à JavaScript comment prendre des décisions et exécuter du code en fonction de différentes conditions.
Rationalisez votre code en maîtrisant les structures de boucles de JavaScript. Explorez les boucles `while`, `do while` et `for`, et apprenez à contrôler leur comportement en utilisant `break` et `continue`. Déverrouillez la puissance des boucles pour effectuer des tâches répétitives efficacement.
Découvrez la puissance des fonctions en JavaScript. Apprenez à définir des fonctions, à travailler avec des arguments et à utiliser l'instruction `return` pour créer un code réutilisable et efficace. Maîtriser les fonctions améliorera votre capacité à écrire des programmes propres et modulaires.
Module 5 / Maîtrise de React
Acquérez une compréhension des principes fondamentaux de React. Vous apprendrez à propos de JSX (JavaScript XML), à construire des composants d'interface utilisateur réutilisables et à rendre des éléments. De plus, vous explorerez l'importance de la collecte de données et du rendu conditionnel dans les applications React. À la fin de cette section, vous aurez une base solide des concepts essentiels de React, vous préparant au succès dans les sujets plus avancés abordés dans les sections suivantes.
- Qu'est-ce Que React?Preview
- SPAs vs. MPAs dans le Développement WebPreview
- Comment React Fonctionne Avec le DOM VirtuelPreview
- Introduction à JSX dans ReactPreview
- Créer des Éléments JSX ComplexesPreview
- Rendu des Éléments dans ReactPreview
- Défi : Rendu d'ÉlémentPreview
- Composant ReactPreview
- Props dans ReactPreview
- Défi : Composants FonctionnelsPreview
- Rendu ConditionnelPreview
- Défi : Rendu Conditionnel - Notification de ChatPreview
- Défi : Rendu Conditionnel - Alerte BancairePreview
- Rendu d'une Collection de DonnéesPreview
- Défi : Rendre une Collection de DonnéesPreview
- Récapitulatif de la Section Introduction à ReactPreview
Explorez les différentes méthodes pour ajouter des styles aux applications React. Vous apprendrez à appliquer des styles à des composants individuels, à utiliser des styles dynamiques et à maintenir une approche de stylisation évolutive et facile à maintenir dans vos projets.
- Introduction à la Stylisation dans ReactPreview
- Styles en LignePreview
- Styles en Ligne en PratiquePreview
- Défi : Styles en LignePreview
- Styliser avec le Fichier CSSPreview
- Styliser avec le Fichier CSS en PratiquePreview
- Défi : Styliser Avec le Fichier CSSPreview
- Stylisation Avec Les Modules CSSPreview
- Organisation de la Structure des DossiersPreview
- Défi : Modules CSSPreview
- Résumé de la Section sur le Style dans ReactPreview
Fonctionnalités puissantes dans le développement moderne de React. Les hooks révolutionnent la manière dont nous écrivons des composants fonctionnels, offrant une méthode concise et intuitive pour gérer l'état et effectuer des effets secondaires. À l'inverse, le contexte nous permet de partager des données à travers l'arborescence des composants sans avoir à passer par les props. La combinaison des hooks et du contexte permet une gestion efficace de l'état et un partage simplifié des données dans les applications React.
- Introduction : Hooks et Contexte ReactPreview
- Hook useStatePreview
- Défi : Basculer la VisibilitéPreview
- Hook useRefPreview
- Défi : Créer un Composant de FormulairePreview
- Hook useEffectPreview
- Défi : Récupération et Affichage des DonnéesPreview
- Hook useMemoPreview
- Défi : Filtrage de la Liste de VoituresPreview
- ContextePreview
- Contexte en PratiquePreview
- Défi : Application du Monde de l'AstronomiePreview
- Résumé de la Section sur les Hooks et le Contexte de ReactPreview
Guide étape par étape sur la façon de démarrer un projet React dans le monde réel. De la configuration de votre environnement de développement à la compréhension de l'organisation du projet et des outils essentiels, vous acquerrez les connaissances et la confiance nécessaires pour vous lancer dans votre aventure React.
Module 6 / React Router
Apprenez les bases théoriques de concepts tels que l'URL, le domaine, le protocole, les paramètres de requête, et plus encore. Comprenez l'importance du routage dans les applications web et pourquoi nous avons besoin de la bibliothèque React Router.
Découvrez comment créer une application React complète à partir de zéro, avec la capacité d'afficher du contenu qui s'adapte en fonction de l'URL en utilisant la fonctionnalité de React Router.
- AperçuPreview
- Installation de React RouterPreview
- Activation de la Fonctionnalité de RoutagePreview
- Définir les RoutesPreview
- Récapitulatif des Premières ÉtapesPreview
- Importation de Composants avec Chargement ParesseuxPreview
- Implémentation d'un Composant de SecoursPreview
- Récapitulatif des Deuxièmes ÉtapesPreview
- Créer une NavigationPreview
- Exploration de la Logique Complète de React RouterPreview
- Résumé des Bases de React RouterPreview
Explorez l'utilisation des chaînes de requête pour partager et gérer l'état de l'application via les URL, travaillez avec différents types de données dans les paramètres de requête, et utilisez React Router pour la navigation et les effets basés sur les changements d'URL.
Requirements
- A computer with a browser - all browsers are supported.
- Your enthusiasm to enhance your tech skills.
- Everything else needed to start learning and practicing is already included in this course.
Over 200,000 5-star ratings and counting
Ruslan Kravchuk
L'essentiel est d'apprendre et de ne pas abandonner
Le matériel est bon, il y a beaucoup à apprendre, tout cela pour s'améliorer, et l'essentiel est d'apprendre ce que vous souhaitez....
Matteo Comune
Grâce à eux, j'apprends énormément…
Grâce à eux, j'apprends beaucoup plus rapidement car ils vous aident à tout comprendre depuis le début. C'est le meilleur site web pour aider les personnes sans connaissances préalables en informatique...
Yuliana Cadavid
super cours pour débutants
super cours pour débutants, ils testent vos connaissances à chaque leçon...
Elpunzon
Je profite pleinement de mon expérience Codefinity…
Je profite pleinement de mon expérience Codefinity en apprenant Python. L'apprentissage à votre rythme est idéal car il s'adapte à votre emploi du temps...
Alexandru Alexandru
C'est agréable d'apprendre avec Codefinity
C'est agréable d'apprendre avec Codefinity. C'est facile et il y a de bons exemples de ce que j'ai appris ici...
jacob Templet
Easy to follow along with and provides…
Facile à suivre et apporte un défi dans mon quotidien. Ce défi me motive à apprendre chaque jour...
Elan
Codefinity est un outil d'apprentissage complet…
Codefinity est un outil d'apprentissage complet qui vous aide à développer vos compétences en tant qu'ingénieur logiciel ou data scientist. Les exercices sont amusants et constituent un excellent moyen d'affiner vos compétences...
Thibault
Première fois que j'apprends à coder
Première fois que j'apprends à coder et je réussis grâce à Codefinity - merci...
Adrien Morel
Parfaitement conçu pour les débutants complets
Parfaitement conçu pour les débutants complets, le progrès pas à pas me donne confiance....
_Gracy
c'est tout simplement parfaitement bien expliqué
C'est tout simplement parfaitement bien expliqué ! Jusqu'à présent, je n'ai rencontré aucune difficulté car tout est si bien organisé...
Ruslan Kravchuk
L'essentiel est d'apprendre et de ne pas abandonner
Le matériel est bon, il y a beaucoup à apprendre, tout cela pour s'améliorer, et l'essentiel est d'apprendre ce que vous souhaitez....
Matteo Comune
Grâce à eux, j'apprends énormément…
Grâce à eux, j'apprends beaucoup plus rapidement car ils vous aident à tout comprendre depuis le début. C'est le meilleur site web pour aider les personnes sans connaissances préalables en informatique...
Yuliana Cadavid
super cours pour débutants
super cours pour débutants, ils testent vos connaissances à chaque leçon...
Elpunzon
Je profite pleinement de mon expérience Codefinity…
Je profite pleinement de mon expérience Codefinity en apprenant Python. L'apprentissage à votre rythme est idéal car il s'adapte à votre emploi du temps...
Alexandru Alexandru
C'est agréable d'apprendre avec Codefinity
C'est agréable d'apprendre avec Codefinity. C'est facile et il y a de bons exemples de ce que j'ai appris ici...
jacob Templet
Easy to follow along with and provides…
Facile à suivre et apporte un défi dans mon quotidien. Ce défi me motive à apprendre chaque jour...
Elan
Codefinity est un outil d'apprentissage complet…
Codefinity est un outil d'apprentissage complet qui vous aide à développer vos compétences en tant qu'ingénieur logiciel ou data scientist. Les exercices sont amusants et constituent un excellent moyen d'affiner vos compétences...
Thibault
Première fois que j'apprends à coder
Première fois que j'apprends à coder et je réussis grâce à Codefinity - merci...
Adrien Morel
Parfaitement conçu pour les débutants complets
Parfaitement conçu pour les débutants complets, le progrès pas à pas me donne confiance....
_Gracy
c'est tout simplement parfaitement bien expliqué
C'est tout simplement parfaitement bien expliqué ! Jusqu'à présent, je n'ai rencontré aucune difficulté car tout est si bien organisé...
Data Engineer
Certificat de Réalisation
Montrez vos compétences nouvellement acquises. Vous l'avez mérité
Discover more
Learning tracks
Seulement pour Ultimate
1 Cours
1 Projet
0 Task
Seulement pour Ultimate
7 Cours
326 Tâches
Seulement pour Ultimate
5 Cours
119 Tâches
Seulement pour Ultimate
5 Cours
150 Tâches
Seulement pour Ultimate
4 Cours
115 Tâches
Seulement pour Ultimate
6 Cours
101 Tâches
Seulement pour Ultimate
6 Cours
169 Tâches
Seulement pour Ultimate
5 Cours
132 Tâches
Seulement pour Ultimate
2 Cours
1 Projet
57 Tâches
Seulement pour Ultimate
6 Cours
307 Tâches
Seulement pour Ultimate
4 Cours
143 Tâches
Seulement pour Ultimate
5 Cours
170 Tâches
Seulement pour Ultimate
5 Cours
155 Tâches
Seulement pour Ultimate
6 Cours
286 Tâches
Seulement pour Ultimate
8 Cours
2 Projets
176 Tâches
Seulement pour Ultimate
2 Cours
77 Tâches
Seulement pour Ultimate
7 Cours
293 Tâches
Seulement pour Ultimate
1 Projet
0 Task
Seulement pour Ultimate
2 Cours
21 Tâches
Seulement pour Ultimate
5 Cours
112 Tâches
Seulement pour Ultimate
2 Cours
0 Task
Seulement pour Ultimate
3 Cours
39 Tâches
Seulement pour Ultimate
13 Cours
543 Tâches
Seulement pour Ultimate
13 Cours
543 Tâches
Seulement pour Ultimate
1 Cours
0 Task
Seulement pour Ultimate
0 Task
Seulement pour Ultimate
5 Cours
143 Tâches
Seulement pour Ultimate
3 Cours
79 Tâches
Seulement pour Ultimate
7 Cours
272 Tâches
Seulement pour Ultimate
5 Cours
217 Tâches
Seulement pour Ultimate
3 Cours
104 Tâches
Seulement pour Ultimate
2 Cours
13 Tâches
Seulement pour Ultimate
3 Cours
119 Tâches
Seulement pour Ultimate
1 Cours
15 Tâches
Seulement pour Ultimate
3 Cours
75 Tâches
Seulement pour Ultimate
3 Cours
31 Tâches
Seulement pour Ultimate
2 Cours
151 Tâches
Seulement pour Ultimate
3 Cours
49 Tâches
Seulement pour Ultimate
2 Cours
1 Projet
38 Tâches
Seulement pour Ultimate
3 Cours
36 Tâches
Seulement pour Ultimate
2 Cours
1 Projet
38 Tâches
Learning tracks
parcours
TEST TRACK 12
Débutant
4.0
(5938)
parcours
Développement Web Full Stack
Débutant
4.5
(57)
parcours
Devenez Développeur React
Intermédiaire
4.8
(5)
parcours
Maîtriser la Visualisation des Données
Intermédiaire
4.6
(7)
parcours
SQL de Zéro à Héros
Débutant
4.7
(91)
parcours
Essentiels de C++
Débutant
4.4
(17)
parcours
Python de Zéro à Héros
Débutant
4.7
(284)
parcours
Apprentissage Automatique Supervisé
Intermédiaire
4.9
(7)
parcours
Python au-delà de l'Intermédiaire
Débutant
5.0
(1)
parcours
Essentiels de Java
Débutant
4.3
(9)
parcours
Développement de Jeux avec Unity
Débutant
4.6
(7)
parcours
Become a Django Developer
Avancé
4.4
(27)
parcours
Flask for Dummies
Intermédiaire
4.5
(31)
parcours
Fondations du Développement Frontend
Débutant
4.6
(52)
parcours
Preparation for Data Science
Intermédiaire
4.5
(11)
parcours
Deep Learning Odyssey
Avancé
5.0
(3)
parcours
Développement Web Avec C#
Débutant
4.8
(97)
parcours
TEST E2E TRACK BEGINNER
Débutant
parcours
Test Track
Begginer
4.7
(3)
parcours
Skilled Python BackEnd Developer
Avancé
4.7
(261)
parcours
Test Recalculate
Débutant
parcours
Essentiels d'Excel
Débutant
4.5
(33)
parcours
Full-Stack .NET Developer Journey
Intermédiaire
4.8
(128)
parcours
Full-Stack .NET Developer Journey
Intermédiaire
4.8
(128)
parcours
Test track with rating
Avancé
4.0
(4)
parcours
TEST TEST TRACK
Débutant
parcours
Data Analyst Foundation
Débutant
4.7
(110)
parcours
Maîtrise du C++
Avancé
parcours
Java Web
Avancé
4.5
(30)
parcours
Devenez un Ingénieur QA
Débutant
4.5
(43)
parcours
Production Vidéo avec Adobe
Débutant
parcours
Digital Marketing Essentials
Débutant
parcours
Outils de Conception UI/UX
Débutant
parcours
Test image upload track
Débutant
parcours
Essential Office Skills
Débutant
4.6
(24)
parcours
GitHub from Zero to Hero
Débutant
parcours
No-Code Website Development
Débutant
parcours
C Programming & Low-Level Development
Débutant
parcours
testes
Débutant
4.7
(3)
parcours
Test translation track
Intermédiaire
parcours
Test CMS Track
Débutant
4.7
(3)
Become a Development expert
Interactive exercises
Learning videos
AI-assistant on all courses
Workspaces for designing your own projects
Ready to get started?
ProBest intro offer | UltimateA complete experience to kickstart your career | |
---|---|---|
85+ Top-Rated courses | ||
Completion certificates | ||
AI-Assistant in all courses | ||
20+ hands-on Real-world projects | ||
Personalized study tracks | ||
Unlimited workspaces | ||
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity Teams