Portfolio web CSS

Partager:

Difficulté:

Dans ce tuto vous verrez comment faire la mise en page de votre porte folio en CSS.

Il y a 4 fichiers qui vous sont donnés contenant le code des différentes pages. Ce tuto vous explique quelles lignes vous pouvez modifier pour personnaliser votre portfolio.

Matériel :

Budget : 0€

  • 1 ordinateur + éditeur de texte

Etape 1 : Enregistrer un fichier en .CSS

Pour commencer vous allez créer un nouveau fichier et l’enregistrer en .CSS comme sur l'image maintenant que vous savez enregistrer un fichier en CSS passons au codage. 

Etape 2 : La page d’accueil

Vous pouvez voir différents rassemblements de ligne de code qui correspondent à différentes parties de votre page web. Chaque partie est composée d’une balise (par exemple body) et de ligne de code entre des accolades. 

margin: 0 ; permet de coller votre body (le contenue du site) au bord de la page. 

color: black; change la couleur du texte en noir (si vous souhaiter l’afficher dans une autre couleur il vous suffit de la marquer en anglais à la place de black). 

font-size: 25px; change la taille du texte en pixel (en changeant la valeur vous pouvez l’augmenter ou la réduire). 

background-color:black; change la couleur de fond de la menu barre en noir 

display: flex; 

justify-content: space-around;  ces deux lignes permettent de mettre un espace entre les options du menu mais également avec les bords. 

padding-top:50px; 

padding-bottom:50px; ces deux lignes permettent de mettre une marge égale en haut et en bas (pour changer la marge il suffit de changer la valeur). 

text-decoration:none; permet de ne pas avoir nos options du menu soulignées (sans cette ligne elles le sont). 

font-family: arial; met la police en arial (attention certain moteur de recherche ne prennent pas en compte certaine police). 

a:hover permet d’agir sur l’élément lorsque l’on passe notre souris dessus 

opacity: 0.5; règle l’opacité du menu (changer la valeur change la transparence). 

text-align: justify; permet de régler automatiquement les espaces entre les mots pour que le texte prenne toute la ligne. 

float: left; permet au texte de se mettre à coter de l’image. 

Etape 3 : Le slider de la page d'accueil

On va maintenant voir le fonctionnement des slides glissantes de la page d’accueil 

Pour animer ces slides on utilise des fonctions keyframes.  Recopiez la première accolade on pourra ensuite modifier le reste. 

Le .slider définit l’espace où les images se déplacent, il se doit donc d’être de mêmes dimensions que les images pour qu’elles puissent s’afficher entièrement.  

Le overflow :hidden ; permet de ne pas afficher les parties de l’image qui dépassent du slider. 

On attribue à notre slider un margin auto pour le centre. 

Dans le .slides  

width : calc(500px*3) ; permet de dire aux images de s’aligner (500px correspond à la largeur des images).  

animation: glisse 20s infinite; permet d’effectuer l’action du dessus en 20 secondes. On peut modifier sa valeur pour changer le temps de glissement. 

Dans le .slide 

float: left; Les images s’alignent de gauche à droite 

@keyframes glisse permet de choisir à quel moment on veut que la slide change. 

@keyframes glisse { 

  0%{ 

    transform: translateX(0);  à 0% du temps on reste sur la position initiale 

  } 

  25%{ 

    transform: translateX(-500px);  à 25% du temps on déplace la slide de 500 pixels vers la droite 

  } 

  50%{ 

    transform: translateX(-1000px);  à 50% du temps on déplace la slide de 500 pixels vers la droite 

  } 

  75%{ 

    transform: translateX(-500px);  à 75% du temps on déplace la slide de 500 pixels vers la gauche 

  } 

  100%{ 

    transform: translateX(0px);  à 1005% du temps on déplace la slide de 500 pixels vers la gauche 

  } 

} 

Ces lignes permettent de déplacer le slide d’image en image puisqu’elles font 500 pixels de largeur d’abord vers la gauche puis vers la droite. Cette action se répète à l’infini. 

Comme pour la barre de menu ici on décide de changer l’opacité des images pour les rendre semi-transparentes lorsque l’on passe notre souris dessus grâce à opacity : 0,5 ;. 

Ces dernières lignes du css permettent de définir la police du lien vers notre CV avec  

font-familly : arial ;  et de le centrer grâce à la fonction text-align :center ;. 

Etape 4 : La page compétences

background-image:url("https://repare-pc.com/wp-content/uploads/2016/12/logiciels-gratuits.png"); 

background-size:500px; 

background-attachment: unfixed;  

background-repeat: no-repeat;  

background-position: 50% 70%; 

Ici notre fond d’écran est une image (pour changer l’image il suffit de prendre l’url internet de l’image que vous voulez) qui fait 500 pixels qui reste au centre de votre écran quand vous descendez dans la page. Le 50% correspond au milieu de la ligne et le 70% à sa hauteur dans la page. 

text-decoration: underline; souligne le texte. 

left: 70%; met votre paragraphe à gauche  

max-width: 40%; donne une taille maximale en largeur à votre paragraphe 

border: 1px solid; met une bordure de 1pixel continue. 

Etape 5 : La page contact

flex-direction: column; met le l’email et le LinkedIn en colonne 

border-radius: 30px; arrondie les bords de l’encadrement de votre mail. 

Etape 6 : La page projet

Align-items: center;  

felx-direction: column; permet d’aligner vos projets les uns en dessous des autres 

Etape 7 : Mise en ligne

Pour mettre votre site web en ligne rien de plus simple, il vous suffit de trouver un hébergeur gratuit ou payant sur internet vous inscrire et de d’uploader vos fichier html, css et autre documents permettant au site de fonctionner pour que la page web soit créée. Nous avons par exemple utilisés un hébergeur gratuit de 000webhost.com avec une petite contrepartie, le nom de leur site est présent dans l’adresse du notre et leur logo s’affiche sur notre page.  

Le site que nous avons créé est disponible à cette adresse :  

https://portfolio-ino.000webhostapp.com/index.html  

Partager:

Recevez une fois par mois les meilleurs tutoriels Déco dans votre boîte mail


Ces tutoriels devraient vous plaire

Arduino et Porte automatique de poulailler
Redonnez vie à vos anciens ordinateurs avec Chrome OS
Comment fabriquer son filament pour imprimante 3D

Antoine Lefèvre

Suivre

Vues: 18
J'aime: 1

Découvrez d'autres tutoriels de

Antoine Lefèvre

Découvrez tous les tutoriels partagés sur Oui Are Makers

Powered by Oui Are Makers