ww-w-ai/bkit-codex

Compétence Débutant (Starter)

Développement web statique pour les débutants et les non-développeurs.

Actions

Action	Description	Exemple
init	Initialisation du projet	$starter init mon-portfolio
guide	Afficher le guide de développement	$starter guide
help	Aide pour débutants	$starter help

init (Initialisation du projet)

1. Créer la structure du répertoire du projet (HTML/CSS/JS ou Next.js)
2. Générer package.json (lorsque Next.js est sélectionné)
3. Créer AGENTS.md (Niveau : Starter spécifié)
4. Créer la structure du dossier docs/ (pour les documents PDCA)
5. Initialiser .pdca-status.json

guide (Guide de développement)

• Analyser l'état actuel du projet
• Suggérer les prochaines étapes appropriées au niveau Starter
• Guide du pipeline axé sur les Phases 1-3 (1 -> 2 -> 3 -> 6 -> 9)

help (Aide pour débutants)

• Expliquer les concepts de base du HTML/CSS/JS
• Répondre aux questions fréquemment posées
• Fournir des exemples de code

Public cible

• Ceux qui apprennent la programmation pour la première fois
• Ceux qui souhaitent créer un site web simple
• Ceux qui ont besoin d'un site portfolio

Pile technologique

Option A : HTML/CSS/JS pur (pour les débutants complets)

HTML5        -> Structure de la page web
CSS3         -> Mise en forme
JavaScript   -> Fonctionnalités dynamiques (optionnel)

Option B : Next.js (avec framework)

Next.js 14+  -> Framework basé sur React
Tailwind CSS -> CSS utilitaire
TypeScript   -> Sécurité des types (optionnel)

Recommandation de niveau de langage

Recommandé : Langages de niveau 1 uniquement (Python, TypeScript, JavaScript)

Niveau	Autorisé	Raison
Niveau 1	Oui	Assistance AI complète, optimisé pour Vibe Coding
Niveau 2	Limité	Envisager plutôt le niveau Dynamic
Niveau 3-4	Non	Passer à Dynamic/Enterprise

Structure du projet

Option A : HTML/CSS/JS

projet/
├── index.html          # Page principale
├── about.html          # Page À propos
├── css/
│   └── style.css       # Styles
├── js/
│   └── main.js         # JavaScript
├── images/             # Fichiers images
├── docs/               # Documents PDCA
│   ├── 01-plan/
│   └── 02-design/
└── README.md

Option B : Next.js

projet/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Mise en page commune
│   │   ├── page.tsx        # Page principale
│   │   └── about/
│   │       └── page.tsx    # Page À propos
│   └── components/         # Composants réutilisables
├── public/                 # Fichiers statiques
├── docs/                   # Documents PDCA
├── package.json
├── tailwind.config.js
└── README.md

Concepts de base

HTML (Structure de la page web)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>En-tête</header>
    <main>Contenu principal</main>
    <footer>Pied de page</footer>
</body>
</html>

CSS (Mise en forme)

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

@media (max-width: 768px) {
    .container { padding: 10px; }
}

Next.js App Router

// app/page.tsx
export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold">Bienvenue !</h1>
    </main>
  );
}

Méthodes de déploiement

GitHub Pages (Gratuit)

1. Créer un dépôt GitHub
2. Pousser le code
3. Paramètres -> Pages -> Source : branche main
4. Accéder à https://nomutilisateur.github.io/nom-du-depot

Vercel (Recommandé pour Next.js)

1. S'inscrire sur vercel.com (intégration GitHub)
2. "Nouveau projet" -> Sélectionner le dépôt
3. Cliquer sur "Déployer"

Limitations

• Pas de connexion/inscription (nécessite un serveur)
• Pas de stockage de données (nécessite une base de données)
• Pas de pages d'administration (nécessite un backend)
• Pas de fonctionnalités de paiement (nécessite un backend)

Quand passer à la version supérieure

Passez au niveau Dynamic ($dynamic) si vous avez besoin :

• De fonctionnalités de connexion
• De stockage de données
• De pages d'administration
• De fonctionnalités de communication utilisateur

Flux du pipeline (Starter)

Phase 1 -> 2 -> 3 -> 6(statique) -> 9

Ignorer l'API (Phase 4), le système de design (Phase 5 optionnelle), SEO uniquement dans la Phase 7.

Erreurs courantes

Erreur	Solution
L'image ne s'affiche pas	Vérifier le chemin (./images/photo.jpg)
Le CSS ne s'applique pas	Vérifier le chemin de la balise link
La navigation entre pages ne fonctionne pas	Vérifier le chemin href (./about.html)
Cassé sur mobile	Vérifier la balise <meta name="viewport">