💻 Réaliser un Site Vitrine : Le Guide Simple et Efficace

INTRODUCTION

Bienvenue dans ce guide !

Nous allons découvrir ensemble comment réaliser un site vitrine avec un style assez simple étape par étape. Ce guide s'adresse tant aux novices qui n'ont jamais eu l'occasion de réaliser un site web, qu'aux intermédiaires désireux de s'initier à un nouveau style de site.

Pour débuter ce guide, vous devrez disposer d'un ordinateur et du logiciel Sublime Text. De plus, vous aurez à votre disposition un ensemble de ressources que vous pourrez télécharger dans la section "PRÉREQUIS". Ces ressources vous serviront de supports visuels pour décorer votre site. Vous pouvez également remplacer ces supports visuels par vos propres images et vidéos.

Voici le site que vous allez réaliser : site vitrine

Ce site sera développé en HTML/CSS avec un peu de javascript

Êtes-vous prêt à relever ce défi ?

PROGRAMME

Dans ce guide, tu vas découvrir comment :

• Créer une page HTML/CSS
• Insérer du texte, des images et des vidéos
• Rediriger un bouton vers un lien Instagram
• Créer une interface permettant aux utilisateurs de pouvoir faire des dons sur votre compte Paypal

PRÉREQUIS

• Logiciel :

Sublime Text

• Support à télécharger :

Télécharger

• Temps estimé :

15 minutes

MODULE 1

Préparation

Etape 1

• Télécharger le support

Ce support contient du contenus vidéos et images.

Dans le dossier images, vous y trouverez un logo, une bannière et la photo d'une personne. Vous pouvez écraser ces contenus avec vos propres images.

Nous nous servirons du dossier videos pour présenter les réalisations de Yorick. Vous êtes libre de remplacer ces vidéos par vos propres réalisations, de préférence format mp4.

Etape 2

• Ouvrir Sublime text et ouvrir le projet

Pour ouvrir le projet dans Sublime Text, vous allez dans l'onglet file -> Open, puis vous sélectionner votre dossier site vitrine et vous faire ouvrir.

MODULE 2

Page Header

Etape 1

• Préparation du fichier index.html

Dans le fichier index.html, insérez ce code : 

  <!DOCTYPE html>
  <html>
    <head>
      <title>Yorick website</title>
      <meta charset="utf-8" />
      <link href="style.css" rel="stylesheet">
      <link rel="icon" href="images/icon.png">
      <style>
        @import url('https://fonts.cdnfonts.com/css/montserrat');
      </style>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>

    </body>
  </html>

Vous pouvez remplacer Yorick website par votre titre du site et images/icon.png par l'image de votre choix.

La ligne @import url('https://fonts.cdnfonts.com/css/montserrat'); permet d'importer la police Montserrat au projet.

La ligne <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> permet d'importer une librairie javascript qui nous servira plus tard.

Etape 2

• Page header - index.html

Dans le fichier index.html, insérez ce code : 

  <body>
    <div class="header">
      <div class='nav'>
        <div class='nav-inner'>
          <img class='img-logo' src="images/logo.png"/>
          <div class='nav-links'>
            <a href="index.html" class="nav-link">Présentation</a>
            <a href="#realisations" class="nav-link">Mes réalisations</a>
            <a href="#don" class="nav-link">Faire un don</a>
          </div>
        </div>
      </div>
      <div class="fond">
        <img class="img-fond" src="images/banniere.png"/>
      </div>
    </div>
  </body>

Ne copier pas la partie en rouge, c'est-à-dire <body> et </body>. Cette indication vous permet de vous situer dans le code.

Etape 3

• Page header - style.css

Dans le fichier style.css, insérez ce code : 

  body {
    font-family: 'Montserrat', sans-serif;
    margin:auto;
    color:white;
  }

  /*------------- HEADER -----------------*/
  .nav{
    z-index: 1000;
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    position: fixed;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
  }

  .nav-inner {
    width: 97%;
    height: 85px;
    background-color: black;
    border-radius: 10px;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1rem;
    display: flex;
    position: relative;
    opacity: 0.8;
  }

  .img-fond{
    z-index: 10;
    height:auto;
    width:70%;
    margin-bottom:40px;
    margin-top:40px;
    border-radius: 5px;
    border:1px solid white;
  }

  .img-logo {
    width: 100px;
    height: 100%;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }

  .nav-links {
    height: 100%;
    flex: 1;
    justify-content: flex-end;
    align-items: stretch;
    display: flex;
  }

  .nav-link {
    color:white;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    padding-left: 1.5em;
    padding-right: 1.5em;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    position: relative;
  }

  .fond {
    background-color:#13171e ;
    text-align: center;
    height:auto;
  }

Etape 4

• Résultat

Allez dans votre dossier où se situe le fichier index.html et ouvrez-le dans le navigateur de votre choix.

MODULE 3

Page Présentation

Etape 1

• Page présentation - index.html

Dans le fichier index.html, insérez ce code : 

   </div>
    <div class="bloc">
      <h1>Qui suis-je ?</h1>
      <div class='bloc-presentation'>
        <img class="img-photo" src="images/photo.png"/>
        <div class="text-presentation">
          <h4>Je suis Yorick, étudiant en master de Négociations de Projets 
          Internationaux et créateur de la plateforme d’apprentissage «Kaylingo».</h4>
          <h4>Sur ce site web, vous pourrez retrouver des échantillons de nos 
          différents travaux sur la plateforme avec mon associé Evan.</h4>
          <h4>Au fil du temps s’y verront ajouter du contenu en tout genre, 
          tel que quelques vidéos courtes issues de Kaylingo, la création d’un e-book, 
          des podcasts, et autres à venir.</h4>
          <h4>Vous pourrez également retrouver des photos de mes voyages, et de 
          tout ce qui constitue mon univers en général.</h4>
        </div>
      </div>
    </div>
  </body>

Etape 2

• Page présentation - style.css

Dans le fichier style.css, insérez ce code à la suite : 


  /*------------- PRESENTATION -----------------*/

  .bloc {
    background-color:#13171e ;
    margin-top:5px;
    padding-bottom:30px;
  }

  .bloc-presentation {
    display:flex;
    flex-direction: row;
    width:65%;
    margin:auto;
  }

  h1{
    margin:0px;
    padding-top:30px;
    padding-bottom:30px;
    text-align: center;
  }

  h4{
    text-align: center;
    font-weight: 500;
  }

  .img-photo{
    width:250px;
    border:2px solid white;
    border-radius: 5px;
  }

  .text-presentation {
    width:60%;
    margin:auto;
  }

Etape 3

• Résultat

Actualisez votre page index.html.

MODULE 4

Page Réalisations

Etape 1

• Page réalisations - index.html

Dans le fichier index.html, insérez ce code : 

   </div>
    <div id="realisations" class='bloc'>
        <h1>Mes réalisations</h1>
        <div class='bloc-realisations'>
            <video controls>
                <source src="videos/video1.mp4" type="video/mp4">
            </video>
            <video controls>
                <source src="videos/video2.mp4" type="video/mp4">
            </video>
            <video controls>
                <source src="videos/video3.mp4" type="video/mp4">
            </video>
        </div>
    </div>
  </body>

Etape 2

• Page réalisations - style.css

Dans le fichier style.css, insérez ce code à la suite : 


  /*------------- REALISATIONS -----------------*/

  .bloc-realisations{
    display: grid;
      grid-template-columns: repeat(3, 1fr);
  }

  video{
    border: 2px solid white;
    border-radius: 10px;
    width:77%;
    margin:auto;
  }

Etape 3

• Résultat

Actualisez votre page index.html.

MODULE 5

Page Faire un don

Etape 1

• Générer un lien paypal.me

Connectez-vous sur votre compte paypal et générer un lien paypal.me.

Ajoutez une photo si vous le souhaitez ainsi qu'un titre d'url puis créer le lien.

Gardez ce lien sous la main, nous allons en avoir besoin !

Etape 2

• Page faire un don - index.html

Dans le fichier index.html, insérez ce code : 

   </div>
    <div id="don" class="bloc-paypal">
        <div class="bloc-video">
            <h1 class="title-paypal">Faire un don</h1>
        </div>
        <div class="donation_wrapper">
            <div class="single_amount_wrapper">
                <div class="single_amount" value="5">5€</div>
                <div class="single_amount" value="10">10€</div>
                <div class="single_amount" value="20">20€</div>
                <div class="single_amount" value="50">50€</div>
            </div>
            <div class="amount_wrapper">
                <input type="number" value="10.00" step="0.1" min="1.00">
                <div class="suffix">€</div>
            </div>
            <a href="https://www.paypal.me/" class="paypal" target="_blank" 
            rel="nofollow">Faire un don avec paypal.me</a>
        </div>
    </div>
  </body>

Vous pouvez changer les prix selon vos préférences.

Si vous souhaitez afficher le prix par défaut, modifier la valeur de value="10.00".

Etape 3

• Page faire un don - index.html

À la fin de votre fichier index.html, insérez le code suivant : 

  </html>
  <script>
  var donate_link = 'https://www.paypal.com/paypalme/kaylingo/{amount}/';
  // Init link with input amount
  setTimeout(function() {
    $('.donation_wrapper > .amount_wrapper > input').trigger('change');
  }, 20);
  // Update link on change or input
  $(document).on('change input', '.donation_wrapper > .amount_wrapper > input', function() {
    $(this).val(parseFloat($(this).val()).toFixed(2));
    $(this).parent().parent().find('> a').attr('href', donate_link.replace('{amount}', parseFloat($(this).val()).toFixed(2)));
  });
  // Change amount on button click
  $(document).on('click', '.donation_wrapper > .single_amount_wrapper > .single_amount', function() {
    $('.donation_wrapper > .amount_wrapper > input').val(parseFloat($(this).attr('value')).toFixed(2)).trigger('change');
  });
  </script>

Ce script est un code js permettant de faire le lien entre le bouton faire un don et la redirection vers votre lien paypal.me.

N'oubliez pas de renseigner le lien paypal.me que vous avez généré précédemment dans la variable donate_link.

Etape 4

• Page faire un don - style.css

Dans le fichier style.css, insérez ce code à la suite : 


  /*------------- FAIRE UN DON -----------------*/

  .text-paypal {
    width:77%;
    margin:auto;
  }

  .bloc-paypal {
    background-color: #13171e;
    margin-bottom:5px;
    padding-bottom:50px;
    margin-top:5px;
  }

  @import url("https://fonts.googleapis.com/css?family=Raleway");

  .donation_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    font-family: "Raleway", sans-serif;
    padding: 25px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    background: #f5f5f5;
    width:300px;
    margin:auto;
    margin-top: 30px;
  }


 .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    font-size: 25px;
    .noselect;
  }

  .single_amount_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 30px 20px;

  }

  .single_amount {
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 25px;
    color: #fff;
    background: #0070ba;
    cursor: pointer;
  }
    
  .amount_wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;

  }

  input,.suffix {
    padding: 8px;
    border: 0;
    font-weight: bold;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    background: #fff;
  }

  input {
    border-radius: 8px 0 0 8px;
    border-right: 0;
    outline: none;
  }

  .suffix {
    border-radius: 0 8px 8px 0;
    .noselect;
  }

  .paypal {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    padding: 15px 25px;
    border: 0;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    border-radius: 25px;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) inset,
      0 0 0 0 rgba(0, 0, 0, 0) inset;
    background: #0070ba;  
  }

Etape 5

• Résultat

Actualisez votre page index.html.

MODULE 6

Page contact

Etape 1

• Page contact - index.html

Dans le fichier index.html, insérez ce code : 

  </div>
  <div id="contact" class="bloc">
      <h1>Me contacter</h1>
      <div class="bloc-contact">
          <h4>Envoyez moi un DM via Instagram</h4>
          <a href="https://www.instagram.com/kaylingo.io/"><img class='logo-insta' 
          src="images/insta-icon.png"/></a>
          <p>@kaylingo.io</p>
      </div>
  </div>
  </body>

Adaptez les textes en vert avec vos propres informations personnels.

Etape 2

• Page contact - style.css

Dans le fichier style.css, insérez ce code à la suite : 


  /*------------- CONTACT -----------------*/

  .logo-insta {
    width:30px;
  }

  .bloc-contact {
    text-align: center;
  }

Etape 3

• Résultat

Actualisez votre page index.html.

MODULE 7

Footer

Etape 1

• Footer - index.html

Dans le fichier index.html, insérez ce code : 

  </div>
  <div class="footer">
      <h2>2023 | Design by Yorick V.</h2>
  </div>
  </body>

Etape 2

• Footer - style.css

Dans le fichier style.css, insérez ce code à la suite : 


  /*------------- FOOTER -----------------*/

  h2{
    color:black;
    text-align: center;
    font-size: 20px;
    margin-top:3px;
    margin-bottom:3px;
  }

Etape 3

• Résultat

Actualisez votre page index.html.

CONCLUSION

Bravo à toi ! Le guide est désormais terminé. Je te propose un petit aperçu de moi en train de réaliser ce site vitrine. J'ai mis exactement 50 minutes pour faire le site.

Faire un petit geste sympa

J'espère que ces 7 modules vous ont appris de nouvelles connaissances. Si vous avez apprécié ce guide et que vous souhaitez soutenir mon travail, voici une option sympa. Merci d'avance !
5€
10€
20€
50€
€
Faire un don avec paypal.me

2023 | Design by Evan CAO