Tutoriel : Créer un site web réactif avec HTML, CSS et JavaScript

Tutoriel : Créer un site web réactif avec HTML, CSS et JavaScript

Bienvenue dans ce tutoriel sur la création d'un site web réactif !

Dans cet article, nous allons vous guider à travers les étapes nécessaires pour créer un site web qui s'adapte de manière fluide à différents appareils et tailles d'écran, tels que les ordinateurs de bureau, les tablettes et les smartphones. Nous utiliserons les langages de base du développement web - HTML, CSS et JavaScript - pour vous montrer comment créer un site web professionnel et attrayant qui offre une expérience utilisateur optimale sur tous les dispositifs. Que vous soyez débutant ou que vous ayez déjà une certaine expérience en développement web, ce guide vous aidera à comprendre les concepts clés et à créer un site web réactif de qualité.

Les bases du développement web

Dans cette première section, nous allons jeter les bases du développement web en expliquant brièvement les langages de base que nous utiliserons : HTML, CSS et JavaScript.

• HTML (HyperText Markup Language) : HTML est le langage standard utilisé pour créer la structure d'un site web. Il permet de définir la structure et le contenu d'une page web en utilisant des balises pour marquer les différents éléments tels que les titres, les paragraphes, les images, les liens, etc.
• CSS (Cascading Style Sheets) : CSS est un langage de style utilisé pour définir l'apparence d'un site web. Il permet de contrôler la mise en page, les couleurs, les polices, les marges, les bordures et autres aspects visuels d'un site web.
• JavaScript : JavaScript est un langage de programmation utilisé pour ajouter des fonctionnalités interactives et dynamiques à un site web. Il permet de manipuler le contenu d'une page, d'interagir avec les utilisateurs et de créer des effets visuels.

Les principes de conception d'un site web réactif

Dans cette section, nous allons aborder les principes de base de la conception d'un site web réactif. Il est important de comprendre ces concepts clés avant de commencer à coder votre site web.

• Responsive Web Design : Le Responsive Web Design est une approche de conception qui vise à créer un site web qui s'adapte de manière fluide à différentes tailles d'écran et appareils. Cela permet d'offrir une expérience utilisateur cohérente, quelle que soit la plateforme utilisée pour accéder au site web.
• Media Queries : Les Media Queries sont des règles CSS qui permettent de définir des styles différents en fonction des caractéristiques de l'appareil utilisé pour afficher le site web, telles que la largeur de l'écran, la résolution, etc. Les Media Queries sont utilisées pour créer des mises en page flexibles et adaptatives pour différents dispositifs.
• Flexbox et Grid : Flexbox et Grid sont des méthodes de mise en page CSS qui permettent de créer des mises en page flexibles et adaptatives. Ils offrent un moyen puissant de structurer et d'organiser les éléments d'une page web de manière réactive, en permettant de créer des mises en page complexes et personnalisées.

Création d'un site web réactif

Maintenant que nous avons compris les principes de base de la conception d'un site web réactif, passons à la création concrète de notre site web.

Nous allons suivre les étapes suivantes pour créer un site web réactif :

Étape 1 : Planification du contenu

Avant de commencer à coder, il est important de planifier le contenu de votre site web. Réfléchissez à la structure de votre site, aux pages que vous souhaitez inclure, aux fonctionnalités que vous voulez offrir, et à la manière dont vous voulez que votre site web interagisse avec les utilisateurs. Créez un plan détaillé de votre site web, y compris les différents éléments de contenu et les fonctionnalités que vous souhaitez inclure.

Étape 2 : Création de la structure HTML

La première étape dans la création d'un site web réactif est de créer la structure HTML de votre site. Utilisez les balises HTML pour définir les différents éléments de contenu de votre site, tels que les en-têtes, les paragraphes, les images, les liens, etc. Veillez à utiliser une structure sémantique pour améliorer l'accessibilité et l'optimisation du référencement de votre site web.

Exemple de code pour votre page index.html :

<!DOCTYPE html>
<html>
<head>
  <title>Mon site web réactif</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Mon Site Web Réactif</h1>
    <nav>
      <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#passions">Mes passions</a></li>
        <li><a href="#reseaux">Mes réseaux</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="intro" class="section">
      <h2>Introduction</h2>
      <p>Voici un bel exemple pour mon premier site réactif.<br /><b>Essayez donc de redimensionnez la fenêtre et voyez ce qu'il se passe !</b></p>
    </section>
    <section id="passions" class="section">
      <h2>Mes passions</h2>
      <p>Mes passions sont vastes et variées mais la plus grande est celle du développement web !</p>
    </section>
    <section id="reseaux" class="section">
      <h2>Mes Réseaux</h2>
      <p>Vous pouvez me contacter sur mes réseaux, du genre tout-taire, fausse-bouc ou langue-dingue... Sorry, je n'ai pas Antigramme.</p>
    </section>
  </main>
  <script src="reactif.js"></script>
</body>
</html>

Étape 3 : Mise en page avec CSS

Une fois que vous avez créé la structure HTML de votre site web, il est temps de créer la mise en page à l'aide de CSS. Utilisez les règles CSS pour contrôler la mise en page, la typographie, les couleurs, les marges, les bordures, etc. Vous pouvez utiliser les Media Queries pour définir des styles différents en fonction de la taille de l'écran et rendre votre site web réactif.

Exemple de code pour votre page style.css :

body, h1, h2, p, ul, li {
  margin: 0;
  padding: 0;
  background-color:#345;
  color:#FFF;
}

header {
  background-color: #000;
  color: #321;
  padding: 20px;
}

nav ul {
  list-style-type: none;
}

nav li {
  display: inline;
  margin-right: 20px;
}

.section {
  padding: 20px;
}

.section h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.section p {
  font-size: 16px;
  margin-bottom: 10px;
}

.section b {
  color: orange;
}

.small {
  padding: 0!important;
  color:#654;
  transform: scale(0.6); /* Réduit la taille de 40% (1 - 0.4 = 0.6) */
}

Étape 4 : Ajout de fonctionnalités avec JavaScript

Maintenant que vous avez créé la structure HTML et la mise en page avec CSS, vous pouvez ajouter des fonctionnalités interactives à votre site web à l'aide de JavaScript. Utilisez JavaScript pour manipuler le contenu de la page, interagir avec les utilisateurs, valider les formulaires, charger dynamiquement le contenu, etc. Vous pouvez également utiliser des bibliothèques JavaScript populaires telles que jQuery, React, Angular, etc., pour ajouter des fonctionnalités avancées à votre site web réactif.

Voici un exemple de code pour votre page reactif.js

// Sélectionner les éléments du header, des sections
const header = document.querySelector('header');
const sections = document.querySelectorAll('.section');
// Récupérer tous les éléments h1 dans le document
var h1Elements = document.getElementsByTagName("h1");

// Fonction pour gérer les modifications de style en fonction de la taille d'écran
function handleResize() {
  // Récupérer la largeur de la fenêtre
  const windowWidth = window.innerWidth;

  // Si la largeur de la fenêtre est inférieure à 768 pixels, ajouter la classe 'small' aux sections, sinon la supprimer
  if (windowWidth < 768) {
  	for (var i = 0; i < sections.length; i++) {
  		sections[i].classList.add('small');
		}
  } else {
  	for (var i = 0; i < sections.length; i++) {
  		sections[i].classList.remove('small');
		}
  }

  // Si la largeur de la fenêtre est inférieure à 1024 pixels, ajouter la classe 'small' au header, sinon la supprimer
  if (windowWidth < 1024) {
    header.classList.add('small');
  } else {
    header.classList.remove('small');
  }

  // Si la largeur de la fenêtre est inférieure à 1280 pixels, modifier la taille des H1, sinon la remettre à l'origine
  if (windowWidth < 1280) {
  	// Parcourir la liste des éléments h1 et modifier leur taille de police
		for (var i = 0; i < h1Elements.length; i++) {
  		h1Elements[i].style.fontSize = "30px"; // Remplacez la valeur "24px" par la taille de police souhaitée
		}
  } else {
  	// Parcourir la liste des éléments h1 et modifier leur taille de police
		for (var i = 0; i < h1Elements.length; i++) {
  		h1Elements[i].style.fontSize = "60px"; // Remplacez la valeur "40px" par la taille de police souhaitée
		}
  }
}

// Appeler la fonction handleResize pour la première fois pour initialiser les styles en fonction de la taille d'écran actuelle
handleResize();

// Ajouter un écouteur d'événement pour l'événement de redimensionnement de fenêtre
window.addEventListener('resize', handleResize);

Étape 5 : Test et optimisation

Une fois que vous avez terminé la création de votre site web réactif, il est important de le tester sur différents appareils et navigateurs pour vous assurer qu'il s'affiche correctement et fonctionne de manière optimale sur tous les dispositifs. Corrigez les éventuels problèmes d'affichage ou de fonctionnalité et optimisez votre code pour améliorer les performances de votre site web.

Et voilà, vous êtes maintenant prêt(e) à devenir un(e) véritable maître/maitresse du web réactif ! Avec HTML, CSS et JavaScript comme vos fidèles alliés, vous pouvez créer des sites web qui dansent, chantent et s'adaptent à tous les écrans comme des pros. Alors, mettez votre casque de développeur, prenez votre clavier magique et laissez libre cours à votre créativité pour impressionner le monde avec des sites web réactifs sensationnels. N'oubliez pas de partager vos chefs-d'œuvre avec nous, nous serions ravis de les applaudir !