Aller au contenu

Exercice 05 - Styliser le portfolio

Mise en place de l'exercice

  • Dans votre dossier designweb ouvrez le dossier nommé ex02_portfolio
  • Créez ensuite un dossier nommé css et dans ce dossier créez le fichier styles.css où vous allez écrire votre code css.
  • Reliez votre fichier css au fichier index.html

Consignes

Pour chacune des modifications suivantes:

  1. Appliquez les styles demandés en respectant les valeurs proposées.
  2. Expérimentez avec différentes valeurs et observez les changements sur votre page.
  3. Conservez les valeurs qui correspondent au visuel que vous désirez.

Modifications

Styles à appliquer à la page (body)

  1. Modifiez la couleur de fond de la page pour une couleur unie foncée de votre choix.
  2. Appliquez une bordure d'au moins 5 pixels, pointillée et d'une couleur pâle de votre choix.
  3. Appliquez une marge (margin) de 100 pixels et observez le résultat sur la page.
  4. Appliquez un remplissage (padding) de 50 pixels et observez le résultat sur la page.
  5. Inspectez le style de la balise body dans l'inspecteur de votre navigateur et regardez comment la boîte est représentée.
  6. Changez la couleur de fond pour un dégradé. Vous pouvez faire des recherches sur Internet et/ou utiliser un générateur.
  7. Changez le dégradé pour une image de fond (n'hésitez pas à faire des recherches sur Internet pour obtenir le résultat désiré).
  8. Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble.

Styles à appliquer au texte (titres, paragraphes, etc.)

  1. Modifiez les titres :
    • Changez la couleur et la taille. Utilisez la même couleur pour tous les titres (h1, h2, etc.) avec des tailles différentes.
    • Appliquez une police de caractères disponible sur Google Font ou Font Awesome. Utilisez la même police pour tous les titres.
  2. Modifiez le reste du texte (tout sauf les titres):
  3. Utilisez la propriété font-weight pour représenter le texte de la section Présentation en gras.
  4. Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble.

Styles à appliquer aux images

  1. Utilisez la propriété border-radius pour arrondir les coins de votre avatar afin qu'il soit dans un cercle.
  2. Changez le niveau d'opacité et appliquez un filtre de votre choix sur l'image présente dans la section "Une petite image pour finir".
  3. Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble.

Styles à appliquez aux listes à puce

  1. Appliquez les styles suivants sur les éléments de la liste (li) présents dans la balise nav.
    • display: inline;
    • background-color: couleur de votre choix qui s'agence bien avec le fond de votre page
    • margin: 0 30px;
    • padding: 10px 20px 30px 40px;
  2. Inspectez le style d'un élément de liste dans l'inspecteur de votre navigateur et regardez comment la boîte est représentée.
  3. Ajustez les marges et l'espace de remplissage selon vos préférences.
  4. Changez la couleur de fond quand on survol avec la souris un des éléments de la liste.
  5. Modifiez le style des puces de la liste présente dans la section "Liens utiles".
  6. Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble.

Styles à appliquer au tableau

  1. Prenez le temps de lire cet article sur la mise en forme des tableaux: https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Styling_tables
  2. Testez votre compréhension en complétant ce défi : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks
  3. Stylisez le tableau de la section "Mes voisins de tables" en vous assurant de respecter les règles suivantes:
    • l'entête du tableau doit être mise en évidence avec une couleur de fond foncée de votre choix
    • la couleur de fond des lignes doivent être en alternance avec des couleurs de fond pâles de votre choix.
    • les bordures doivent être présentes mais discrètes.
  4. Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble. N'hésitez pas à rechercher des exemples sur Internet.

Styles à appliquer aux sections

  1. Ajoutez une fine bordure au bas de chacune des sections en appliquant un style css sur la balise section.
  2. Ajustez la marge et l'espace de remplissage selon vos préférences.
  3. Modifiez le style de la dernière section pour qu'elle n'ait pas de bordure en utilisant l'id de cette section ou une pseudo-classe permettant de cibler la dernière section de la page.

Un peu de créativité

Ajoutez 5 styles de votre choix à votre page

Apprendre par les pairs

Présentez votre page à au moins 2 autres personnes de la classe. Prenez le temps de comparer le résultat et d'expliquer les styles utilisés en leur montrant de CSS que vous avez écrit.