Documentation - Portfolio Anis

HTML5

HTML (HyperText Markup Language) est le langage de balisage qui structure le contenu des pages web. Chaque balise définit un élément de la page.

Structure de base

<!DOCTYPE html>

Déclaration qui indique au navigateur qu'il s'agit d'un document HTML5.

<!DOCTYPE html>

<html>

Élément racine qui contient tout le document HTML. L'attribut lang définit la langue.

<html lang="fr">...</html>

<head>

Contient les métadonnées de la page (titre, liens CSS, favicon, etc.). Non visible sur la page.

<head>
  <title>Mon site</title>
</head>

<body>

Contient tout le contenu visible de la page web (texte, images, vidéos, etc.).

<body>
  <!-- Contenu visible -->
</body>

Métadonnées (dans <head>)

Définit l'encodage des caractères. UTF-8 permet d'afficher les accents et caractères spéciaux.

<meta charset="UTF-8">

Essentiel pour le responsive design. Adapte la page aux écrans mobiles.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>

Titre de la page affiché dans l'onglet du navigateur et dans les résultats Google.

<title>Portfolio Anis</title>

<link>

Lie des ressources externes comme les fichiers CSS ou la favicon.

<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="images/logo.png">

Structuration sémantique

En-tête de la page ou d'une section. Contient souvent le logo et la navigation.

<header class="header">
  <!-- Logo + Navigation -->
</header>

<nav>

Zone de navigation contenant les liens vers les différentes pages du site.

<nav class="nav">
  <ul>
    <li><a href="index.html">Accueil</a></li>
  </ul>
</nav>

Regroupe un contenu thématique. Utilisé pour diviser la page en parties logiques.

<section class="stage-section">
  <!-- Contenu du stage -->
</section>

Pied de page contenant les informations de copyright, liens légaux, etc.

<footer class="footer-portfolio">
  <!-- Copyright + Liens -->
</footer>

<div>

Conteneur générique sans signification sémantique. Utilisé pour grouper des éléments et appliquer du CSS.

<div class="stage-content">
  <!-- Contenu -->
</div>

Titres et texte

Titres hiérarchiques. h1 est le plus important (1 seul par page), h6 le moins important.

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

<p>

Paragraphe de texte. Élément de base pour le contenu textuel.

<p>Ceci est un paragraphe de texte.</p>

Texte important mis en gras. A une valeur sémantique (importance).

<strong>Texte important</strong>

<span>

Conteneur en ligne pour styliser une partie de texte sans créer de nouveau bloc.

<span class="silver">texte coloré</span>

Listes

<ul>

Liste non ordonnée (à puces). Contient des éléments <li>.

<ul class="stage-missions">
  <li>Mission 1</li>
  <li>Mission 2</li>
</ul>

<li>

Élément de liste. Doit être contenu dans <ul> ou <ol>.

<li>Élément de la liste</li>

Liens et médias

<a>

Lien hypertexte. href définit la destination, target="_blank" ouvre dans un nouvel onglet.

<a href="https://site.com" target="_blank">
  Voir le site
</a>

<img>

Image. src = chemin de l'image, alt = texte alternatif (accessibilité + SEO).

<img src="images/logo.png" alt="Logo" class="footer-logo">

<video>

Lecteur vidéo. Les attributs contrôlent la lecture automatique, en boucle, sans son.

<video autoplay muted loop playsinline>
  <source src="videos/bg.mp4" type="video/mp4">
</video>

<svg>

Image vectorielle intégrée directement dans le HTML. Personnalisable via CSS.

<svg width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10"></circle>
</svg>

Formulaires

<form>

Conteneur de formulaire. Regroupe les champs de saisie.

<form id="contactForm">
  <!-- Champs -->
</form>

<input>

Champ de saisie. Le type définit le format (text, email, password...).

<input type="text" placeholder="Votre nom" required>
<input type="email" placeholder="Votre email">

Zone de texte multiligne pour les messages longs.

<textarea placeholder="Votre message" required></textarea>

Liste déroulante. Contient des <option> pour les choix.

<select required>
  <option value="">Choisir...</option>
  <option value="stage">Stage</option>
</select>

Bouton cliquable. type="submit" envoie le formulaire.

<button type="submit" class="btn-submit">
  Envoyer
</button>

<label>

Étiquette associée à un champ. Améliore l'accessibilité.

<label for="email">Email</label>
<input id="email" type="email">

CSS3

CSS (Cascading Style Sheets) définit l'apparence visuelle de la page : couleurs, tailles, espacements, animations, mise en page, etc.

Variables CSS (Custom Properties)

:root

Sélecteur qui cible la racine du document. Utilisé pour déclarer des variables CSS globales.

:root {
  --silver: #C0C0C0;
  --bg-black: #000000;
  --text-white: #FFFFFF;
  --text-gray: #AAAAAA;
}

var()

Fonction pour utiliser une variable CSS déclarée avec --.

.element {
  color: var(--silver);
  background: var(--bg-black);
}

Sélecteurs

.classe

Sélectionne tous les éléments avec cette classe. Le plus utilisé.

.stage-title {
  font-size: 3rem;
  color: var(--text-white);
}

#id

Sélectionne l'élément unique avec cet ID. Plus spécifique qu'une classe.

#contactForm {
  max-width: 600px;
}

element

Sélectionne tous les éléments de ce type (balise HTML).

body {
  margin: 0;
  background: #000;
}

::before / ::after

Pseudo-éléments pour ajouter du contenu avant ou après un élément.

.stage-separator::before {
  content: '';
  width: 60%;
  height: 2px;
  background: var(--silver);
}

:hover

Pseudo-classe qui s'applique quand la souris survole l'élément.

.stage-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(192,192,192,0.5);
}

Mise en page (Layout)

display: flex

Active Flexbox pour aligner les éléments enfants sur un axe (horizontal ou vertical).

.stage-buttons {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
}

display: grid

Active CSS Grid pour créer des mises en page en lignes et colonnes.

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

position

Définit le positionnement : static, relative, absolute, fixed, sticky.

.stage-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

z-index

Définit l'ordre d'empilement des éléments. Plus le nombre est élevé, plus l'élément est devant.

.stage-video-bg {
  z-index: -2;
}
.stage-overlay {
  z-index: -1;
}

Dimensions et espacement

padding

Espace intérieur entre le contenu et la bordure de l'élément.

.stage-content {
  padding: 80px 40px; /* haut/bas gauche/droite */
}

margin

Espace extérieur autour de l'élément, entre lui et les autres éléments.

.stage-title {
  margin-bottom: 15px;
}

width / height

Largeur et hauteur de l'élément. Peut être en px, %, rem, vh, vw...

.stage-section {
  min-height: 100vh; /* 100% hauteur écran */
  width: 100%;
}

max-width

Largeur maximale. L'élément ne dépassera jamais cette taille.

.stage-content {
  max-width: 900px;
}

Apparence

background

Couleur ou image de fond. Peut combiner couleur, dégradé, image.

.stage-overlay {
  background: rgba(0, 0, 0, 0.65);
}
.separator {
  background: linear-gradient(90deg, transparent, #C0C0C0, transparent);
}

border

Bordure autour de l'élément : épaisseur, style, couleur.

.stage-btn {
  border: 2px solid var(--silver);
  border-radius: 30px;
}

box-shadow

Ombre portée autour de l'élément. Crée de la profondeur.

.stage-btn:hover {
  box-shadow: 0 0 30px rgba(192,192,192,0.5);
}

backdrop-filter

Applique des effets (flou, etc.) à l'arrière-plan visible à travers l'élément.

.stage-overlay {
  backdrop-filter: blur(2px);
}

Typographie

font-family

Police de caractères. Peut lister plusieurs polices de secours.

.stage-title {
  font-family: 'Orbitron', sans-serif;
}

font-size

Taille du texte. clamp() permet une taille responsive.

.stage-title {
  font-size: clamp(2rem, 4vw, 3rem);
  /* min, préféré, max */
}

color

Couleur du texte. Accepte hex, rgb, rgba, hsl, noms de couleurs.

.stage-subtitle {
  color: var(--silver);
}

text-transform

Transforme le texte : majuscules, minuscules, capitalisation.

.stage-title {
  text-transform: uppercase;
  letter-spacing: 3px;
}

Animations et transitions

transition

Animation fluide lors d'un changement de propriété (ex: au survol).

.stage-btn {
  transition: all 0.3s ease;
}
/* Propriété, durée, courbe */

transform

Transforme l'élément : déplacement, rotation, échelle, etc.

.stage-btn:hover {
  transform: translateY(-3px) scale(1.05);
}

@keyframes

Définit les étapes d'une animation personnalisée.

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

animation

Applique une animation @keyframes à un élément.

.element {
  animation: fadeIn 0.8s ease forwards;
}

Responsive Design

@media

Applique des styles uniquement si certaines conditions sont remplies (taille d'écran).

@media (max-width: 768px) {
  .stage-title {
    font-size: 1.8rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

JavaScript

JavaScript ajoute de l'interactivité à la page : animations au scroll, gestion des clics, formulaires, menu mobile, etc.

Sélection d'éléments (DOM)

document.querySelector()

Sélectionne le premier élément correspondant au sélecteur CSS.

const menuToggle = document.querySelector('.menu-toggle');
const form = document.querySelector('#contactForm');

document.querySelectorAll()

Sélectionne tous les éléments correspondant au sélecteur. Retourne une NodeList.

const links = document.querySelectorAll('.nav-link');
const cards = document.querySelectorAll('.stage-card');

document.getElementById()

Sélectionne un élément par son ID unique.

const form = document.getElementById('contactForm');

Gestion des événements

addEventListener()

Écoute un événement sur un élément et exécute une fonction.

menuToggle.addEventListener('click', () => {
  // Code exécuté au clic
  menuToggle.classList.toggle('active');
});

DOMContentLoaded

Événement déclenché quand le HTML est complètement chargé.

document.addEventListener('DOMContentLoaded', () => {
  // Le DOM est prêt
  console.log('Page chargée !');
});

submit

Événement déclenché à la soumission d'un formulaire.

form.addEventListener('submit', (e) => {
  e.preventDefault(); // Empêche le rechargement
  // Traitement du formulaire
});

Manipulation des classes CSS

classList.add()

Ajoute une classe CSS à un élément.

element.classList.add('visible');
element.classList.add('active');

classList.remove()

Supprime une classe CSS d'un élément.

element.classList.remove('active');

classList.toggle()

Ajoute la classe si absente, la supprime si présente.

menuToggle.classList.toggle('active');
// Parfait pour ouvrir/fermer un menu

classList.contains()

Vérifie si un élément possède une classe. Retourne true ou false.

if (element.classList.contains('active')) {
  // L'élément a la classe 'active'
}

Boucles

forEach()

Exécute une fonction pour chaque élément d'un tableau ou NodeList.

document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', () => {
    // Action pour chaque lien
  });
});

Intersection Observer (animations au scroll)

IntersectionObserver

Détecte quand un élément entre dans la zone visible de l'écran. Utilisé pour les animations au scroll.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.fade-in').forEach(el => {
  observer.observe(el);
});

Création et modification d'éléments

document.createElement()

Crée un nouvel élément HTML.

const msg = document.createElement('div');
msg.className = 'success-message';
msg.textContent = 'Message envoyé !';

appendChild()

Ajoute un élément enfant à un élément parent.

form.appendChild(msg);
// Ajoute msg à la fin du formulaire

innerHTML

Définit ou récupère le contenu HTML d'un élément.

element.innerHTML = `
  <svg>...</svg>
  <span>Message envoyé</span>
`;

textContent

Définit ou récupère le texte d'un élément (sans HTML).

counter.textContent = 42;
// Affiche "42" dans l'élément

Fonctions

Arrow function (=>)

Syntaxe courte pour écrire des fonctions.

// Fonction classique
function maFonction() { }

// Arrow function
const maFonction = () => { };

// Avec paramètre
const double = (x) => x * 2;

const / let

const pour les valeurs qui ne changent pas, let pour celles qui peuvent changer.

const PI = 3.14; // Ne changera jamais
let compteur = 0; // Peut être modifié
compteur++; // compteur = 1