Culture Code : Les Bases du Code pour les Webmasters
Une formation pour dompter votre appréhension du code en vous initiant aux fondamentaux du HTML, CSS, JS, PHP et SQL tout en exploitant l'intelligence artificielle pour gagner en autonomie en tant que Webmaster.
La Formation en 4 Points
- Pour qui : Destinée aux débutants ou webmasters qui ressentent une pointe de panique à la vue d'une ligne de code (HTML, CSS, JS, PHP, SQL).
- Temps d'application : Prévoir au moins 2 semaines.
- Mise en pratique : Pratiquez au fil des leçons, testez-vous avec des quizzs et terminez par des missions pratiques, comme pour un vrai client.
- Objectif : Visez la sérénité face au code, étoffez votre culture du web en maîtrisant des bases universelles et apprenez à tirer parti de l'intelligence artificielle.
Pourquoi cette formation ?
Parce que je vois trop souvent des Webmasters qui peinent à naviguer dans le monde du code.
Et ce n’est pas normal !
Dans cette formation, nous allons explorer chacun de ces langages.
Vous recevrez les connaissances fondamentales qui vous permettront d’être autonome si jamais vous devez intervenir directement dans le code.
Et les cours qui y sont présentés vous serviront de guide pour toute votre carrière ensuite.
Comment je le sais ?
Cette formation est issue de la formation Devenir Freelance Webmaster, et je sais que les élèves reviennent souvent sur ces cours et l’utilise comme un support.
Attention : ce programme ne fera pas de vous un développeur expérimenté. Ce n’est pas l’objectif.
Néanmoins, il vous donnera les outils nécessaires pour comprendre comment tout cela fonctionne et devenir autonome.
Un peu comme un chauffeur de taxi qui saurait enfin où se trouve la trappe pour ouvrir son capot et changer son huile (pratique quand c’est notre outil au quotidien)
Parce que comprenez-le bien, tous les constructeurs de pages que nous utilisons en mode « no code » (Elementor, Divi, Kadence etc.) sont construits sur ces fondations.
Maîtriser ces bases élargit considérablement votre champ d’action.
Et ce n’est pas tout !
La formation inclut des exemples concrets d’utilisation de l’intelligence artificielle et de Chat GPT pour aller encore plus loin.
Le programme complet de la formation
Les Bases du Frontend et Backend
Dans cette première partie, nous allons voir ensemble les bases d'un site internet et découvrir ce qu'est le frontend. Nous terminerons en installant les outils dont vous aurez besoin pour la suite.
- Comment fonctionne un site Internet ?
- Qu'est-ce que le Frontend ?
- Qu'est-ce que le Backend ?
- Quels outils installer sur votre ordinateur (Mac / Windows) ?
Devoirs du module
HTML
Dans cette première partie, nous allons plonger dans le monde du HTML. De la structure de base d'une page à l'interaction avec le navigateur, nous couvrirons tous les éléments fondamentaux pour vous familiariser avec ce langage.
- Introduction : Premiers pas dans le HTML
- Structure d'une page : Les fondations d'un site
- Visualiser un fichier HTML sur le navigateur : Passez de la théorie à la pratique
- Contenu de la balise HEAD : Les métadonnées indispensables
- Texte : Formatez votre contenu avec aisance
- Listes : Organisez vos informations
- Liens : Naviguez entre les pages
- Images : Rendez votre site attractif
- Tableaux : Présentez des données de manière claire
- Iframe : Intégrez du contenu externe
- Formulaires : Interagissez avec vos utilisateurs
- Commentaires et tags sémantiques : Comprenez le rôle des nav, footer, etc.
- Attribut style : Personnalisez votre site
- Div : Structurez votre contenu
- Indenter le code : Écrivez du code propre
- Voir le code source des sites et le DOM : Explorez et comprenez les sites existants
Devoirs du module
CSS
Dans ce second module, nous allons explorer en profondeur le langage CSS. Vous apprendrez à styliser votre site, à comprendre les différentes unités de mesure, et même à utiliser l'intelligence artificielle pour générer du CSS.
- Introduction : Plongez dans l'univers du CSS
- Ajouter du CSS dans l'HTML : Intégrez le style à votre structure
- Syntaxe : Les règles pour écrire du CSS
- Couleurs : Donnez vie à votre site
- Unités de mesure des textes : Choisissez la bonne taille
- Fonts : Variez les typographies
- Jouer avec le texte : Manipulez et stylisez votre contenu
- Selecteurs : Ciblez les éléments à styliser
- Unités de mesure VH/VW : Adaptez votre design à toutes les tailles d'écran
- !important et gestion des priorités : Maîtrisez la cascade
- Media Queries : Rendez votre site responsive
- Display : Comprenez les différents types d'affichage
- Variables : Simplifiez et centralisez votre code
- Fonctions : Automatisez vos styles
- Box Model : Comprenez les espaces et dimensions
- Box Model - Box Sizing : Contrôlez les dimensions avec précision
- Float : Positionnez vos éléments
- Position : Fixez ou déplacez les éléments comme vous le souhaitez
- Flexbox : Structurez votre design avec flexibilité
- CSS Grid : Organisez vos éléments en grilles
- Utiliser l'IA pour générer du CSS : Innovez avec la technologie
- Minifier : Optimisez votre code
- Pour aller plus loin : Les Frameworks CSS : Découvrez les outils des pros
Devoirs du module
JS
Dans ce module, nous aborderons les bases du langage JavaScript, un incontournable du développement web. Vous apprendrez à manipuler des variables, créer des conditions, des boucles et même à interagir avec le DOM. Notez bien que ce module est une introduction : il ne fera pas de vous un développeur frontend, mais vous dotera d'une solide compréhension des possibilités offertes par JavaScript.
- Introduction : Plongez dans le monde du JavaScript
- ES6 : Qu'est ce que c'est que cette mention ?
- Ajouter du JavaScript dans le code HTML : Intégrez l'interactivité à votre site
- Variables et Types de données : Stockez et manipulez des informations
- Point virgule en fin de ligne ? : Comprenez les règles syntaxiques
- Commentaire : Documentez votre code
- Faire des calculs : Utilisez JavaScript comme calculatrice
- Opérateurs de comparaison : Testez et comparez
- Conditions : Contrôlez le flux de votre code
- Boucles : Répétez des opérations
- Fonctions : Créez des blocs de code réutilisables
- Événements : Réagissez aux actions des utilisateurs
- Objet Document : Manipulez le DOM
- Pour aller plus loin - La Programmation Orientée Objet : Découvrez un autre paradigme
- Erreurs courantes en JavaScript : Évitez les pièges
- Exemples d'utilisation de JavaScript : Inspirez-vous pour vos projets
- Répondre à des besoins spécifiques de vos clients avec JavaScript et Chat GPT : Utilisez l'IA pour vous aider
- Minifier : Optimisez votre code pour la production
- Démo de JQUERY : Découvrez une librairie toujours utile
- Appel API et format JSON : Échangez des données avec le web
- Utiliser Chat GPT pour comprendre du code : Démystifiez les codes complexes
- Codes JavaScript connus à copier/coller : Gagnez du temps avec des snippets
- Pour aller plus loin : les Frameworks JS : Découvrez les outils modernes
Devoirs du module
Bootstrap
Dans ce module, vous découvrirez Bootstrap, un framework CSS populaire qui facilite le développement web. Des grilles aux composants, en passant par les utilities, vous apprendrez comment utiliser efficacement Bootstrap pour créer des sites web réactifs et élégants.
- Introduction : Entrez dans l'univers de Bootstrap
- Installation : Configurez votre environnement de travail
- Container VS Container-fluid et Responsive : Comprenez les différences et l'importance du design réactif
- Grid : Maîtrisez le système de grille pour un layout impeccable
- Typography : Soignez le style de vos textes
- Images : Utilisez les classes pour des images parfaites
- Table : Créez des tableaux élégants et informatifs
- Components : Découvrez les composants prêts à l'emploi
- Utilities : Utilisez les helpers pour gagner du temps
- Surcharger le CSS : Personnalisez Bootstrap à votre goût
- Icons : Intégrez des icônes pour un design plus interactif
- Thèmes HTML/Bootstrap : Explorez les possibilités de personnalisation
Devoirs du module
Première mission
Dans ce module, nous passons de la théorie à la pratique totale. Vous serez plongé dans une simulation réaliste de mission freelance. Votre objectif : créer une page web pour un client en suivant les contenus et les directives fournies. Vous aurez toute la liberté de mettre en œuvre les compétences que vous avez acquises tout au long de la formation, y compris l'utilisation de l'intelligence artificielle.
- Introduction : Comprendre les attentes du client et les livrables
- Contenu fourni : Prenez connaissance des éléments à intégrer
- Structure de la page : Planifiez l'architecture du site en fonction des besoins du client
- Liberté technique : Utilisez HTML, CSS, JS ,Boostrap et même l'IA pour accomplir la mission
- Objectif : Que votre client soit satisfait
- Finalisation : Révisez et testez la page avant la livraison
Devoirs du module
PHP Fondamentaux
Plongez dans le cœur du développement web avec notre module dédié à PHP, le langage de script côté serveur qui alimente une grande partie du web moderne. De la syntaxe de base aux concepts avancés, ce module est conçu pour vous doter des compétences nécessaires pour comprendre le fonctionnement des sites web dynamiques.
- Introduction : Entrez dans le monde de PHP et découvrez comment ce langage façonne le web.
- Syntaxe PHP : Apprenez les règles fondamentales pour écrire des scripts PHP efficaces.
- Commentaires : Maîtrisez l'art de documenter votre code PHP pour une maintenance et une collaboration améliorées.
- Variables : Comprenez et utilisez les variables PHP pour stocker et manipuler des données dynamiquement.
- Opérateurs et Conditions : Appliquez la logique PHP avec des opérateurs et des structures conditionnelles pour un contrôle de flux précis.
- Boucles : Utilisez les boucles pour exécuter du code de manière répétée et efficace.
- Fonctions : Simplifiez votre code en créant des fonctions réutilisables pour des tâches communes.
- Include : Organisez votre code PHP en incluant des fichiers et réduisez la redondance.
- Superglobales : Exploitez la puissance des superglobales pour gérer les informations à travers les pages.
- Méthode GET : Récupérez et utilisez les données des utilisateurs envoyées via l'URL.
- Méthode POST : Apprenez à soumettre des données de formulaire sécurisées avec la méthode POST.
- Session : Gérez les informations des utilisateurs de manière persistante avec les sessions PHP.
- Cookie : Stockez des données côté client pour une expérience utilisateur personnalisée.
- Utilisation de l'IA : Comment utiliser Chat GPT à vore avantage.
Devoirs du module
SQL
Découvrez la gestion des bases de données avec MySQL et devenez compétent dans l'utilisation de PhpMyAdmin, un outil essentiel pour tout webmaster. Ce module vous emmène à travers les étapes de la création, de la manipulation et de la maintenance des bases de données, clés de voûte des sites web dynamiques.
- Introduction MySQL : Familiarisez-vous avec MySQL, le système de gestion de bases de données relationnelles.
- PhpMyAdmin : Apprenez à naviguer et à utiliser PhpMyAdmin pour gérer vos bases de données MySQL.
- Création de base de données : Créez votre première base de données et structurez-la en utilisant PhpMyAdmin.
- Export / Import : Maîtrisez l'importation et l'exportation de bases de données pour faciliter le transfert et la sauvegarde de données.
- Introduction SQL : Commencez avec les fondamentaux de SQL, le langage de requête standard pour interagir avec les bases de données.
- Select : Apprenez à récupérer les données avec précision grâce à la commande SELECT.
- Update : Mettez à jour les données existantes dans vos tables avec la commande UPDATE.
- Delete : Supprimez les données inutiles ou obsolètes de manière sûre en utilisant DELETE.
- Insert : Ajoutez de nouvelles données dans vos bases de données avec la commande INSERT.
- Autres requêtes SQL : Élargissez votre maîtrise de SQL avec des requêtes avancées et des fonctions spécifiques.
- Exemple du blog : Intégrez SQL et PHP en travaillant sur un projet de blog réel pour consolider vos connaissances.
- Utilisation de l'IA: Comment utiliser ChatGPT à votre avantage ?
Devoirs du module
Seconde mission
Ce module vous propulse dans une expérience immersive de développement web. Vous êtes maintenant dans la peau d'un développeur freelance accomplissant une mission réaliste : dynamiser le site internet statique que vous avez créer dans la première mission pour votre client. Vous aurez l'occasion de mettre en pratique la programmation côté serveur pour rendre le site du client interactif et géré par une base de données.
- Introduction : Comprendre les besoins clients.
- Authentification : Mettez en place un système de connexion/déconnexion sécurisé avec session PHP.
- Base de données : Créez et structurez une base de données MySQL pour stocker le contenu du site.
- Dashboard : Développez une interface d'administration pour la gestion du contenu.
- Intégration de données : Affichez le contenu dynamique sur le site en utilisant PHP et SQL.
- Interactivité : Introduisez la capacité de modifier l'image du site via le dashboard.
- Liberté technique : Appliquez les meilleures pratiques de développement avec HTML, CSS, JS, Bootstrap et l'IA.
- Objectif : Obtenez la satisfaction de votre client avec un site web enrichi et dynamique.
Devoirs du module
Important
- Cette formation n’est PAS une façon facile et rapide de faire de l’argent sur internet en 3 clics
- Cette formation ne vous permettra PAS de devenir un développeur frontend. Il s'agit d'une formation destinée aux webmasters qui cherchent à être autonomes et plus sereins avec le code.
Récapitulatif
Voilà, ce à quoi vous aurez accès, si vous rejoignez la formation maintenant :
- Accès immédiat et à vie aux 5 modules de la formation sur l'espace membre
- Accès à vie à toutes les mises à jour de la formation ainsi que les différents bonus qui viendront s'ajouter
Culture Code : Les bases du Code pour les Webmasters
La Formation
Accès à vie
Que se passe-t-il après votre paiement ?
Une fois le paiement réalisé vous allez recevoir un email pour accéder à la formation.
Vous pourrez immédiatement commencer à suivre les cours.
Pourquoi devriez-vous rejoindre la formation maintenant ?
- Vous allez réduire votre stress vis à vis du code.
- Vous allez pouvoir proposer des missions plus avancées à vos clients.
- Vous allez même pouvoir proposer des sites one page sans utiliser forcément un CMS .
- En rejoignant la formation maintenant, vous aurez un accès instantané à toutes les ressources pédagogiques pour commencer à apprendre sans délai.
- La formation est améliorée au fur et à mesure des retours des nouveaux élèves.
- Vous aurez accès à vie à la formation, et donc aux futurs contenus ajoutés.
Et si vous n'êtes pas satisfait ?
C’est simple ! Je vous rembourse à 100% dans les 7 jours, sur simple email de votre part.
Juste une chose avant de commencer
Vous avez certes la possibilité de simplement regarder les vidéos de la formation sans mettre en pratique ce que vous apprenez.
Cependant, en agissant de la sorte, vous n’apprendrez pas grand-chose. Je vous encourage vivement à pratiquer et à accomplir au minimum les exercices proposés. C’est encore mieux si vous en faites davantage !
Les questions que vous vous posez peut être ?
Cette formation est conçue pour tous les niveaux.
- Avoir déjà au moins créé un site avec WordPress
- Avoir été déjà été confronté à une situation de vente
Note : Si vous souhaitez suivre cette formation avant même de savoir faire et vendre un site internet, alors je vous invite à suivre 2 fois la formation : une fois avant, et une fois après avoir vendu votre premier site. Dans cette optique, cette formation peut être un raccourci dans votre carrière.
Oui, une fois que vous vous êtes inscrit, vous avez un accès à vie à toutes les ressources et mises à jour de la formation.
Elle est d’ailleurs conçu pour que vous puissiez l’utiliser comme un modèle qui vous sera utile tout au long de votre carrière.
Oui, vous êtes encouragés à utiliser les codes fournis pour pratique de votre côté et chaque module contient un Quizz.
A la fin un devoir de type mission client vous est demandé.
Non, cette formation est destinée aux webmasters qui cherchent à être plus autonomes et à l’aise avec le code. Elle ne vous prépare pas à devenir un développeur spécialisé.
La formation est disponible sur un espace privé accessible à vie depuis n’importe quel appareil (ordinateur, tablette, smartphone).
Chaque module est composé de :
- vidéos d’en général de moins de 15 minutes pour être facilement suivies
- textes pour accompagner les vidéos
- liens vers des outils externes utilisés dans les vidéos
Votre ordinateur et internet, c’est tout.
Non. Comme la plupart des formations en ligne cette formation n’est pas dispensé par une école reconnue par l’état.
Cependant, si vous le souhaitez, et sous réserve que vous ayez réalisé tous les exercices, je vous transmettrais un certificat validant que vous avez suivi 100% de la formation.
A noter que sur le marché du travail, et encore plus dans le domaine du digital, l’expérience et la passion compte bien plus que les diplômes (j’ai été recruteur en agence).
Non et elle ne le sera jamais.
Témoignages des élèves des formations
Pourquoi WebAndFree ?
Je m’appelle Johann ROCHE et je vais être votre formateur pour les prochaines semaines.
J’ai réalisé mon premier site en 1998 par passion, puis suivi un cursus Web dont 7 ans en Agence web et 4 ans en tant que Freelance.
En 1999, la conseillère d’orientation m’a demandé :
“Tu veux faire quoi plus tard ?”
J’ai répondu “Webmaster” !
A l’époque elle ne savait même pas ce que c’était. Pour ma part cela faisait déjà quelques années que je bidouillais des sites la nuit sur mon ordinateur et que je partageais mes découvertes avec d’autres passionnés.
Plus tard dans mon cursus j’ai travaillé sur tous les types de projet web (de la petite page d’attente à 150€ au gros projet sur mesure à plus de 30 000 €).
J’ai eu plusieurs rôles : stagiaire, apprentis, intégrateur, développeur, technico-commercial, chef de projet, responsable technique, formateur, indépendant… et plus récemment WebEntrepreneur.
Aujourd’hui, j’ai simplement envie de partager mon expérience de ce métier et de le synthétiser dans des formations. C’est la suite logique de ma carrière.
Quelques dates clés résumant mon parcours
1998
2001
2005
2007
2010
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
Rejoignez la newsletter
- Des actualités à propos de la création de site
- Des conseils pour devenir Freelance
- Des astuces de Digital Nomad
