Créer un Site Web de Rencontres Statique avec GitHub Pages

Levi France — Tue, 19 Dec 2023 05:51:12 +0000

Bien sûr, je serais ravi de vous aider à créer un site web de rencontres statique pour GitHub Pages. Voici un tutoriel en français avec des sous-titres pour vous guider tout au long du processus.

Introduction

Dans ce tutoriel, nous allons créer un site web de rencontres statique en utilisant HTML, CSS et éventuellement un peu de JavaScript. Nous allons héberger notre site sur GitHub Pages pour qu'il soit accessible en ligne.

Prérequis

Un compte GitHub
Un éditeur de texte (comme Visual Studio Code)
Des connaissances de base en HTML, CSS et JavaScript

Création de la Structure HTML

Commencez par créer un nouveau fichier HTML. Vous pouvez l'appeler index.html. Utilisez la structure HTML de base et ajoutez des sections pour la page d'accueil, la page de profil, etc.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Site de Rencontres</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Votre contenu HTML ici -->

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

Styles CSS

Créez un fichier CSS (styles.css) pour styliser votre site. Ajoutez des styles pour rendre votre site attrayant et convivial.

/* Reset CSS */
body, h1, h2, p {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
}

/* Vos styles CSS ici */

Contenu HTML

Remplissez le contenu HTML avec des sections telles que la page d'accueil, la page de profil, etc. Utilisez des balises sémantiques pour une meilleure structure.

<!-- Page d'accueil -->
<section id="accueil">
    <h1>Bienvenue sur Mon Site de Rencontres</h1>
    <p>Trouvez votre âme sœur dès aujourd'hui!</p>
</section>

<!-- Page de profil -->
<section id="profil">
    <h2>Nom Utilisateur</h2>
    <p>Âge : 25 ans</p>
    <!-- Ajoutez plus d'informations de profil ici -->
</section>

JavaScript (optionnel)

Si vous souhaitez rendre votre site interactif, ajoutez du JavaScript. Par exemple, pour créer un formulaire de connexion.

<!-- Formulaire de connexion -->
<section id="connexion">
    <h2>Connexion</h2>
    <form id="loginForm">
        <label for="username">Nom Utilisateur:</label>
        <input type="text" id="username" name="username" required>

        <label for="password">Mot de Passe:</label>
        <input type="password" id="password" name="password" required>

        <button type="submit">Se Connecter</button>
    </form>
</section>

Hébergement sur GitHub Pages

Créez un nouveau dépôt sur GitHub.
Uploadez vos fichiers (index.html, styles.css, script.js) sur le dépôt.
Dans les paramètres du dépôt, allez à la section "GitHub Pages".
Sélectionnez la branche principale comme source.

Votre site web de rencontres statique est maintenant accessible via le lien GitHub Pages Nouslib fourni.

Forem: Levi France