Skip to content

Latest commit

 

History

History
211 lines (160 loc) · 8.05 KB

README.md

File metadata and controls

211 lines (160 loc) · 8.05 KB
Raw

INTRODUCTION

Bonjour à toi, jeune développeur ! Aujourd'hui, tu vas découvrir comment faire un site web classique. La finalité sera de pouvoir mettre votre site en public grâce à un hébergeur. Nous allons donc voir comment avec github, vous pouvez héberger votre site gratuitement (et bien plus).

TABLE DES MATIÈRES

PRÉ-REQUIS

  • Un compte github
    • Si vous n'en avez pas, rendez-vous sur github.com et créez-en un.
  • Si vous êtes sous window
    • Installer github desktop ici
  • Un éditeur de texte
  • Un navigateur web
    • Tout le monde en a un, donc pas besoin de le télécharger.

1 - Créer un nouveau dépôt

Un dépot est un endroit où vous pouvez stocker vos fichiers. Pour créer un nouveau dépôt, rendez-vous sur github.com et cliquez sur le bouton "New" en haut à droite. Pour pouvoir héberger votre site, vous devez créer un dépôt public. Pour cela, cochez la case "Public" et laissez le reste par défaut. Cliquez ensuite sur "Create repository". Il faut que vous appeliez votre dépôt "votre_nom_de_compte.github.io". Par exemple, si votre nom de compte est "toto", votre dépôt s'appellera "toto.github.io".

(Vous pouvez suivre le tutoriel en anglais ici)

A ce stade, vous avez un dépot vide qui est gérer par github-desktop. Pour le moment, il n'y a rien dedans.

2 - Votre premier site

Une fois que vous avez setup votre dépôt, vous pouvez commencer à créer votre site. Pour cela, vous devez créer un fichier nommé "index.html" dans votre dépôt Voici un exemple de code HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Mon premier site</title>
    </head>
    <body>
        <h1>Bonjour à tous !</h1>
        <p>Je suis un paragraphe</p>
    </body>
</html>

Grâce à github-desktop, vous pouvez voir les changements que vous avez fait. Cliquez sur "Commit to master" et écrivez un message de commit. Cliquez ensuite sur "Commit to master" et "Push origin".

Et maintenant, vous pouvez voir votre site en allant sur "votre_nom_de_compte.github.io" !

FONCTIONNEMENT D'UN SITE WEB

Un site web est composé de 3 parties :

  • Le HTML
  • Le CSS
  • Le JavaScript

HTML

Le HTML est le langage qui permet de créer la structure de votre site. C'est grâce à lui que vous pouvez créer des paragraphes, des titres, des images, etc. Pour imager, le HTML est le squelette de votre site. Si vous voulez en savoir plus sur le HTML, je vous conseille de lire ce tutoriel.

Ou alors voici quelques exemples de balises HTML :

Titre basique avec un paragraphe

<!DOCTYPE html>
<html>
    <head>
        <title>Mon premier site</title>
    </head>
    <body>
        <h1>Bonjour à tous !</h1>
        <p>Je suis un paragraphe</p>
    </body>
</html>

Mettre un lien

<a href="https://www.google.com">Cliquez ici pour aller sur google</a>

Mettre une image

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo de google">

Mettre une liste

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Il y a beaucoup d'autres balises HTML, mais je vous laisse découvrir par vous-même.

CSS

Le CSS est le langage qui permet de mettre du style à votre site. C'est grâce à lui que vous pouvez changer la couleur de votre texte, la taille de votre texte, etc. Pour imager, le CSS est la peau de votre site. Les fichiers css sont généralement nommés "style.css" et sont stockés dans un dossier nommé "css".

pour l'inclure dans une page HTML, vous devez ajouter cette ligne dans la balise <head> :

<link rel="stylesheet" href="css/style.css">

href contient le chemin vers le fichier css.

Si vous voulez en savoir plus sur le CSS, je vous conseille de lire ce tutoriel. Ou alors voici quelques jeu online pour apprendre le CSS :

C'est pas vraiment ce qu'il manque comme jeu pour apprendre le CSS. Voici quelques exemples de code CSS :

Changer la couleur du texte

h1 {
    color: red;
}

Changer la taille du texte

h1 {
    font-size: 50px;
}

Changer la couleur de fond

body {
    background-color: black;
}

Changer la taille d'une image

img {
    width: 100px;
}

Et plein d'autres choses encore.

JavaScript

Le JavaScript est le langage qui permet de rendre votre site dynamique. C'est grâce à lui que vous pouvez faire des animations, des formulaires, etc. Pour imager, le JavaScript est le cerveau de votre site. Les fichiers JavaScript sont généralement nommés "script.js" et sont stockés dans un dossier nommé "js". Le javascript est un langage très puissant, il vas vous permettre de faire intéragir votre site avec l'utilisateur, de faire des formulaires, de faire des animations, etc.

Pour inclure du JavaScript dans une page HTML, vous devez ajouter cette ligne dans la balise <head> :

<script src="js/script.js"></script>

src contient le chemin vers le fichier JavaScript.

Si vous voulez en savoir plus sur le JavaScript, je vous conseille de lire ce tutoriel.

CRÉER UN SITE WEB

Maintenant que vous savez comment fonctionne un site web, vous pouvez commencer à créer le vôtre. Trouvez un thème qui vous plait, une idée de site, etc. et lancez-vous !

Voici quelques sites pour vous aider à créer votre site :

Si vous voulez trouvez des idées de site, vous pouvez aller sur Dribbble.

Si vous voulez trouver des thèmes pour votre site, vous pouvez aller sur ThemeForest.

Et voici une pelleté de site pour vous aider à créer votre site ou bien pour avoir des idées / code :

POUR LES PLUS COURAGEUX

Pour les plus courageux vous pouvez faire ce qu'on appelle des call API. C'est à dire que vous pouvez faire des requêtes à des API pour récupérer des données et les afficher sur votre site. Vous pouvez donc intégrez des données de météo, images, gifs, etc. sur votre site.

Une API est une interface de programmation qui permet de récupérer des données. Elle est généralement gratuite et vous pouvez l'utiliser pour faire des requêtes à partir de votre site. Une API marche grâce à des URL et à des paramètres. Il existe plusieurs types de requètes (GET, POST, PUT, DELETE, etc.) vous pouvez voir dans le dossier code/ des exemples de requêtes à des API.

Voici quelques api pour vous aider :