Développement Web : créer son premier site de A à Z
Par DevWorkWeb
Ce cours est le point d'entrée du Parcours Développeur Full Stack de DevWorkWeb. Il s'adresse à toute personne n'ayant jamais programmé et souhaitant comprendre, de façon concrète, comment un site web est construit puis publié en ligne. Plutôt que d'accumuler de la théorie, chaque notion est immédiatement mise en pratique sur un seul et même projet fil rouge : un portfolio personnel.
Ce que vous allez apprendre
Prérequis
Aucun. Un ordinateur (Windows, macOS ou Linux) et une connexion internet suffisent.
Public cible
- • Grands débutants souhaitant découvrir le développement web
- • Personnes en reconversion professionnelle vers le métier de
- • Étudiants souhaitant consolider les bases avant d'aborder un
Programme détaillé
10 modules · 42 leçons1. Comprendre le Web 4 leçons
Avant d'écrire la moindre ligne de code, on installe les bases : comment fonctionne Internet, comment un site arrive dans un navigateur, et avec quels outils on va travailler tout au long du cours.
- Comment fonctionne Internet ? 10 min
- Client / serveur et requêtes HTTP 12 min
- Le rôle du navigateur et des outils développeur 10 min
- Installer son environnement (VS Code, extensions, 15 min
2. HTML 5 leçons
Le langage qui structure le contenu de toutes les pages web : titres, paragraphes, listes, liens, images, tableaux et formulaires.
- Structure d'une page HTML (doctype, head, body) 12 min
- Balises de texte et sémantique (h1-h6, p, section, 15 min
- Listes, liens et images 12 min
- Tableaux HTML 10 min
- Formulaires HTML (input, select, textarea) 15 min
3. CSS 6 leçons
La mise en forme visuelle : sélecteurs, box model, couleurs, typographie, puis les deux outils de mise en page modernes, Flexbox et Grid.
- Syntaxe CSS et sélecteurs 12 min
- Le box model (marge, bordure, padding) 12 min
- Couleurs, typographie et unités (px, %, rem) 12 min
- Flexbox : aligner et distribuer les éléments 18 min
- CSS Grid : construire une mise en page en 2D 18 min
- Positionnement et z-index 10 min
4. Responsive Design 4 leçons
Adapter un site à toutes les tailles d'écran : media queries, approche mobile-first et images responsives.
- Les media queries 12 min
- L'approche mobile-first 10 min
- Images et contenus responsives 10 min
- Tester son site sur différents appareils 8 min
5. JavaScript 4 leçons
Les fondamentaux du langage qui rend une page interactive : variables, conditions, boucles et fonctions.
- Variables et types de données 12 min
- Conditions (if / else, opérateurs) 12 min
- Boucles (for, while) 10 min
- Fonctions et paramètres 15 min
6. DOM 4 leçons
Manipuler la page depuis JavaScript : sélectionner des éléments, modifier leur contenu et leurs styles, et réagir aux actions de l'utilisateur.
- Sélectionner des éléments (querySelector) 12 min
- Modifier contenu, attributs et styles 12 min
- Créer et supprimer des éléments dynamiquement 12 min
- Écouter des événements (click, submit, input) 15 min
7. Formulaires (interactivité) 3 leçons
Rendre un formulaire réellement utilisable : récupérer les données saisies, les valider et afficher des messages d'erreur clairs.
- Récupérer les données d'un formulaire en 12 min
- Validation côté client 15 min
- Affichage dynamique des messages d'erreur 10 min
8. Git 4 leçons
Suivre l'évolution de son code et le sauvegarder en ligne : les commandes essentielles de Git et la création d'un dépôt GitHub.
- Installer Git et configurer son identité 8 min
- init, add, commit : le cycle de base 15 min
- Créer un dépôt sur GitHub 10 min
- push et pull : synchroniser son code 12 min
9. Mise en ligne 3 leçons
Passer du fichier local au site accessible publiquement : choix d'un hébergeur, déploiement, et introduction aux noms de domaine.
- Choisir un hébergeur (Netlify, Vercel, GitHub 10 min
- Déployer son site en quelques clics 15 min
- Introduction aux noms de domaine 8 min
10. Projet final 5 leçons
Tout le contenu du cours mobilisé dans un projet concret : la création d'un portfolio professionnel responsive, du cahier des charges au déploiement.
- Cahier des charges du portfolio 10 min
- Structuration du projet (arborescence, fichiers) 10 min
- Intégration HTML/CSS de chaque section 40 min
- Ajout des interactions JavaScript 25 min
- Déploiement et présentation finale 15 min
🎯 Projet final
Portfolio professionnel responsive
Portfolio professionnel responsive ----------------------- ----------------------------------------------- **À propos du cours** Ce cours est le point d'entrée du Parcours Développeur Full Stack de DevWorkWeb. Il s'adresse à toute personne n'ayant jamais programmé et souhaitant comprendre, de façon concrète, comment un site web est construit puis publié en ligne. Plutôt que d'accumuler de la théorie, chaque notion est immédiatement mise en pratique sur un seul et même projet fil rouge : un portfolio personnel. **Public cible** - Grands débutants souhaitant découvrir le développement web - Personnes en reconversion professionnelle vers le métier de développeur - Étudiants souhaitant consolider les bases avant d'aborder un framework (React, Laravel...) **Prérequis** Aucun. Un ordinateur (Win
- Accès à vie
- Certificat inclus
- Exercices pratiques
- Mises à jour gratuites