Centrer du contenu horizontalement et faire des variables de couleur

4ème étape de la série de tutoriel sur comment faire son propre site web personnel le plus simplement possible et pour pas très cher, diffusés une fois par semaine sur mon stream twitch. Vous pouvez retrouver la vidéo sur ma chaine youtube

Ici, on voit comment concevoir son site web avant même de commencer à coder :

  1. Lister et dessiner les pages nécessaires
  2. Pour chaque page, dessiné et encadrer les blocs fonctionnels qui vont la composer
  3. Choisir un schema de couleur et le coder avec des variables CSS

Ensuite, on voit comment utiliser les class css, centrer un élément horizontalement simplement ( Wow ) et enfin, rajouter une photo !

Pour centrer du contenu on a juste utilisé : 


          .content  {
              width: 80%;
              margin: auto;
          }
et pour les variables de couleurs en css : 

          :root {
              --main-color-letters: #333;
              --light-white: #FEFFFF;
              --main-accent: #EE4601;
              --second-accent: #320574;
              --third-accent: #D6CD61;

              --fourth-accent: #E8A67A;
              --fifth-accent: #EDE6B3;

          }

          /* 1. Colors and border */
          body {
              background-color: var(--light-white);
          }

          h1 {
              color: var(--main-accent);
          }
Et on a obtenu une image bien centrée !

Dans la prochaine étape , on verra que suivant les tailles d'ecrans, il faut penser à modifier la manière dont s'affiche son contenu : mobile, grand ecran, petites résolutions, etc... Et surtout, on verra comment tester et debugger ca !