Le site d'Ossama

Mon pok qui crée un site web chez moi.

Introduction

N'ayant aucune notion de création de site internet, j'ai voulu utlisé le temps accordé à ce premier POK pour découvrir et acquérir de nouvelles compétences informatiques.

Les premiers pas

Au départ, il a fallu trouvé les ressources nécessaires pour débuter en language htmlet CSS. Après différents tutoriels trouvés sur internet, j'en ai trouvé un très complet et intéressent. Il explique pas à pas comment créer un site internet en étant débutant. Il prend le temps de vraiment expliquer toutes les tâches, le fontionnement de chaque ligne et comment l'adapter à ce qu'on souhaite faire.

Création du site

Réglages généraux

Quelques réglages qu'il suffit de mettre au départ sur le code CSS :

• Enlever les marges automatique pour que ça soit plus esthétique lorsque l'on place une image en fond par exemple.

  body{ margin: 0 auto; }

• Modifier le scroll pour qu'il soit plus fluide.

  html { scroll-behavior: smooth ; }

En-tête de page

On va passer à la création de l'en-tête du site, il s'agit dune bande tout en haut du site où l'on va placer 3 boutons cliquable. Création du bandeau avec du html :

Après l'avour créer, on va utiliser du CSS pour modifier ses carctéristiques, on va par exemple indiquer le taille du logo ou la couleur du fond.

header { display: flex; align-items: center; background-color: #b6f5faa5; } header img { width: 180px; }

On va égalment le CSS pour disposer les futurs boutons cliquable de la manière dont on souhaite :

nav.nav { font-weight: bold; width: 300px; display: flex; list-style: none ; justify-content: space-between; margin-left: 60px;

} nav.nav li a { color: white; text-decoration: none ;

A la fin, en compilant toutes nos lignes de comandes, on obtient le résultat suivant :

La landing page

La landing page est la première chose qu'une personne verra en arrivant sur le site, il faut y retrouver le titre ou le slogan que l'on souhate y placer.

Comme précedemment, on va utiliser le CSS pour mettre en place ce que l'on souhaite. On va chosir notre image de fond, sa taille, le type d'affichage, la taille du titre...

section.top-page { background: url(../Photo_ecole.jpeg); background-size: cover; height: 80vh; }

/* Titre principal */ .big-title { color: white; font-size: 40px; padding: 20px 50px; }

En utilisant les paramètres précedents, on obtient :

Structuration de la partie POK et MON

On va passer à la partie la plus importante, les différents parties ou j'ai décidé d'y presenter les MON et POK que j'ai choisi.