reorganized levels,

added content updated dependencies
2023-02-14 19:30:53 +01:00 · 2023-02-14 19:30:53 +01:00 · 7f356d807a
parent 6214c827eb
commit 7f356d807a
32 changed files with 11143 additions and 2043 deletions
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -1,3 +0,0 @@
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
--- a/docs/.vitepress/cache/deps/_metadata.json
+++ b/docs/.vitepress/cache/deps/_metadata.json
@ -0,0 +1,13 @@
+{
+  "hash": "47151e52",
+  "browserHash": "b7354247",
+  "optimized": {
+    "vue": {
+      "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "cd8c06e7",
+      "needsInterop": false
+    }
+  },
+  "chunks": {}
+}
--- a/docs/.vitepress/cache/deps/package.json
+++ b/docs/.vitepress/cache/deps/package.json
@ -0,0 +1 @@
+{"type":"module"}
--- a/docs/.vitepress/cache/deps/vue.js
+++ b/docs/.vitepress/cache/deps/vue.js
--- a/docs/.vitepress/cache/deps/vue.js.map
+++ b/docs/.vitepress/cache/deps/vue.js.map
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@ -13,7 +13,7 @@ export default {
 				activeMatch: "/dev/",
 				// items: [
 				// 	{ text: "Sommaire", link: "/dev/" },
-				// 	{ text: "B1", link: "/dev/B1/" },
+				// 	{ text: "introduction", link: "/dev/introduction/" },
 				// 	{ text: "B2", link: "/dev/B2/" },
 				// 	{ text: "B3", link: "/dev/B3/" }
 				// ]
@ -36,9 +36,21 @@ export default {
 				},
 				{
 					text: "Fragments",
-					collapsible: true,
 					collapsed: true,
 					items: [
+						{
+							text: "Base",
+							items: [
+								{
+									text: "Structure du dossier",
+									link: "/dev/fragments/base/01-structure",
+								},
+								{
+									text: "Robots txt",
+									link: "/dev/fragments/base/02-robots",
+								},
+							],
+						},
 						{
 							text: "HTML",
 							link: "/dev/fragments/html/",
@ -60,6 +72,10 @@ export default {
 						{
 							text: "CSS",
 							items: [
+								{
+									text: "Reset CSS",
+									link: "/dev/fragments/css/00-reset",
+								},
 								{
 									text: "Centrer",
 									link: "/dev/fragments/css/01-centrer",
@ -69,36 +85,37 @@ export default {
 					],
 				},
 				{
-					text: "B1",
-					collapsible: true,
+					text: "Débutant",
 					collapsed: true,
 					items: [
-						{ text: "Introduction B1", link: "/dev/B1/" },
-						{ text: "HTML B1", link: "/dev/B1/html" },
+						{ text: "Introduction débutant", link: "/dev/01-debutant/" },
+						{ text: "HTML débutant", link: "/dev/01-debutant/html" },
+						{ text: "CSS débutant", link: "/dev/01-debutant/css" },
 					],
 				},
 				{
-					text: "B2",
-					collapsible: true,
+					text: "Intermédiaire",
 					collapsed: true,
 					items: [
-						{ text: "Introduction B2", link: "/dev/B2/" },
-						{ text: "HTML B2", link: "/dev/B2/html" },
-						{ text: "Git", link: "/dev/B2/git" },
+						{
+							text: "Introduction intermédiaire",
+							link: "/dev/02-intermediaire/",
+						},
+						// { text: "HTML intermédiaire", link: "/dev/02-intermediaire/html" },
+						{ text: "JavaScript", link: "/dev/02-intermediaire/javascript" },
+						{ text: "Git", link: "/dev/02-intermediaire/git" },
 					],
 				},
 				{
-					text: "B3",
-					collapsible: true,
+					text: "Avancé",
 					collapsed: true,
 					items: [
-						{ text: "Introduction B3", link: "/dev/B3/" },
-						{ text: "HTML B3", link: "/dev/B3/html" },
+						{ text: "Introduction avancé", link: "/dev/03-avance/" },
+						// { text: "HTML avancé", link: "/dev/03-avance/html" },
 					],
 				},
 				{
 					text: "Code Camp",
-					collapsible: true,
 					collapsed: true,
 					items: [
 						{ text: "Théorie", link: "/dev/code-camp/" },
--- a/docs/dev/01-debutant/css.md
+++ b/docs/dev/01-debutant/css.md
@ -0,0 +1,93 @@
+# CSS – Débutant
+
+Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple&nbsp;:
+
+- la mise en page
+- les couleurs
+- les tailles
+- les marges
+- les polices de caractères
+- etc.
+
+On parle de **“&nbsp;règle CSS&nbsp;”.** Une règle se construit ainsi&nbsp;:
+
+`sélecteur` `{` `propriété` `:` `valeur` `;` `}`
+
+::: details Afficher l'exemple
+
+<<< @/snippets/css/base.css#rule
+
+- `p` est le sélecteur
+- `color` est la propriété
+- `blue` est la valeur
+- `color: blue;` est la déclaration
+- l'ensemble forme **la règle**
+
+:::
+
+On écrit généralement les règles CSS en dehors du fichier HTML, dans un fichier `style.css`. Afin de relier les styles au HTML, il convient d'appeler le fichier via une balise `<link>`, positionnée dans la balise `<head>` du HTML.
+
+::: details
+
+```html
+<head>
+  …
+  <link rel="stylesheet" href="./css/style.css" />
+</head>
+```
+
+:::
+
+## Sélecteurs CSS
+
+### Sélecteurs de balise
+
+Ils sont identiques aux balises HTML (sauf head).
+
+::: details Afficher le code
+<<< @/snippets/css/base.css#tag
+:::
+
+### Sélecteurs de classe
+
+Cible une classe définie dans le HTML avec un point.
+
+::: details Afficher le code
+<<< @/snippets/css/base.css#class
+:::
+
+### Sélecteurs d’attribut
+
+Cible un attribut spécifique avec ou sans valeur entre crochets.
+
+::: details Afficher le code
+<<< @/snippets/css/base.css#attr
+:::
+
+### Sélecteurs multiples et chaînés
+
+Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.
+
+::: details Afficher le code
+<<< @/snippets/css/base.css#chain
+:::
+
+::: tip Conseil
+Entraînez-vous à utiliser les sélecteurs avec [cet exercice intéractif.](https://flukeout.github.io/)
+:::
+
+## Propriétés CSS
+
+::: info
+Il en existe beaucoup trop pour essayer de les résumer ici.
+Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CSS/Reference)
+:::
+
+## La cascade du style
+
+Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de “&nbsp;conflit&nbsp;” entre plusieurs règles.
+
+Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.**
+
+- [Cette présentation](https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#1) en anglais explique en détails le fonctionnement de la cascade.
+- [Cette page](https://wattenberger.com/blog/css-cascade) (en anglais également) permet de visualiser graphiquement la cascade.
--- a/docs/dev/01-debutant/html.md
+++ b/docs/dev/01-debutant/html.md
@ -1,22 +1,24 @@
-# HTML B1
+# HTML – Débutant

-## HTML
-
-Le HTML (<span lang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :  
+Le HTML (<span lang="en">hyper text markup language</span>) [est un langage de programmation](https://briefs.video/videos/is-html-a-programming-language/) qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe&nbsp;:  
 `<` `nom de la balise` `attributs` `>`  
 `contenu de la balise`  
 `</` `nom de la balise` `>`

 La structure d'un document HTML est donc une suite de balises que l'on organise afin de donner du sens à notre contenu. Il nous revient de construire notre document HTML afin qu'il soit le plus explicite et sémantiquement correcte.

-### Les balises indispensables
+::: tip Astuce
+En HTML, chaque balise est une boîte. Se représenter une boîte par élément est un bon moyen de comprendre la structure du document. Tout est une boîte en HTML.
+:::
+
+## Les balises indispensables

 - `<!DOCTYPE>` = déclaration du type de document
 - `<html>` = racine du document, contient tous les autres éléments
 - `<head>` = fournit des informations générales (métadonnées) sur le document
 - `<body>` = contenu principal du document

-### Les balises et attributs recommandés
+## Les balises et attributs recommandés

 - `lang` = déclaration du langage utilisé pour le contenu
 - `dir` = Sens de lecture du contenu
@ -27,7 +29,7 @@ La structure d'un document HTML est donc une suite de balises que l'on organise
 <<< @/snippets/html/base.html#base
 :::

-### Les balises structurantes
+## Les balises structurantes

 - `<header>` = en-tête
 - `<nav>` = élément contenant des liens, destiné à la navigation
@ -42,13 +44,15 @@ La structure d'un document HTML est donc une suite de balises que l'on organise
 <<< @/snippets/html/base.html#structure
 :::

-### Les balises de contenus
+## Les balises de contenus

 On distingue deux catégories de balises: bloc (<span lang="en">block</span>) et en ligne (<span lang="en">inline</span>). Les balises en ligne ne peuvent pas contenir de balises bloc.

 Ci-dessous, quelques exemples de balises (listes non exhaustives).

-#### Balises bloc
+### Balises bloc
+
+Les balises “&nbsp;en bloc&nbsp;” sont des balises qui occuperont toute la largeur disponible, quelle que soit la largeur de leur contenu.

 - `<blockquote>` = une citation
 - `<p>` = un paragraphe
@ -57,7 +61,13 @@ Ci-dessous, quelques exemples de balises (listes non exhaustives).
 - `<li>` = élément d’une liste
 - `<div>` = conteneur générique

-#### Balises en ligne
+::: info
+[Les balises structurantes](#les-balises-structurantes) sont toutes des balises en bloc.
+:::
+
+### Balises en ligne
+
+Les balises “&nbsp;en ligne&nbsp;” sont des balises qui occuperont uniquement la largeur de leur contenu.

 - `<img>` = insertion d’une image
 - `<a>` = un lien
--- a/docs/dev/01-debutant/index.md
+++ b/docs/dev/01-debutant/index.md
@ -1,4 +1,4 @@
-# Découverte et bases
+# Débutant – Découverte

 Au cours de votre première année de formation en développement web, vous apprendrez à écrire du HTML et du CSS afin de créer des pages web simples.

@ -29,14 +29,16 @@ Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
   1. Propriétés basiques
   2. Gérer les images
   3. Responsive/Mobile first
+   4. media queries
+   5. flex
+   6. grid
 8. Ressources externes
   1. Images
   2. Maquettes
   3. SVG
   4. Webfonts
   5. Optimisations
-9. Développement local
-10. Mise en ligne
+9. Mise en ligne

 ## Concepts et architecture

@ -46,5 +48,5 @@ Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
 - **FTP**/SFTP = transfert de fichiers
 - **HTML** = contenus
 - **CSS** = styles
- **Javascript** = éléments dynamiques
+- **JavaScript** = éléments dynamiques
 - **Fonts** = polices de caractères
--- a/docs/dev/02-intermediaire/git.md
+++ b/docs/dev/02-intermediaire/git.md
@ -1,4 +1,4 @@
-# Versionner avec Git
+# Versionner son code avec Git

 [Git](https://git-scm.com/) est un logiciel de [gestion de version](https://fr.wikipedia.org/wiki/Gestion_de_versions).

--- a/docs/dev/02-intermediaire/html.md
+++ b/docs/dev/02-intermediaire/html.md
@ -0,0 +1 @@
+# HTML – Intermédiaire
--- a/docs/dev/02-intermediaire/index.md
+++ b/docs/dev/02-intermediaire/index.md
@ -1,4 +1,4 @@
-# Approfondissement
+# Intermédiaire - Approfondissement

 Au cours de votre deuxième année de formation en développement web, vous apprendrez à créer des pages complexes et dynamiques.

@ -9,26 +9,22 @@ Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
 :::

 1. Introduction et test du niveau de la classe
-2. HTML avancé
+2. HTML intermédiaire
   1. formulaires
   2. templating
-3. CSS avancé
+3. CSS intermédiaire
   1. Pseudo elements
-   2. Propriétés logiques
-   3. Variables
+   2. flex
+   3. grid
 4. Contenus
   1. CMS
   2. API
-   3. BDD mysql
 5. Bases JS
-   1. Présentation (front/back)
+   1. Introduction
   2. Sélectionner le DOM
   3. Modifier les styles
   4. Ajouter des événements
   5. Ajouter des conditions
+   6. Créer des boucles
 6. Versioning (git)
-7. JS avancé (contenus dynamiques)
-   1. Rest
-   2. Fetch
-   3. Graphql
-8. Webapp (node)
+7. SEO
--- a/docs/dev/02-intermediaire/javascript.md
+++ b/docs/dev/02-intermediaire/javascript.md
@ -0,0 +1,16 @@
+# JavaScript – Intermédiare
+
+Le JavaScript est un langage de programmation dont nous nous servirons pour rendre nos pages HTML/CSS dynamiques.
+
+On l'écrit généralement en dehors du HTML, dans un fichier `main.js`. Afin de relier le JavaScript au HTML, il convient d'appeler le fichier via une balise `<script>`, positionnée avant la balise `<body>` fermante.
+
+::: details
+
+```html{3}
+<body>
+  …
+  <script src="./js/main.js"></script>
+</body>
+```
+
+:::
--- a/docs/dev/03-avance/html.md
+++ b/docs/dev/03-avance/html.md
@ -0,0 +1 @@
+# HTML – Avancé
--- a/docs/dev/03-avance/index.md
+++ b/docs/dev/03-avance/index.md
@ -0,0 +1,22 @@
+# Avancé – Expertise
+
+Au cours de votre deuxième année de formation en développement web, vous apprendrez à créer des pages complexes et dynamiques.
+
+## Programme
+
+:::info Voici à titre indicatif le programme prévisionnel pour la troisième année.
+Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
+:::
+
+1. HTML
+   1. ARIA
+2. CSS
+   1. Propriétés logiques
+   2. Variables
+3. JS avancé (contenus dynamiques)
+   1. API Rest
+   2. Fetch
+   3. Graphql
+   4. Opérations CRUD
+4. Webapp (node)
+5. CI/CD (netlify/vercel)
--- a/docs/dev/B2/html.md
+++ b/docs/dev/B2/html.md
@ -1 +0,0 @@
-# HTML B2
--- a/docs/dev/B2/introduction.md
+++ b/docs/dev/B2/introduction.md
@ -1 +0,0 @@
-# Intro B2
--- a/docs/dev/B3/html.md
+++ b/docs/dev/B3/html.md
@ -1 +0,0 @@
-# HTML B2
--- a/docs/dev/B3/index.md
+++ b/docs/dev/B3/index.md
@ -1 +0,0 @@
-# Frontend B3
--- a/docs/dev/B3/introduction.md
+++ b/docs/dev/B3/introduction.md
@ -1 +0,0 @@
-# Intro B3
--- a/docs/dev/code-camp/index.md
+++ b/docs/dev/code-camp/index.md
@ -12,7 +12,7 @@ Vous êtes sur le point de commencer une semaine intensive de développement web
 - **FTP**/SFTP = transfert de fichiers
 - **HTML** = contenus
 - **CSS** = styles
- **Javascript** = éléments dynamiques
+- **JavaScript** = éléments dynamiques
 - **Fonts** = polices de caractères

 ## Configuration et préparation
@ -41,25 +41,27 @@ code-camp/
 │       └── icon-guitar.svg
 └── 03_web/
    ├── assets/
-    │   ├── css/
-    │   │   └── style.css
    │   ├── fonts/
    │   │   └── arial.woff2
    │   ├── images/
    │   │   └── hero.jpg
-    │   ├── js/
-    │   │   └── main.js
    │   └── svg/
    │       └── icon-guitar.svg
+    ├── css/
+    │   ├── reset.css
+    │   └── style.css
+    ├── js/
+    │   └── main.js
    ├── favicon.ico
-    └── index.html
+    ├── index.html
+    └── robots.txt
 ```

 :::

 ## HTML

-Le HTML (<span lang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :  
+Le HTML (<span lang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe&nbsp;:  
 `<` `nom de la balise` `attributs` `>`  
 `contenu de la balise`  
 `</` `nom de la balise` `>`
@ -128,7 +130,7 @@ Ci-dessous, quelques exemples de balises (listes non exhaustives).

 ## CSS

-Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple :
+Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple&nbsp;:

 - la mise en page
 - les couleurs
@ -137,7 +139,7 @@ Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur
 - les polices de caractères
 - etc.

-On parle de « règle CSS ». Une règle se construit ainsi :
+On parle de “&nbsp;règle CSS&nbsp;”. Une règle se construit ainsi&nbsp;:

 `sélecteur` `{` `propriété` `:` `valeur` `;` `}`

@ -200,7 +202,7 @@ Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CS

 ### La cascade du style

-Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de « conflit » entre plusieurs règles.
+Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de “&nbsp;conflit&nbsp;” entre plusieurs règles.

 Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.**

@ -209,7 +211,7 @@ Les deux éléments de la cascade que nous utiliseront le plus ici sont **la sp

 ## Accessibilité

-D'après [Access42 :](https://access42.net/)
+D'après [Access42&nbsp;:](https://access42.net/)

 > L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.

--- a/docs/dev/code-camp/sujets.md
+++ b/docs/dev/code-camp/sujets.md
@ -8,7 +8,7 @@ En suivant les maquettes fournies ou en imaginant votre propre design, **réalis

 Le site devra être développé en <span lang="en">mobile first</span> et être <span lang="en">responsive</span>.

-Il devra obligatoirement contenir ces éléments :
+Il devra obligatoirement contenir ces éléments&nbsp;:

 - une photo de l'artiste
 - un clip vidéo
--- a/docs/dev/fragments/base/01-structure.md
+++ b/docs/dev/fragments/base/01-structure.md
@ -0,0 +1,49 @@
+# Structure basique d'un dossier web
+
+Lorsque vous commencez un nouveau projet, aidez-vous de cette structure pour créer les fichiers, dossiers et liens nécessaires.
+
+## Structure complète
+
+::: details Afficher la structure
+
+```
+code-camp/
+├── 00_sources/
+│   ├── fonts/
+│   │   └── arial.ttf
+│   └── images/
+│       └── unsplash-concert_crowd.png
+├── 01_templates/
+│   ├── index.fig
+│   ├── index.sketch
+│   └── index.xd
+├── 02_export/
+│   ├── images/
+│   │   └── hero.jpg
+│   └── icons/
+│       └── icon-guitar.svg
+└── 03_web/ // [!code focus]
+    ├── assets/ // [!code focus]
+    │   ├── fonts/ // [!code focus]
+    │   │   └── arial.woff2 // [!code focus]
+    │   ├── images/ // [!code focus]
+    │   │   └── hero.jpg // [!code focus]
+    │   └── svg/ // [!code focus]
+    │       └── icon-guitar.svg // [!code focus]
+    ├── css/ // [!code focus]
+    │   ├── reset.css // [!code focus]
+    │   └── style.css // [!code focus]
+    ├── js/ // [!code focus]
+    │   └── main.js // [!code focus]
+    ├── favicon.ico // [!code focus]
+    ├── index.html // [!code focus]
+    └── robots.txt // [!code focus]
+```
+
+:::
+
+## Base HTML
+
+Exemple d'un fichier HTML contenant les liens vers les fichiers CSS, JS ainsi qu'une image.
+
+<<< @/snippets/html/structure.html{8,9,16,20}
--- a/docs/dev/fragments/base/02-robots.md
+++ b/docs/dev/fragments/base/02-robots.md
@ -0,0 +1,15 @@
+# robots.txt
+
+Le fichier `robots.txt` est un fichier placé à la racine du dossier web. Il permet de donner des instructions aux moteurs de recherche qui visitent un site.
+
+Dans sa configuration la plus simple, il permet d'autoriser ou d'interdire l'indexation d'un site par les moteurs de recherche.
+
+[Documentation plus complète.](http://robots-txt.com/)
+
+## Autoriser
+
+<<< @/snippets/robots.txt#allow
+
+## Interdire
+
+<<< @/snippets/robots.txt#disallow
--- a/docs/dev/fragments/css/00-reset.md
+++ b/docs/dev/fragments/css/00-reset.md
@ -0,0 +1,14 @@
+# reset.css
+
+::: info
+Le “&nbsp;reset CSS&nbsp;” est une méthode commune de remise à zéro des styles par défaut des différents navigateurs web. Ceci permet de partir d'une base “&nbsp;saine&nbsp;” en terme de styles.
+:::
+
+Voici ma version personnelle de ce fichier. Il existe autant de versions que de développeuses et développeurs, chacun adaptant son `reset.css` à ses préférences et/ou habitudes de développement.
+
+- [le reset de Josh Comeau](https://www.joshwcomeau.com/css/custom-css-reset/)
+- [le reset d'Andy Bell](https://andy-bell.co.uk/a-modern-css-reset/)
+
+J'ai légèrement adaptée le mien depuis la version de [Elly Loel.](https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522)
+
+<<< @/snippets/css/reset.css
--- a/docs/dev/index.md
+++ b/docs/dev/index.md
@ -4,7 +4,7 @@ Bienvenue dans le monde merveilleux du développement web.

 En commençant par les bases HTML/CSS, nous approfondirons nos connaissances de ces deux langages avant de poursuivre vers le JavaScript.

-Nous aborderons l'apprentissage du développement web par le prisme de [l’accessibilité numérique](https://access42.net/decouvrir-accessibilite?lang=fr) et de « [l’amélioration progressive](https://briefs.video/videos/is-progressive-enhancement-dead-yet/) »
+Nous aborderons l'apprentissage du développement web par le prisme de [l’accessibilité numérique](https://access42.net/decouvrir-accessibilite?lang=fr) et de “&nbsp;[l’amélioration progressive](https://briefs.video/videos/is-progressive-enhancement-dead-yet/)&nbsp;”

 ## Ressources

--- a/docs/snippets/css/reset.css
+++ b/docs/snippets/css/reset.css
@ -0,0 +1,98 @@
+/* RESET */
+* {
+	/* Remove default margin on everything */
+	margin: 0;
+	/* Remove default padding on everything */
+	padding: 0;
+	/* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
+	line-height: calc(0.25rem + 1em + 0.25rem);
+}
+/* Use a more-intuitive box-sizing model on everything */
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
+*:where(:not(fieldset, progress, meter)) {
+	border-width: 0;
+	border-style: solid;
+	background-origin: border-box;
+	background-repeat: no-repeat;
+}
+html {
+	/* Allow percentage-based heights in the application */
+	block-size: 100%;
+	/* Making sure text size is only controlled by font-size */
+	-webkit-text-size-adjust: none;
+	/* Improve text rendering */
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizeLegibility;
+}
+/* Smooth scrolling for users that don't prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+	html:focus-within {
+			scroll-behavior: smooth;
+	}
+}
+body {
+	overflow-x: hidden;
+	font-family: Arial, sans-serif;
+	font-weight: normal;
+	/* Allow percentage-based heights in the application */
+	min-block-size: 100%;
+	/* https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/ */
+	-webkit-marquee-increment: 0vw;
+}
+/* Improve media defaults */
+:where(img, svg, video, canvas, audio, iframe, embed, object) {
+	display: block;
+}
+:where(img, svg, video) {
+	block-size: auto;
+	max-inline-size: 100%;
+}
+/* Smaller line height for titles */
+:where(h1, h2, h3) {
+	line-height: 1.1;
+}
+/* Avoid text overflows */
+:where(p, h1, h2, h3, h4, h5, h6) {
+	overflow-wrap: break-word;
+}
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+:where(ul, ol)[role='list'] {
+	list-style: none;
+}
+/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
+a:not([class]) {
+	text-decoration-skip-ink: auto;
+}
+/* Make it clear that interactive elements are interactive */
+:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*='-'])) {
+	cursor: pointer;
+	touch-action: manipulation;
+}
+:where(input[type='file']) {
+	cursor: auto;
+}
+:where(input[type='file'])::-webkit-file-upload-button,
+:where(input[type='file'])::file-selector-button {
+	cursor: pointer;
+}
+
+/* Make sure users can't select button text */
+:where(button, button[type], input[type='button'], input[type='submit'], input[type='reset']),
+:where(input[type='file'])::-webkit-file-upload-button,
+:where(input[type='file'])::file-selector-button {
+	-webkit-tap-highlight-color: transparent;
+	-webkit-touch-callout: none;
+	user-select: none;
+	text-align: center;
+}
+/* Disabled cursor for disabled buttons */
+:where(button, button[type], input[type='button'], input[type='submit'], input[type='reset'])[disabled] {
+	cursor: not-allowed;
+}
+/* END RESET */
--- a/docs/snippets/html/structure.html
+++ b/docs/snippets/html/structure.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link rel="stylesheet" href="./css/reset.css" />
+	<link rel="stylesheet" href="./css/style.css" />
+	<title>Base</title>
+</head>
+
+<body>
+	<header></header>
+	<main>
+		<img src="./assets/images/hero.jpg" alt="">
+	</main>
+	<footer></footer>
+
+	<script src="/js/main.js"></script>
+</body>
+
+</html>
--- a/docs/snippets/robots.txt
+++ b/docs/snippets/robots.txt
@ -0,0 +1,9 @@
+// #region allow
+User-agent: *
+Allow: /
+// #endregion allow
+
+// #region disallow
+User-agent: *
+Disallow: /
+// #endregion disallow
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -7,7 +7,7 @@
 		"serve": "vitepress serve docs"
 	},
 	"devDependencies": {
-		"vitepress": "1.0.0-alpha.29",
-		"vue": "^3.2.40"
+		"vitepress": "1.0.0-alpha.46",
+		"vue": "^3.2.47"
 	}
 }
--- a/yarn.lock
+++ b/yarn.lock