Table des matières:

1. Styles CSS de base
2. Ajout de styles avancés
3. Déploiement sur GitHub
4. Conclusion

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”. Après cela on va vers le fichier index.html pour le lier au fichier style.css et le link on le met dans la balise head

<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 Explication brève des propriétés utilisés au niveau de style.css :

• 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.

.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.

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

.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.

@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.

Maintenant attaquons la partie du déploiement. Nous allons utilisés justes les commandes de git qu’on a besoin pour effectuer le déploiement.

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 Lorsque nous avons terminé de remplir les informations, nous cliquons sur ce bouton pour créer le dépôt Voici la page vers laquelle nous sommes dirigés. Vous utilisez ces commandes pour lier votre dépôt distant à votre dépôt local Vous ouvrez votre terminal pour exécuter les commandes suivantes Lorsque vous exécutez la commande git init , cela initialise le projet Git dans le répertoire spécifié. En conséquence, les fichiers et répertoires deviennent suivis par Git, et leur statut apparaît en vert lorsqu’ils sont prêts à être ajoutés à un commit On applique la commande git add . pour ajouter tous les fichiers existants. On n’a pas de résultat au niveau du terminal mais plutôt au niveau des fichiers La commande git commit nous permet de créer une “capture” de l’état actuel des fichiers dans notre répertoire de travail et l’enregistrez dans l’historique des versions de Git. Le **-m“ “ ** permet de spécifier un message descriptif pour le commit

Maintenant on remarque que l’état des fichiers est devenu normal ce qui veut dire qu’on a bien sauvegardé notre premier version de git

On peut créer une branche avec la commande git branch +le nom de la branche ou bien renommer la branche actuelle en main ou bien même par un nom que l’on souhaite avec cette commande branch -M main Maintenant on ajoute la commande git remote add pour ajouter un remote à notre dépôt local.

Maintenant on pousser notre travail vers le dépôt distant à l’aide de la commande git push Nous voilà sur notre interface github , tous les fichiers se trouvent ici Nous pouvons passer à l’étape suivante Puis on défile vers la section Github Page Tadaam notre site est en live voici le lien du site https://oumylayelay1.github.io/monprojet/

Récapitulation : Balise : est un élément de structure utilisé pour marquer le début et la fin d’un contenu spécifique sur une page web. Exemple: <body></body> Alt : est un attribut utilisé dans les balises d’images (<img>) en HTML pour fournir un texte alternatif décrivant le contenu de l’image.

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 !