GitHub
& Portfolio

Introduction

GitHub est aujourd’hui l’une des principales plateformes utilisées dans le domaine du développement informatique. Elle permet notamment de stocker, gérer, partager et collaborer sur des projets de programmation grâce à l’utilisation de dépôts (repositories) et du système de gestion de versions Git.

Au-delà de son utilisation pour la gestion de projets, GitHub occupe également une place importante dans le parcours d’un développeur. Un profil GitHub peut en effet servir de portfolio professionnel, en permettant de présenter ses projets, ses contributions et les compétences acquises au fil du temps.

La création d’un compte GitHub constitue ainsi une première étape pour découvrir cet environnement et commencer à construire sa présence dans l’écosystème du développement. La personnalisation du profil permet ensuite de mieux présenter son parcours, ses centres d’intérêt et ses réalisations.

Cette leçon présente les principales étapes permettant de créer un compte GitHub et de personnaliser son profil, afin de disposer d’un espace clair, organisé et représentatif de son parcours.

Étape 1 : Accéder à la plateforme

Pour démarrer, ouvrez votre navigateur web sur votre ordinateur et rendez-vous sur le site officiel : GitHub.com ↗. (Petite précision : l'application existe, mais il est beaucoup plus simple de faire cette configuration initiale directement depuis le site web).

Étape 2 : L'inscription (Sign Up)

Une fois sur la page d'accueil :

• Cliquez sur le bouton Sign up (Inscription) en haut à droite. (Si vous avez déjà un compte, cliquez simplement sur Sign in).
• GitHub va vous demander votre adresse e-mail professionnelle de préférence, un mot de passe solide, et surtout un nom d'utilisateur (Username).

Étape 3 : Créer le dépôt spécial de profil

Nous arrivons sur la page d'accueil de votre compte. Nous allons maintenant créer ce qu'on appelle un README de profil pour vous présenter.

1. Regardez tout en haut à droite, cliquez sur le petit bouton +, puis sélectionnez New repository (Nouveau dépôt).
2. Dans le champ Repository name, tapez exactement votre nom d'utilisateur GitHub.
3. Un petit encadré vert apparaît avec le message "You found a secret!". C'est ce dépôt spécial qui va s'afficher tout en haut de votre profil public.
4. Dans Description, mettez par exemple : Mon profil personnel et ma biographie.
5. Laissez la visibilité sur Public, cochez Add a README file, puis cliquez sur Create repository.

Étape 4 : Personnaliser le profil

Dans le fichier README.md, cliquez sur l'icône en forme de crayon pour ajouter une courte présentation, vos compétences, vos projets et vos liens. C'est la première impression que vous laissez : gardez-la lisible, honnête et à jour.

Introduction et objectifs

Un portfolio web est un site internet personnel permettant de présenter son profil, son parcours, ses compétences, ses projets, ses expériences et ses coordonnées. Pour un étudiant ou un développeur, il constitue une vitrine professionnelle permettant de montrer non seulement ce que l’on sait faire, mais également la manière dont on construit ses projets.

Dans ce cours, nous allons apprendre à créer un portfolio à partir de HTML, CSS et JavaScript, à l'organiser dans Visual Studio Code, à utiliser Git pour gérer les versions du projet, à publier le code sur GitHub, puis à mettre le portfolio en ligne grâce à GitHub Pages.

Technologies, outils et organisation

HTML sert à créer la structure d’une page web (titres, paragraphes, images, liens, sections, formulaires). CSS permet de définir l’apparence du site (couleurs, polices, dimensions, espacements, animations et disposition). JavaScript ajoute de l’interactivité (menus dynamiques, animations, réactions aux clics).

• Visual Studio Code : environnement d'écriture du code.
• Git : système de gestion de versions.
• GitHub : plateforme d'hébergement des dépôts Git.
• GitHub Pages : service pour héberger et publier le site en ligne gratuitement.

Organisation du projet

Arborescence recommandée pour le dossier principal formation/ :

formation/
│
├── index.html
│
├── style/
│   └── style.css
│
└── script/
    └── script.js

Création de la structure HTML

Le fichier index.html constitue le point de départ. Voici une structure de base propre :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
  <title>Mon portfolio</title>
</head>
<body>
  <header><h1>Votre nom</h1></header>
  <main>
    <section id="projets">Mes projets</section>
  </main>
</body>
</html>

Mise en forme avec CSS

Créez style/style.css pour donner une première direction visuelle à votre site :

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

Responsive design

Adaptez la mise en page aux appareils mobiles avec les Media Queries. Un portfolio se consulte partout : testez-le en réduisant la fenêtre de votre navigateur.

@media (max-width: 768px) {
  nav { display: none; }
  h1 { font-size: 2rem; }
  section { padding: 2rem 1rem; }
}

Introduction à Git

Git est un système de gestion de versions. Il enregistre les étapes de votre projet et vous permet de revenir en arrière si nécessaire. Ouvrez le terminal intégré dans Visual Studio Code (en vous assurant d'être dans le dossier formation) et saisissez :

git init

Commandes Git essentielles

Voici le flux de travail à retenir pour gérer vos versions :

Connecter le projet local à GitHub

Après avoir créé un dépôt vide sur GitHub nommé formation, liez-le avec les commandes suivantes :

git remote add origin https://github.com/USERNAME/formation.git
git branch -M main
git push -u origin main

Configuration sur GitHub

Dernière étape : transformer votre dépôt en site accessible à tout le monde. Cochez chaque étape au fur et à mesure — votre progression reste dans cette page.

Accéder au site en ligne

Au bout de quelques minutes, GitHub génère votre lien public :

Workflow de mise à jour à retenir

À chaque modification future de votre code, suivez cette séquence :

git status
git add .
git commit -m "Mise à jour du design"
git push

Conclusion

Vous avez désormais un portfolio complet, hébergé gratuitement et géré professionnellement avec Git & GitHub.