Tutoriel Git et Github : Comment Gérer Le Code Source HTML Et CSS ?

il y a 3 mois

Dans ce tutoriel rapide sur Git et Github, je vais te montrer comment gérer le Code Source HTML Et CSS ?

Tu travailles ou tu veux travailler sur un projet de site web avec le HTML et le CSS. Tu aimerais créer un projet absolument simple pour te faire une petite idée sur la programmation web et la gestion du code source.

Si tu as l'intention de travailler pendant une semaine sans pour autant gérer, conserver, versionner son code source. Je t'informe que ça ne sert à rien. Imagine si :

💔 Ton ordinateur tombe en panne comment vas-tu poursuivre?

💔 Ton disque dure est cramé, comment vas-tu accéder à ton code?

💔 Tu te fais voler ton ordinateur, ton flash, ou ton disque dure externe, qui va te rendre ton code source ?

Vas-tu recommencé à zéro à chaque fois que tu auras ce genre de problème classique ?

La réponse est NON, Je te propose une petite solution très simple utilisé par les développeurs pour travailler malgré les risques de pertes de données.

Alors comment faire pour récupérer son code malgré tout les incidents possibles?

Il faut savoir minimiser le risque en utilisant un outil de gestion de version du code source capable de se synchroniser avec un dépôt dans le cloud.

Git

Tu vas te servir de Git pour gérer ton code source parce qu'il a été conçu spécialement pour le faire, c'est un système de contrôle de version VCS.

Ce que cela signifie vraiment, c'est que Git va t'aider à gérer tes fichiers, je parle du tes fichiers qui contiennent le code source.

L'une des principales choses que git fait et aussi la principale raison pour laquelle il existe est de garder une trace de toute l'histoire des choses sur lesquelles tu travailles. Oui, Garder l'historique c'est beaucoup mieux !

Cela est particulièrement utile pour les développeurs web car lorsque tu travailles sur un projet, tu commences par :

➡️ créer une version de base;

➡️ puis tu tentes de l'améliorer en ajoutant de nouvelles fonctionnalités.

➡️ puis tu essayes simplement des choses.

Tout ce processus d'expérimentation de nouvelles fonctionnalités conduit souvent aux erreurs. Coder, coder, et encore coder !

Tu auras envie peut-être de revenir à ton code d'origine. Ton premier code ou celui qui tu avais hier parce que le code d'aujourd'hui t'embrouille et il affiches des tonnes d'erreurs.

C'est là que tu auras absolument besoin du contrôle de version, il suit automatiquement chaque minute de changement dans ton projet et te permet de revenir à une version précédente, peu importe les nombres de tes modifications.

Une autre chose impressionnante que Git permet de faire est de permettre aux gens de travailler ensemble sur le même projet en même temps sans se déranger les fichiers.

L'échange des informations et de code source plus fluide avec les membres de Git.

Équipe qui peut travailler sur différentes fonctionnalités et fusionner facilement les modifications.

Git est facile à apprendre et a des performances incroyablement rapides. Ce toujours vrai.

Il est supérieur des autres systèmes de contrôle de version comme Subversion avec des fonctionnalités telles que les branchements bon marché et locaux, les zones de transfert pratiques et les flux de travail multiples.

Trouver les 7 outils qui vont te permettre de programmer plus rapidement et efficacement

Comment Installer git sur Windows ?

Télécharge et installe Git pour Windows avec la méthode facile. Une fois installé, tu auras la possibilité d'utiliser Git à partir de l'invite de commandes ou de PowerShell.

Tu dois savoir que Git pour Windows ne se met pas à jour automatiquement. De temps en temps tu auras besoin de télécharger des mises à jour.

Comment ajouter git sur macOS ?

Installe l'utilitaire Homebrew et exécute le code qui suit pour mettre en place une version à jour de Git sur ton Mac:

brasser installer git

Pour mettre à jour ton installation Git, utilisez l'option de mise à niveau de Homebrew:

brew upgrade git

Comment utiliser git sur Linux ?

Tu vas te servir du système de gestion de packages Linux intégré par défaut pour installer Git. Sur Ubuntu:

sudo apt-get install git

Configurer Git rapidement

Exécute les commandes suivantes à partir de l'invite de commandes après avoir installé Git pour faire une configuration des informations de base:

git config --global user.name "ton nom d'utilisateur"
git config --global user.email "ton email d'utilisateur"

Ah! Tu as réussi à installer Git sur ton ordinateur, Félicitations et bienvenu dans le monde merveilleux de développeurs.

Tu vas utiliser des plateformes pour travailler à distance et déployer ton code source comme un professionnel.

Les 3 plateformes de dépôt git à distance les plus utilisé par développeurs

L'objectif de base git, c'est de versionner son code mais plus encore, c'est d'utiliser une sorte de réseaux sociaux de développeurs pour pouvoir travailler en équipe et partager des informations incontournable sur le code.

GitHub

GitHub est un service Web de contrôle de version utilisant Git. Fondamentalement, c'est un site de réseautage social pour les développeurs.

Tu peux consulter le code d'autres personnes, identifier les problèmes avec leur code et même proposer des modifications.

Cela va t'aider également à améliorer ton code. Sur une note plus légère, c'est un excellent endroit pour montrer tes projets et se faire remarquer par des recruteurs potentiels.

En bref, Git est le système de contrôle de version et GitHub est un service d'hébergement pour les référentiels Git.

GitLab

GitLab est un logiciel libre de forge basé sur Git proposant les fonctionnalités qui de wiki, un système de suivi de bogue, l’intégration continue et la livraison continue.

C’est une plateforme permettant d’héberger et de gérer des projets web de A à Z. De zéro à super héro.

Introduite comme la plateforme des développeurs modernes, elle offre la possibilité de gérer ses dépôts Git et ainsi de mieux appréhender la gestion des versions de tes codes sources.

Initialement connu pour sa capacité de gestion de versions des codes sources, Gitlab s’est développé au cours des dernières années pour devenir aujourd’hui un outil incontestable de gestion de projet web.

BitBucket

Pour Wikipédia Bitbucket est un service web d'hébergement et de gestion de développement logiciel utilisant les logiciels de gestion de versions Git et Mercurial.

Il s'agit d'un service freemium dont la version gratuite permet déjà de créer jusqu'à un nombre illimité de dépôts privés, accessibles par cinq utilisateurs au maximum.

Ce qu’il faut retenir sur ces 3 plateformes

➡️ Elles permettent d’héberger les projets web et la gestion de versions des codes sources.

➡️ Elles favorisent la gestion de tout le processus de développement « From idea to production » (comme ils disent).

➡️ Elles autorisent une collaboration simple entre les collaborateurs sur un même projet

➡️ Elles sont Open source et collaboratif pour tout le monde.

➡️ La version de base est gratuite et très complète.

➡️ Les particuliers et les entreprises peuvent s'en servir calmement.

Débuter un projet HTML ET CSS avec git et github

Je te préviens, cette partie est un peu technique, 🧐 Concentre-toi !

Quelques terminologies de base à connaitre avant de commencer

Référentiel: un référentiel Git, ou un référentiel, est un dossier auquel tu as demandé à Git de t'aider à suivre les modifications de fichiers.

Branche: Une branche est une ligne de développement indépendante. Tu peux le considérer comme un tout nouveau répertoire de travail.

Fork: une fork est une copie personnelle du référentiel d'un autre utilisateur qui réside sur ton compte.

Clone: ​​Un clone est simplement une copie d'un référentiel qui réside sur ton ordinateur plutôt que sur un serveur.

Validation: une validation est un ensemble d'une ou plusieurs modifications apportées à un fichier (ou un ensemble de fichiers). Chaque fois que tu enregistres, il crée un identifiant unique («hachage») qui l'aide à garder une trace de l'historique.

Master: la branche de développement par défaut. Chaque fois que tu crées un référentiel git, une branche nommée «master» est créée qui devient la branche active par défaut.

Dans cette partie, je suppose que tu as déjà créer ton compte sur github.

Étape 1 : Création d'un dépôt

Création d'un dépôt Github

Pour créer ton dépôt git par ici

Après avoir donné un nom personnel à ton nouveau dépôt, tu vas valider. Une fois validé Github te qui en te donner les commandes à faire.

Tu vas choisir d'exécuter uniquement le commande de la première proposition dédiée aux développeurs qui ont déjà installer git sur leurs ordinateurs.

Étape 2 : Configuration et envoi du premier changement

Sur ton ordinateur, à partir de la ligne de commande, accède au dossier racine contenant ton code. Dans mon cas voici mon dossier racine.

Dans mon cas le nom du dépôt c'est "mwanzo".

echo "# mwanzo" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/cristhos/mwanzo.git
git push -u origin master

À chaque fois que tu tapes git push dans ton terminal, il te serra demander de fournir ton nom d'utilisateur et mot de passe Github pour t'authentifier.

Etape 3: Creation de notre fichier page html et css

Tu ouvres ton éditeur de code source à la racine de ton dossier. Créer un fichier index.html, à l'intérieur tu copies ce code qui provient directement inspiré par w3schools.

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mwanzo</title>
    </head>
    <body>
        Mwanzo est un petit test html et css pour apprendre à utiliser git et github
    </body>
</html>

Enregistre les changements avec Git, Il va falloir s'y habituer parce que ça va te permettre de surveiller l'évolution de ton code source.

  git add .
  git status
  git commit -am "Création de ma page html de base"
  git log

Étape 4: Ajoutons quelques modifications

Après ajout voici la nouvelle structure de notre fichier index.html. Ajoute un peu de html pour la suite.

  <!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
        <title>Mwanzo</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Mwanzo</h1>
        <p>Mwanzo est un petit test html et css pour apprendre à utiliser git et github</p>
    </body>
</html>

Ajoute un nouveau fichier css (styles.css) pour ne pas se contredire.

  body {
    background-color: lightblue;
  }
  
  h1 {
    color: white;
    text-align: center;
  }
  
  p {
    font-family: verdana;
    font-size: 20px;
    text-align: center;
  }

Enregistre les modifications avec git, Encore ça oui! C'est très important.

  git add .
  git status
  git commit -am "Ajout d'un fichier styles.css et ajout d'un titre et d'un paragraphe dans index.html"
  git log

Étape 5: Renvoyer les modifications sur Github

Tu es comme moi, tu as un timing chargé, tu viens de terminer avec ton coding day. C'est le temps d'envoyer tes modifications sur le dépot distant. Rien de plus simple que cette commande

git push origin master
git log

Finalement, tu auras la même version de ton code en local et sur Github. C'est très pratique.

Voici le dépôt Github Final

Dépôt local git et Github

Commandes git à savoir

Je te fais une petite liste de quelques commandes à connaitre absolument, tu auras tendance à utiliser certain commandes plus qu'autre.

git init pour initialiser un nouveau dépôt.

git init

avec "git add ." Déplacer les modifications du répertoire de travail vers la zone de transit.

git add .

git commit Prend les fichiers intermédiaires et les valide dans l'historique du projet. Avec git add, cela enregistre tes modifications dans le référentiel principal.

git commit -m "message de validation"

Utilisez la commande git clone pour copier le contenu d'un référentiel existant dans un dossier sur ton pc. À partir de la ligne de commande, accédez au dossier dans lequel tu souhaites contenir le référentiel cloné, puis exécutez:

git clone (URL du dépôt)

créer des branches en utilisant la commande git branch:

git branch "branchname"

Utilise le git push pour enregistrer tes modifications sur le serveur.

git push origin "branchname"

Pour synchroniser le référentiel local avec le référentiel distant

git pull origin "branchname"

Conclusion

Ceci est un tutoriel rapide pour débuter avec Git et avoir un dépôt Github. Certains commandes git sont là juste pour un début mais il y a encore d'autres commandes qui ont été développé pour des cas très spécifiques.

Tu as aimé cet article ? Partage-le avec tes collègues ou ami(e)s :

Hey oh ! , Ne rate rien !

1527 développeurs ont reçus mes conseils privés révolutionnaires

Reçois le guide gratuit "les 5 Façons de gagner sa vie avec le code"



Ecris avec le par B.C. DIBWE