Créer son portfolio : pas à pas

🔁Cycle complet de A à Z

Du dossier vide au site en ligne, sans rien oublier.

1. Les 3 lieux en un coup d'œil

Mon ordinateurVS Code + Git

📁 le dossier portfolio
✏️ vous écrivez le code
💾 Git garde l'historique

git push

GitHubLe dépôt en ligne

📦 une copie de votre code
🕘 tout l'historique
🔗 relié à Render

déploiement auto

RenderLe site publié

⚙️ lit le dépôt GitHub
🚀 publie en ~30 s
🌍 donne l'URL publique

2. Le film du parcours : A → J

3. Ce que vous devez voir à chaque phase

127.0.0.1:5500/index.html

✅ Phase 1 : votre page s'affiche avec Live Server

github.com/VOTRE-PSEUDO/portfolio

VOTRE-PSEUDO / portfolioPublic

⎇ main

📁 cssInitial commit
📁 imgInitial commit
📄 index.htmlInitial commit

✅ Phase 2 : vos fichiers apparaissent sur GitHub

dashboard.render.com

portfolio● Live

https://portfolio-xxxx.onrender.com

⎇ main · a1b2c3d Initial commit

✅ Phase 3 : le service est « Live » et l'URL s'ouvre

4. Toutes les commandes, dans l'ordre

5. La boucle de chaque jour

Bleu : sur votre ordinateur · violet : GitHub · vert : Render (30 s). Rechargez avec Ctrl + F5.

6. Pièges fréquents et solutions

git: 'add.' is not a git command

Il manque l'espace avant le point.

✓ git add .

error: src refspec main does not match any

Aucun commit n'existe encore sur la branche.

✓ git add . puis git commit -m "Initial commit"

Using 'master' as the name for the initial branch

Git crée « master » par défaut.

✓ git branch -M main

Author identity unknown

Git ne connaît pas encore votre nom.

✓ git config --global user.name "Prénom Nom" et user.email

Permission denied to … 403

Windows a mémorisé un autre compte GitHub.

✓ cmdkey /delete:git:https://github.com puis relancer le push avec le bon compte

Render : « Not Found »

Mauvaise URL (suffixe ajouté) ou pas de fichier index.html.

✓ Copiez l'URL exacte du tableau de bord. Vérifiez index.html à la racine (pas index.php).

Une fois le site en ligne, vous ne répétez que la boucle : modifier, add, commit, push.

⚖️CV, ATS, LinkedIn, portfolio : la différence

4 outils, 4 questions auxquelles un recruteur cherche une réponse.

1. Les 4 outils face à face

CV classique

Convaincre le recruteur

« Son parcours est-il intéressant et professionnel ? »

Lu parRecruteur / RH
ContientExpériences, études, compétences
Où l'utiliserEntretien, contact direct, dossier pro

⭐⭐⭐⭐

CV ATS

Décrocher le filtre

« Correspond-elle techniquement à l'offre ? »

Lu parLogiciel, puis recruteur
ContientMots-clés + structure simple
Où l'utiliserIndeed, Easy Apply, plateformes, e-mail

⭐⭐⭐⭐⭐

LinkedIn

Être visible

« Qui est cette personne, quelle est son activité ? »

Lu parRecruteurs, entreprises, réseau
ContientProfil, expériences, posts, recommandations
Où l'utiliserProfil complet, projets, certifications

⭐⭐⭐⭐

Portfolio

Démontrer

« Sait-elle vraiment développer ? Montrez-moi. »

Lu parClient, recruteur, entreprise
ContientProjets, démos, captures, technologies
Où l'utiliserProjets, démos, GitHub, contact

⭐⭐⭐⭐⭐

2. Quelle situation, quel outil ?

3. Comment ils travaillent ensemble

Trois outils qui travaillent ensemble. Le 📄 CV classique sert pour l'entretien et le contact direct.

4. Tableau comparatif

Critère	📄 CV classique	🤖 CV ATS	💼 LinkedIn	🌐 Portfolio
Format	PDF, 1 à 2 pages	PDF simple, 1 à 2 pages	Profil en ligne	Site web
Montre des projets réels	✗	✗	~	✓
Mots-clés de l'offre	~	✓	✓	~
Design libre	✓	✗	✗	✓
Être trouvé sans candidater	✗	✗	✓	~
Mise à jour	À chaque candidature	À chaque offre	Chaque mois	À chaque projet

🤖 CV ATS › décrocher le filtre📄 CV classique › convaincre le recruteur💼 LinkedIn › être visible🌐 Portfolio › démontrer

5. Exemples concrets

✓ COMPÉTENCES : PHP, Laravel, MySQL, Git, REST API✗ 💻 Expert Web

✓ Développeur Full Stack | Laravel & PHP | React Native | Formateur✗ Full Stack Developer

Haut : un CV ATS aligne les mots-clés. Bas : un titre LinkedIn précis fait ressortir votre profil dans les recherches.

6. Plan d'un portfolio complet

🏠 Accueil

👤 À propos🛠️ Compétences💼 Expérience📁 ProjetsLaravelReact NativePHP / MySQLIA🎓 Formations🖼️ Galerie🐙 GitHub✉️ Contact

Mettez l'URL de votre portfolio dans votre CV et dans votre profil LinkedIn. Détails ATS : section « CV lu par une IA ».

🎯 À vous de jouerAjoutez l'URL de votre portfolio (Render) dans l'en-tête de votre CV et dans « Coordonnées » de LinkedIn. Réécrivez ensuite votre titre LinkedIn avec 3 mots-clés de votre métier.

1Comprendre le projet

Savoir ce que l'on va construire.

Un portfolio est un site personnel qui montre qui vous êtes, ce que vous savez faire et la preuve (vos projets). Sections visées : navbar, présentation, à propos, compétences, projets, formation, contact, footer.

Créez cette arborescence :

Noms de fichiers en minuscules, sans espaces ni accents.

Figure 1 : les sections d'un portfolio, de haut en bas.

🎯 À vous de jouerOuvrez le Bloc-notes (ou VS Code) et créez l'arborescence sur votre bureau. Vérifiez que le dossier s'appelle bien portfolio (sans accent, sans espace).

2Préparer l'environnement

Avoir tous les outils prêts.

Installer Visual Studio Code puis l'extension Live Server.
Installer Git (git-scm.com).
Créer un compte GitHub (pseudo sobre et professionnel).
Créer un compte Render (render.com, connexion avec GitHub).
Ouvrir le dossier portfolio dans VS Code (Fichier, Ouvrir le dossier).
Configurer Git une seule fois :

Raccourcis VS Code utiles

Action	Raccourci
Enregistrer	`Ctrl + S`
Ouvrir le terminal	`Ctrl + ù` (ou Ctrl + `)
Formater le code	`Shift + Alt + F`
Commenter une ligne	`Ctrl + /`
Dupliquer une ligne	`Shift + Alt + ↓`
Écrire vite du HTML (Emmet)	`!` puis `Tab`

🎯 À vous de jouerTapez git --version dans le terminal de VS Code. Si Git répond avec un numéro de version, vous êtes prêt.

3Première page HTML

Comprendre la structure d'une page, sans Bootstrap.

Créez index.html et collez le code ci-dessous.
Clic droit, Open with Live Server.
Modifiez un texte, enregistrez, regardez la page se rafraîchir.

<!DOCTYPE html> : indique HTML5 ; head : infos invisibles ; body : ce qui s'affiche.
alt décrit l'image ; id sert de cible aux liens internes (href="#apropos").

Figure 2 : head = invisible (infos), body = ce qui s'affiche.

🎯 À vous de jouerChangez le <h1> par votre vrai nom, puis ajoutez une nouvelle section Loisirs avec une liste de 3 éléments. Rechargez la page : elle se met à jour automatiquement.

4Introduire Bootstrap

Obtenir un rendu professionnel et responsive avec des classes.

Ajoutez le CSS dans le <head> et le JS avant </body> (le JS sert au menu burger) :

Test : deux colonnes, empilées sur mobile.

Besoin	Classes
Conteneur	`container`
Grille	`row`, `col-12 col-md-6 col-lg-4`
Espacements	`mt-3`, `py-5`, `p-4`
Couleurs	`bg-dark`, `text-white`, `text-primary`
Bouton, badge, carte	`btn btn-primary`, `badge`, `card`

col doit être dans row, lui-même dans container. Sans le script bundle, le burger ne s'ouvre pas.

Figure 3 : la grille Bootstrap et ses points de rupture.

🎯 À vous de jouerPassez la grille de test à col-md-4 (trois colonnes), puis à col-lg-3. Réduisez la fenêtre du navigateur : à quelle largeur bascule-t-elle ?

5Construire le portfolio

Remplacer index.html par la version complète.

Sélectionnez tout le contenu de index.html et remplacez-le par le code ci-dessous.
Ajoutez img/photo.jpg et img/projet1.jpg.
Enregistrez et vérifiez chaque section dans le navigateur.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Prénom Nom | Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#accueil">Prénom Nom</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-label="Menu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#apropos">À propos</a></li>
        <li class="nav-item"><a class="nav-link" href="#competences">Compétences</a></li>
        <li class="nav-item"><a class="nav-link" href="#projets">Projets</a></li>
        <li class="nav-item"><a class="nav-link" href="#parcours">Parcours</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<header id="accueil" class="hero d-flex align-items-center text-white text-center">
  <div class="container">
    <img src="img/photo.jpg" alt="Photo de Prénom Nom" class="rounded-circle border border-3 border-white mb-4" width="160" height="160">
    <h1 class="display-4 fw-bold">Bonjour, je suis Prénom Nom</h1>
    <p class="lead">Étudiant en développement web</p>
    <a href="#projets" class="btn btn-primary btn-lg me-2">Mes projets</a>
    <a href="#contact" class="btn btn-outline-light btn-lg">Me contacter</a>
  </div>
</header>

<main>
  <section id="apropos" class="py-5">
    <div class="container text-center">
      <h2 class="mb-4">À propos</h2>
      <p class="lead mx-auto" style="max-width:700px">Passionné par le web, je crée des sites clairs et accessibles. Je cherche un stage pour progresser.</p>
    </div>
  </section>

<section id="competences" class="py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-4">Compétences</h2>
      <div class="row g-4">
        <div class="col-md-6">
          <h3 class="h5">Techniques</h3>
          <span class="badge bg-primary">HTML5</span> <span class="badge bg-primary">CSS3</span>
          <span class="badge bg-primary">Bootstrap</span> <span class="badge bg-primary">Git</span>
        </div>
        <div class="col-md-6">
          <h3 class="h5">Personnelles</h3>
          <span class="badge bg-success">Autonomie</span> <span class="badge bg-success">Curiosité</span>
        </div>
      </div>
    </div>
  </section>

<section id="projets" class="py-5">
    <div class="container">
      <h2 class="text-center mb-4">Projets</h2>
      <div class="row g-4">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card h-100 shadow-sm">
            <img src="img/projet1.jpg" class="card-img-top" alt="Capture du projet 1">
            <div class="card-body">
              <h3 class="card-title h5">Projet 1</h3>
              <p class="card-text">Objectif du projet et technologies utilisées.</p>
              <span class="badge bg-secondary">HTML</span> <span class="badge bg-secondary">Bootstrap</span>
            </div>
            <div class="card-footer bg-white border-0">
              <a href="https://github.com/votre-pseudo/projet1" target="_blank" rel="noopener" class="btn btn-sm btn-dark">Code GitHub</a>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </section>

<section id="parcours" class="py-5 bg-light">
    <div class="container" style="max-width:760px">
      <h2 class="text-center mb-4">Formation et expérience</h2>
      <ul class="list-group">
        <li class="list-group-item"><strong>2025 à aujourd'hui</strong> : Licence, Établissement X</li>
        <li class="list-group-item"><strong>2024</strong> : Stage, Entreprise Y</li>
      </ul>
    </div>
  </section>

<section id="contact" class="py-5">
    <div class="container" style="max-width:560px">
      <h2 class="text-center mb-4">Contact</h2>
      <form action="mailto:vous@exemple.com" method="post" enctype="text/plain">
        <div class="mb-3"><label for="nom" class="form-label">Nom</label><input type="text" class="form-control" id="nom" name="nom" required></div>
        <div class="mb-3"><label for="email" class="form-label">E-mail</label><input type="email" class="form-control" id="email" name="email" required></div>
        <div class="mb-3"><label for="msg" class="form-label">Message</label><textarea class="form-control" id="msg" name="message" rows="4" required></textarea></div>
        <button type="submit" class="btn btn-primary w-100">Envoyer</button>
      </form>
    </div>
  </section>
</main>

<footer class="bg-dark text-white text-center py-4">
  <p class="mb-1">© 2026 Prénom Nom</p>
  <a class="text-white me-3" href="https://github.com/votre-pseudo" target="_blank" rel="noopener">GitHub</a>
  <a class="text-white" href="https://www.linkedin.com/in/votre-profil" target="_blank" rel="noopener">LinkedIn</a>
</footer>

🎯 À vous de jouerDupliquez trois fois le bloc col-12 col-md-6 col-lg-4 pour obtenir 3 projets. Renommez-les (Projet 2, Projet 3) et changez les badges.

6Personnaliser

Rendre le portfolio unique avec un petit fichier CSS.

Créez css/style.css avec le code ci-dessous.
Changez les couleurs via les variables, remplacez les textes et la photo, ajoutez vos projets.
Testez sur mobile (F12, icône appareil).

🎯 À vous de jouerChangez --couleur-principale en violet (#6a3fb5), rechargez, observez. Puis testez #d6335b (rose) pour voir l'effet du dégradé.

7Git : versionner

Enregistrer l'historique du projet.

Repository : dossier suivi par Git · Commit : point de sauvegarde · Branch : ligne de travail (main) · Remote : copie sur GitHub (origin).

Dans le terminal de VS Code (Ctrl+ù), à la racine du projet :

Faites un commit par étape (ex. « Ajout de la section projets »). Visez 8 commits ou plus.

Le trajet d'une modification

Figure 4 : add prépare, commit enregistre, push envoie, pull récupère.

Travailler avec des branches

Une branche permet d'essayer une nouveauté sans toucher à la version stable (main).

Figure 5 : une branche part de main, reçoit des commits, puis est fusionnée (merge).

Annuler une erreur

Situation	Commande
Voir ce qui a changé	`git diff`
Annuler les modifs d'un fichier	`git restore index.html`
Retirer un fichier du staging	`git restore --staged index.html`
Corriger le dernier message	`git commit --amend -m "Nouveau message"`
Récupérer les changements distants	`git pull`

Bon commit : un commit = une idée, message court à l'infinitif (« Ajouter la section contact »).

Conventional Commits (bonus)

Préfixe	Usage
`feat:`	nouvelle fonctionnalité
`fix:`	correction de bug
`style:`	CSS, mise en forme
`docs:`	README, documentation
`chore:`	configuration, .gitignore

🎯 À vous de jouerModifiez index.html, puis git add index.html. Changez d'avis : git restore --staged index.html, puis git restore index.html. Vérifiez que tout est revenu.

8GitHub : envoyer en ligne

Connecter le dossier local à GitHub.

Sur github.com : New repository, nom portfolio, Public, sans README ni .gitignore, puis Create repository.
Copiez l'URL du dépôt et exécutez :

Actualisez la page GitHub : vos fichiers apparaissent.
Créez README.md (titre, lien de démo, sections), puis :

Si l'authentification est refusée : utilisez un Personal Access Token ou connectez GitHub dans VS Code. Vérifiez l'URL avec git remote -v.

Un dépôt bien organisé

Récupérer un dépôt existant

🎯 À vous de jouerAprès le git push, ouvrez la page GitHub de votre dépôt et vérifiez que vous voyez bien tous vos fichiers : index.html, css/style.css, img/, README.md.

9Déployer sur Render

Mettre le portfolio en ligne automatiquement, à chaque push.

Render est une plateforme d'hébergement moderne qui se connecte à votre dépôt GitHub. Chaque git push sur main déclenche un nouveau déploiement, visible en direct dans l'onglet Events. Le site est en ligne en une trentaine de secondes.

Static Site, pas Web Service. Un portfolio HTML/CSS/Bootstrap ne nécessite aucun serveur : c'est un site statique. Choisissez le type Static Site. Un Web Service s'endort après 15 minutes d'inactivité et met environ 50 s à se réveiller — mauvais plan devant un recruteur.

Créer le service sur Render

Allez sur render.com puis cliquez sur Sign in with GitHub.
Autorisez Render à lire vos dépôts (vous pouvez restreindre l'accès au seul dépôt portfolio).
Sur le Dashboard : New + → Static Site.
Sélectionnez le dépôt portfolio, puis Connect.
Remplissez le formulaire exactement comme ci-dessous :

Cliquez sur Create Static Site.
Attendez une minute. L'URL publique apparaît en haut du dashboard.

Figure 6 : GitHub déclenche Render, Render construit, le site est en ligne en ~30 secondes.

https://portfolio-prenom-nom.onrender.com

nom du service Render (choisi à l'étape 5)

Le cycle « push = redéploiement »

C'est le vrai intérêt de Render : plus rien à cliquer, plus rien à configurer. Modifiez un fichier, poussez, rechargez.

Pendant la séance, ouvrez l'onglet Events de Render dans un onglet voisin du terminal. Vos étudiants voient le déploiement se dérouler en direct : c'est bien plus parlant qu'un long discours.

Mettre à jour le site

Attendez 30 secondes, puis rechargez la page Render avec Ctrl + F5 (ou Cmd + Shift + R) pour contourner le cache du navigateur.

Bonus : le fichier render.yaml (Blueprint)

Pour aller plus loin — configurer Render depuis un fichier versionné

À la racine du dépôt, créez un fichier render.yaml. Au prochain branchement, Render lira ce fichier et configurera tout automatiquement. C'est de l'Infrastructure-as-Code : la configuration du déploiement est versionnée avec le code.

Preview Deployments — workflow professionnel

Quand vous poussez sur une branche autre que main et que vous ouvrez une Pull Request, Render crée une URL de préversion. On teste avant de fusionner.

GitHub Pages ou Render ?

Critère	GitHub Pages	Render Static
Mise en place	Settings → Pages	Dashboard + Git
Délai de mise à jour	1 à 3 minutes	~30 secondes
Preview par Pull Request	Non	Oui
Logs de déploiement	Limités	Détaillés (Events)
URL par défaut	`pseudo.github.io/repo`	`nom.onrender.com`
Domaine personnalisé	Oui	Oui (gratuit)
HTTPS automatique	Oui	Oui

Les deux sont gratuits. Vous pouvez garder les deux en parallèle : GitHub Pages comme sauvegarde, Render comme vitrine principale.

Si ça ne marche pas

Render affiche « Build failed »

Vérifiez trois choses : Build Command vide, Publish Directory = ., et que index.html est bien à la racine du dépôt.

La page déployée est vide ou blanche

Le index.html est probablement dans un sous-dossier. Corrigez Publish Directory (ex. public ou src), puis Manual Deploy → Clear build cache & deploy.

Mon style.css ne charge pas en ligne (mais oui en local)

Les serveurs Linux sont sensibles à la casse : Style.css n'est pas égal à style.css. Vérifiez aussi les espaces et accents dans les noms de fichiers.

J'ai poussé mais rien ne change en ligne

Ouvrez l'onglet Events de Render : le déploiement est-il terminé ? Puis rechargez avec Ctrl + F5 pour vider le cache du navigateur.

Render redemande de se connecter à GitHub

Rendez-vous dans Account Settings → GitHub → Configure account. Vérifiez que le dépôt portfolio est bien dans la liste autorisée.

🎯 À vous de jouerFaites un commit avec une faute de frappe volontaire dans un titre, poussez, observez Render redéployer dans l'onglet Events, puis corrigez la faute et poussez à nouveau. C'est exactement le cycle de travail quotidien d'un développeur.

10Publier avec GitHub Pages (alternative)

Obtenir une seconde URL publique, hébergée par GitHub.

GitHub Pages est une alternative gratuite à Render. Utile comme sauvegarde, ou si vous préférez une URL en github.io. Cette étape est facultative si Render fonctionne déjà.

Dans le dépôt : Settings.
Menu de gauche : Pages.
Source : Deploy from a branch.
Branch : main, dossier / (root), puis Save.
Attendez 1 à 3 minutes et actualisez : l'URL apparaît.

Erreur 404 ? Vérifiez que le dépôt est public et que index.html est bien à la racine.

Figure 7 : chaque push met le site à jour en 1 à 3 minutes.

https://pseudo.github.io/portfolio

pseudo GitHub · nom du dépôt

Mettre à jour le site

Attendez 1 à 2 minutes puis rechargez avec Ctrl + F5.

🎯 À vous de jouerActivez GitHub Pages et notez l'URL obtenue. Vous avez maintenant deux URLs publiques : une sur Render, une sur GitHub Pages. Laquelle est la plus rapide à mettre à jour ?

11Projet final et vérification

Rendre un portfolio complet.

Toutes les sections sont présentes et personnalisées.
Au moins 3 projets en cartes, avec liens.
Images avec alt, burger testé, liens testés.
Au moins 8 commits, messages clairs.
Dépôt public, README complet avec l'URL de démo.
Render actif avec URL fonctionnelle.
(Bonus) GitHub Pages actif en parallèle.

À rendre : l'URL du dépôt et l'URL Render publique.

Barème indicatif sur 20

Critère	Points
Structure HTML	3
Utilisation de Bootstrap	3
Responsive design	2
Contenu	2
Design	2
Section projets	2
Qualité du code	1
Utilisation de Git (commits, messages)	2
Repository GitHub public	1
Déploiement Render (URL fonctionnelle)	2

🎯 À vous de jouerRelisez votre checklist, ouvrez votre URL Render sur un téléphone, testez le menu burger et cliquez sur tous les liens. Tout doit fonctionner.

🎨Choisir un modèle de portfolio

Prévisualisez un modèle, copiez son code ou téléchargez son fichier HTML pour le personnaliser.

Les modèles sont des pages HTML autonomes. Cliquez sur Ouvrir le code, puis affichez le code source du navigateur (Ctrl + U) pour le copier. Le téléchargement vous permet de commencer directement dans VS Code.

Portfolio Bento

Une mise en page en cartes colorées, moderne et originale.

Aperçu Ouvrir le code Télécharger

Portfolio latéral

Une barre latérale de navigation et un contenu clair, adapté à un CV en ligne.

Aperçu Ouvrir le code Télécharger

Portfolio professionnel

Un thème sombre avec une présentation soignée et des accents lumineux.

Aperçu Ouvrir le code Télécharger

Portfolio rose

Un style doux et coloré, avec une palette rose et des formes arrondies.

Aperçu Ouvrir le code Télécharger

Après téléchargement, ouvrez le fichier dans VS Code et remplacez les textes, liens et coordonnées d'exemple par vos propres informations.

🤖CV lu par une IA (ATS)

Avant le recruteur, un logiciel lit votre CV.

👀

CV classique

Pour un humain

Design, couleurs, photo
Mise en page libre

🤖

CV lu par IA

Pour un logiciel (ATS)

Texte simple, 1 colonne
Titres et mots-clés clairs

1. Humain contre IA : testez

👤

Sara Ben AliDéveloppeuse web

Expérience

2024-2025 · Stage, Agence Web

Projet portfolio en Laravel

Formation

Licence informatique, 2025

Texte extrait par l'IA

Sara Ben Ali
Développeuse web
Compétences
Laravel · PHP · Git
[photo ignorée]
[barres de niveau ignorées]
[image « Certifié » ignorée]
Expérience
2024-2025 · Stage, Agence Web
Formation
Licence informatique, 2025

En mode 🤖, les éléments en pointillés rouges sont perdus.

2. Le jeu des mots-clés

📋 L'offre demande : Développeur Laravel junior

LaravelPHPMySQLGitAPI RESTBootstrap

📄 Mon CV contient : cliquez pour tester

0 % Cliquez sur vos compétences.

Exemple pédagogique : chaque logiciel calcule son score à sa façon. N'écrivez que ce que vous maîtrisez.

3. Titres que le logiciel reconnaît

✓ Expérience✗ Mon aventure pro

✓ Formation✗ Mon parcours

✓ Compétences✗ Mes super-pouvoirs

4. Format du fichier

✓ PDF texte✗ Scan ou image

✓ 1 colonne✗ Tableaux

✓ Arial, Calibri✗ Police fantaisie

✓ Infos dans la page✗ En-tête, pied de page

✓ Mots écrits✗ Icônes seules

✓ prenom-nom-cv.pdf✗ cv_final_v3(2).pdf

5. Mon CV est-il lisible ? Test en 10 secondes

Vous copiez le texte de votre PDF dans le Bloc-notes : si c'est lisible, le logiciel le lira aussi.

1Ctrl + Atout sélectionner

2Ctrl + Ccopier

3📝 Bloc-notescoller : texte lisible ✓

✓ Texte lisible, dans l'ordre✗ Texte vide ou mélangé

Gardez deux versions : un CV design pour l'envoi direct, un CV simple pour les plateformes de recrutement.

🎯 À vous de jouerFaites le test sur votre CV. Si le texte est illisible ou dans le désordre, simplifiez la mise en page et recommencez.

📚Glossaire et erreurs fréquentes

Terme	Définition
Repository	Dossier de projet suivi par Git
Commit	Point de sauvegarde avec un message
Branch	Ligne de travail parallèle
Merge	Fusion d'une branche dans une autre
Remote / origin	Copie du dépôt sur GitHub
Push / Pull / Clone	Envoyer / récupérer / copier un dépôt
CDN	Serveur qui héberge Bootstrap pour vous
Responsive	Page qui s'adapte à la taille de l'écran
Breakpoint	Largeur à partir de laquelle la mise en page change
Static Site	Site sans serveur : HTML/CSS/JS servis tels quels (Render)
Webhook	Notification automatique GitHub → Render au push
Preview Deployment	URL temporaire générée pour une Pull Request

Mon image ne s'affiche pas

Vérifiez le chemin (img/photo.jpg), les majuscules/minuscules et l'extension réelle du fichier.

Le menu burger ne s'ouvre pas

Le script bootstrap.bundle.min.js est absent ou placé avant le reste de la page.

Git refuse le push

Vérifiez l'URL avec git remote -v et votre authentification (token ou connexion GitHub dans VS Code).

Render affiche « Build failed »

Vérifiez Build Command vide, Publish Directory = ., et index.html à la racine.

GitHub Pages affiche une erreur 404

Dépôt public ? Branche main ? index.html à la racine ? Attendez quelques minutes.

Mon style Bootstrap ne s'applique pas

Le lien CDN est mal copié, ou votre style.css est chargé avant Bootstrap.

Le cycle complet

🔁Cycle complet de A à Z

1. Les 3 lieux en un coup d'œil

2. Le film du parcours : A → J

3. Ce que vous devez voir à chaque phase

4. Toutes les commandes, dans l'ordre

5. La boucle de chaque jour

6. Pièges fréquents et solutions

Pourquoi un portfolio ?

⚖️CV, ATS, LinkedIn, portfolio : la différence

1. Les 4 outils face à face

CV classique

CV ATS

LinkedIn

Portfolio

2. Quelle situation, quel outil ?

3. Comment ils travaillent ensemble

4. Tableau comparatif

5. Exemples concrets

6. Plan d'un portfolio complet

VS Code : construire le site

1Comprendre le projet

2Préparer l'environnement

Raccourcis VS Code utiles

3Première page HTML

4Introduire Bootstrap

5Construire le portfolio

6Personnaliser

Git + GitHub : sauvegarder en ligne

7Git : versionner

Le trajet d'une modification

Travailler avec des branches

Annuler une erreur

Conventional Commits (bonus)

8GitHub : envoyer en ligne

Un dépôt bien organisé

Récupérer un dépôt existant

Render : publier le site

9Déployer sur Render

Créer le service sur Render

Le cycle « push = redéploiement »

Mettre à jour le site

Bonus : le fichier render.yaml (Blueprint)

Preview Deployments — workflow professionnel

GitHub Pages ou Render ?

Si ça ne marche pas

10Publier avec GitHub Pages (alternative)

Mettre à jour le site

11Projet final et vérification

Barème indicatif sur 20

Aller plus loin

🎨Choisir un modèle de portfolio

Portfolio Bento

Portfolio latéral

Portfolio professionnel

Portfolio rose

🤖CV lu par une IA (ATS)

CV classique

CV lu par IA

1. Humain contre IA : testez

Expérience

Formation

2. Le jeu des mots-clés

3. Titres que le logiciel reconnaît

4. Format du fichier

5. Mon CV est-il lisible ? Test en 10 secondes

📚Glossaire et erreurs fréquentes