Formation Codage
L'expert du CodeWeb !
Apprends à coder un site comme un pro
Se lancer dans le web, c'est :
- Travailler de chez toi (en France ou à l'étranger)
- Bénéficier d’une indépendance financière
- Relever des défis personnels et professionnels
- Obtenir une marge d'environ 91% sur la vente de sites
- Avoir une gestion client facile
- Vivre de ta passion
Dans cette formation complète Codage, vous apprendrez tout le nécessaire afin de coder un site web comme un professionnel !
INTRODUCTION
NOUS COMMENÇONS PAR L’EXPLICATION DU DÉROULEMENT DE LA FORMATION, LES BONS RÉFLEXES À ADOPTER ET LE MATÉRIEL APPROPRIÉ
- Présentation des formateurs
- À qui s’adresse cette formation ?
- De quoi as-tu besoin pour suivre la formation ?
- Comment faire un site en 2025 ?
- Le Codage, c'est quoi ?
- Quel type de site pouvons-nous réaliser avec un Codage HTML, CSS & JavaScript ?
LE COMMENCEMENT
- Qu'est-ce que le développement web ? (Frontend vs Backend)
- Outils essentiels : Éditeurs de code (VS Code), navigateurs web et devtools
- Structure d'un site web : HTML comme squelette, CSS pour le style, JS pour l'interactivité
- Premier projet : Une page "Hello World" statique
- Présentation des outils indispensables du Cpanel
- Introduction au web : structure des pages, balises essentielles, sémantique HTML5
- Balises de base : `html`, `head`, `body`, paragraphes, titres, listes
- Création de formulaires, tableaux et multimédia (images, vidéos)
- Formulaires : Inputs, boutons, validation basique
- Sémantique HTML5 : 'header' , 'nav' , ' section' , 'footer'
- Construire un site statique simple comme une page de CV personnel
- Accessibilité : Attributs ARIA et bonnes pratiques
STYLING AVANCÉ AVEC CSS
- Sélecteurs CSS : Classes, ID, pseudo-classes
- Propriétés de base : Couleurs, fonts, marges, paddings, borders
- Layouts : Flexbox et Grid pour des designs modernes
- Design : styliser une landing page responsive pour mobile et desktop
- Animations et transitions : Effets simples sans JS
- Frameworks intro : Aperçu de Bootstrap pour accélérer le styling
- Transitions, animations keyframes, et effets interactifs
- Préprocesseurs comme SASS/SCSS pour un code modulaire
- Projet : Créer un portfolio animé avec effets hover et parallax
INTERACTIVITÉ AVEC JAVASCRIPT
- Bases de JS : Variables, types de données, opérateurs, conditions (if/else), boucles
- Manipulation du DOM : Sélectionner éléments, modifier contenu, événements (click, submit)
- Fonctions et scopes : Écrire du code réutilisable
- Tableaux et objets : Gestion de données simples
- Intro à ES6 : Arrow functions, let/const, template literals
- Debugging : Console.log et outils dev
- Gestion des événements, callbacks et promises
- Introduction à Vanilla JS avancé : closures, prototypes et modules ES6
- Outils comme Babel et Webpack pour des builds optimisés
- Projet : Développer un todo-list interactif avec stockage local
SÉCURITÉ ET DÉVELOPPEMENT WEB FRONTEND
- Introduction aux risques frontend : Pourquoi la sécurité concerne aussi le développeur frontend
- XSS (Cross-Site Scripting) : Types (reflected, stored, DOM-based), comment ça fonctionne, et comment s'en protéger (échappement, Content Security Policy – CSP)
- CSRF (Cross-Site Request Forgery) : Comprendre l'attaque et les protections (tokens anti-CSRF, SameSite cookies)
- Validation et sanitisation des inputs côté client (et pourquoi ce n'est pas suffisant seul)
- Sécurité des formulaires : Prévention du spam, protection contre les bots (reCAPTCHA intro)
- Gestion sécurisée des données sensibles : Ne jamais exposer d'API keys dans le code JS, utilisation de variables d'environnement (même en frontend avec prudence)
- HTTPS et Mixed Content : Pourquoi forcer HTTPS et comment détecter les problèmes
- Bonnes pratiques générales : Utiliser Subresource Integrity (SRI) pour les CDN, headers de sécurité basiques que le frontend peut influencer
- Outils pratiques : Scanner son site avec des outils gratuits (OWASP ZAP intro, Lighthouse security audit)
INTÉGRATION COMPLÈTE HTML/CSS/JS
- Création de sites full-front-end : navigation, modals et sliders
- Optimisation pour le SEO et l'accessibilité (ARIA, semantics)
PROJETS PRATIQUES INTÉGRÉS
- Projet 1 : Bâtir un site e-commerce basique (panier, filtres) sans back-end
- Projet 2 : Site portfolio personnel (HTML structure + CSS design + JS animations)
- Projet 3 : Calculatrice web interactive (JS logique + CSS UI)
- Projet 4 : Galerie photo responsive avec filtres (combinaison des trois langages)
- Projet 5 : Développer un jeu simple
- Intégration d'API simples : Fetch pour afficher des données externes (ex. : Météo via API gratuite)
- Versioning avec Git : Bases pour collaborer et sauvegarder votre code
SUJETS AVANCÉS ET MEILLEURES PRATIQUES
- Performance : Optimisation des images, minification CSS/JS
- Sécurité basique : Éviter les XSS en JS, HTTPS intro
- Frameworks preview : Aperçu de React ou Vue.js pour scaler
- Testing : Unit tests avec Jest pour JS
- Déploiement : Héberger sur GitHub Pages ou Netlify
- Carrières : Conseils pour freelancing, CV tech et interviews
- Comment mettre en avant ses compétences sécurité sur son CV et en entretien
PLUS DE VALEUR ET DE PROFONDEUR
- Performance et optimisation
- Intro aux frameworks (React/Vue)
- Testing et déploiement
DIPLÔME DÉVELOPPEUR WEB + MISE EN RELATION AVEC LES RECRUTEURS
Formation Codage
Devient un expert du CodeWeb !F.A.Q
Ils sont très minimes :
- Savoir utiliser un ordinateur
- Avoir une connexion internet
- Savoir faire des copier-coller
- Savoir ce qu’est une URL
Et Hop ! Tu as le niveau !
Il te faut un ordinateur portable ou de bureaux. Pour ce qui est de la puissance de ton ordinateur : un ordinateur normal suffit largement.
Si tu veux payer la formation par mois, il suffit juste de nous le dire lors de l’inscription.
Tu auras un accès à un groupe d’entraide spécifique de la formation avec ton formateur disponible tous les jours !
Oui TOTALEMENT ! Le but de la formation est de t’apprendre le métier de développeur web. Création, modification, maintenance, tu seras en mesure de réaliser tes propres sites web ainsi que ceux de tes futurs clients !
Elle commence directement après ton inscription.
À la fin de la formation, nous te mettrons directement en relation avec des recruteurs. Nous te donnerons également de la visibilité pour trouver un emploi !