Styles CSS de base

Au niveau de ce point on va utiliser les propriétés de bases qui sont fréquemment utilisé comme display, margin, padding, font-size, color, background, etc. Maintenant avant d'avancer on crée d’abord notre fichier css qu’on va nommer style.css puis on le lie avec notre fichier index.html Pour créer le fichier "style.css", vous cliquez en dessous de "index.html", puis vous choisissez l'option "Nouveau fichier" ou “new file”. Ensuite, vous saisissez le nom que vous souhaitez, suivi de l'extension ".css".

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

Maintenant on peut commencer à styliser le navbar Le code ajouté pour le navbar

*{
    margin: 0;
}
body{
    overflow-x: hidden;
}
.logo{
    width: 50%;
}
.listImage{
    width: 10%;
}
.containerNav{
    background: white;
}
.list{
    list-style: none;
    font-size: 21px;
}
a{
    text-decoration: none;
}
.lien{
    color: #db3131c7;
}
.lienContact{
    background: #db3131c7;
    color: white;
    padding: 15px;
}

Le rendu

• Le caractère * (astérisque) est un sélecteur universel qui correspond à tous les éléments HTML sur une page web ainsi on l’a donné la propriété margin=0 pour supprimer toutes les marges par défaut pour tous les éléments de la page.
• La propriété margin permet de définir une marge extérieure de chaque côté d'un élément
• La propriété padding permet de définir une marge intérieure de chaque côté d'un élément
• La propriété width permet de définir la largeur de la boîte du contenu d'un élément
• La propriété background permet de mettre un couleur de fond
• La propriété display permet de changer le mode d'affichage par défaut d'un élément, il peut les aligner, les mettre en bloc, etc
• La propriété list-style permet de spécifier le type du marqueur d'item de liste à utiliser
• La propriété font-size permet de définir la taille de fonte utilisée pour le texte
• La propriété text-decoration permet de paramétrer cette propriété et d'autres propriétés associées aux décorations
• La propriété color permet de définir la couleur de premier plan d'un élément texte et de ses éventuelles décorations Si vous comprenez bien l’utilisation de ces propriétés, on peut passer à la stylisation des autres parties de la page.
  css Copier

  .containTitle{
    text-align: center;
    color: grey;
    font-weight: 800;
    padding: 30px 0;
  }
  .myParagraph{
    font-size: 20px;
    padding: 25px;
  }  
  .service{
    max-width: 100%;
    max-height: 175px;
    margin: 15px;
  }
  .ImageBlog{
    width: 75%;
  }
  .formContain{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .containerLabel, .containButton{
    padding: 15px;
  }
  .inputClass{
    width: 100%;
    padding: 10px;
  }  
  .labelClass{
    font-size: 21px;
  }
  .soumission{
    width: 100%;
    text-align: center;
    background: #db3131c7;
    color: white;
    padding: 5px;
    border: solid #db3131c7;
    font-size: 21px;
  }
  .containerFooter{
    display: flex;
    justify-content: space-around;
    align-items: baseline;  
  }
  footer{
    background: #db31318f;
    color: white;
    padding: 25px;
  }
  .textFS{
    font-size: 20px;
  }  
  .icons{
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 10px;
  }

  Allons voir ce qu’on a maintenant au niveau du navigateur

  

  

  

  Notre site commence à être joli maintenant on peut ajouter des styles un peu avancé pour rendre la page magnifique .

  Ajout de styles avancés

  On voulait enlever l’image qui est au niveau du header pour le mettre en background , mettre des box-shadow , etc.

  css Copier

  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  La propriété box-shadow permet d’appliquer un ombre au niveau de l’élément

  css Copier

  .containerHeader{
    background-image: url("./Images/pictureHeader.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
  }

  La propriété background-image permet d’ajouter une image en arrière-plan, le background-repeat définit la façon dont les images d'arrière-plan sont répétées, le background-size est utilisée pour définir la taille de l'image d'arrière-plan et le height c’est pour définir une hauteur pour l’élément ciblé. Pour ce qui est des styles avancés, il en existe de nombreux autres, mais nous avons pris seulement quelques exemples à titre d'illustration. Parmi les autres techniques avancées que l'on peut mentionner figurent les animations, les transitions, les dégradés, les ombres, les effets 3D, etc. Les medias queries permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil ainsi le media (@media) s'applique lorsque la largeur de l'écran est entre 320px à 991 px.

  css Copier

  @media screen and (min-width: 320px) and (max-width: 991px) {
    .containerFooter, .containerParagraph, .containPicture {
        display: block;
    }
    .list {
        font-size: 10px;
    }
    .logo{
        width: 25%;
    }
    .lienContact{
        padding: 5px;
        font-size: 10px;
    }
    .listImage{
        display: none;
    }
    .containerList{
        padding: 15px;
    }
    .containerHeader{
        height: 200px;
    }
    .textHome {
        font-size: 24px;
        padding: 23% 0 0 15%;
    }
  }

  C’est-à-dire que les médias permettent de gérer la responsivité de la page.

Déploiement sur GitHub

Si vous vous rappelez bien, nous avions déjà créé un compte GitHub via ce lien https://github.com/. Maintenant, nous utilisons ce compte pour créer un dépôt distant. On clique sur new pour créer un nouveau dépôt

Exemple : <img src=” ” alt=” une image “/> ©:est une entité de caractères HTML qui représente le symbole de droit d'auteur ©. remote : est un alias pour un dépôt distant où vous pouvez pousser et récupérer des commits

Conclusion

En conclusion, ce tutoriel vous a guidé à travers les étapes essentielles pour créer votre premier site web avec HTML et CSS, en mettant l'accent sur la pratique plutôt que sur la théorie. Nous avons exploré les bases de HTML, y compris la création de la structure de base d'une page web avec des balises HTML, ainsi que l'ajout de contenu et d'images. Nous avons également plongé dans les fondamentaux de CSS, en appliquant des styles pour améliorer l'apparence et la mise en page de notre site. En suivant ce tutoriel, vous avez appris à configurer votre environnement de développement, à utiliser un éditeur de texte comme Visual Studio Code, à travailler avec Git pour le contrôle de version et à déployer votre site sur GitHub Pages. En continuant à explorer et à expérimenter avec ces technologies, vous serez en mesure de créer des sites web plus avancés et personnalisés à l'avenir. N'oubliez pas que la pratique est la clé pour maîtriser ces compétences, alors continuez à coder et à créer !

QCM Pour mettre à l'épreuve vos compétences, nous vous invitons à répondre à ces questions dans le formulaire suivant : https://qruiz.net/Q/?dmwFYq. Bonne chance !