3W/cours
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: 3W:main
Branches Tags
3W:main
3W:page/directus
..
compare: 3W:page/directus
Branches Tags
3W:main
3W:page/directus

1 Commits
main ... page/direc

Author SHA1 Message Date
Nico
34f9904986 started directus doc 2022-10-03 20:46:29 +02:00
73 changed files with 2005 additions and 12646 deletions
Show Stats Expand all files Collapse all files

0
.gitignore vendored Executable file → Normal file
View File

3
.yarnrc.yml Normal file
View File

@ -0,0 +1,3 @@
plugins:
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
spec: "@yarnpkg/plugin-interactive-tools"

0
README.md Executable file → Normal file
View File

BIN
bun.lockb
View File

Binary file not shown.

19
docs/.vitepress/cache/deps/_metadata.json vendored
View File

@ -1,19 +0,0 @@
{
"hash": "61014706",
"browserHash": "2f8b4d93",
"optimized": {
"vue": {
"src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js",
"fileHash": "e47bde2a",
"needsInterop": false
},
"vitepress > @vue/devtools-api": {
"src": "../../../../node_modules/@vue/devtools-api/lib/esm/index.js",
"file": "vitepress___@vue_devtools-api.js",
"fileHash": "7672acce",
"needsInterop": false
}
},
"chunks": {}
}

3
docs/.vitepress/cache/deps/package.json vendored
View File

@ -1,3 +0,0 @@
{
"type": "module"
}

162
docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js vendored
View File

@ -1,162 +0,0 @@
// node_modules/@vue/devtools-api/lib/esm/env.js
function getDevtoolsGlobalHook() {
return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
}
function getTarget() {
return typeof navigator !== "undefined" && typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
}
var isProxyAvailable = typeof Proxy === "function";
// node_modules/@vue/devtools-api/lib/esm/const.js
var HOOK_SETUP = "devtools-plugin:setup";
var HOOK_PLUGIN_SETTINGS_SET = "plugin:settings:set";
// node_modules/@vue/devtools-api/lib/esm/time.js
var supported;
var perf;
function isPerformanceSupported() {
var _a;
if (supported !== void 0) {
return supported;
}
if (typeof window !== "undefined" && window.performance) {
supported = true;
perf = window.performance;
} else if (typeof global !== "undefined" && ((_a = global.perf_hooks) === null || _a === void 0 ? void 0 : _a.performance)) {
supported = true;
perf = global.perf_hooks.performance;
} else {
supported = false;
}
return supported;
}
function now() {
return isPerformanceSupported() ? perf.now() : Date.now();
}
// node_modules/@vue/devtools-api/lib/esm/proxy.js
var ApiProxy = class {
constructor(plugin, hook) {
this.target = null;
this.targetQueue = [];
this.onQueue = [];
this.plugin = plugin;
this.hook = hook;
const defaultSettings = {};
if (plugin.settings) {
for (const id in plugin.settings) {
const item = plugin.settings[id];
defaultSettings[id] = item.defaultValue;
}
}
const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
let currentSettings = Object.assign({}, defaultSettings);
try {
const raw = localStorage.getItem(localSettingsSaveId);
const data = JSON.parse(raw);
Object.assign(currentSettings, data);
} catch (e) {
}
this.fallbacks = {
getSettings() {
return currentSettings;
},
setSettings(value) {
try {
localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
} catch (e) {
}
currentSettings = value;
},
now() {
return now();
}
};
if (hook) {
hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
if (pluginId === this.plugin.id) {
this.fallbacks.setSettings(value);
}
});
}
this.proxiedOn = new Proxy({}, {
get: (_target, prop) => {
if (this.target) {
return this.target.on[prop];
} else {
return (...args) => {
this.onQueue.push({
method: prop,
args
});
};
}
}
});
this.proxiedTarget = new Proxy({}, {
get: (_target, prop) => {
if (this.target) {
return this.target[prop];
} else if (prop === "on") {
return this.proxiedOn;
} else if (Object.keys(this.fallbacks).includes(prop)) {
return (...args) => {
this.targetQueue.push({
method: prop,
args,
resolve: () => {
}
});
return this.fallbacks[prop](...args);
};
} else {
return (...args) => {
return new Promise((resolve) => {
this.targetQueue.push({
method: prop,
args,
resolve
});
});
};
}
}
});
}
async setRealTarget(target) {
this.target = target;
for (const item of this.onQueue) {
this.target.on[item.method](...item.args);
}
for (const item of this.targetQueue) {
item.resolve(await this.target[item.method](...item.args));
}
}
};
// node_modules/@vue/devtools-api/lib/esm/index.js
function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
const descriptor = pluginDescriptor;
const target = getTarget();
const hook = getDevtoolsGlobalHook();
const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy;
if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
} else {
const proxy = enableProxy ? new ApiProxy(descriptor, hook) : null;
const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
list.push({
pluginDescriptor: descriptor,
setupFn,
proxy
});
if (proxy)
setupFn(proxy.proxiedTarget);
}
}
export {
isPerformanceSupported,
now,
setupDevtoolsPlugin
};
//# sourceMappingURL=vitepress___@vue_devtools-api.js.map

7
docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map vendored
View File

File diff suppressed because one or more lines are too long

10899
docs/.vitepress/cache/deps/vue.js vendored
View File

File diff suppressed because it is too large Load Diff

7
docs/.vitepress/cache/deps/vue.js.map vendored
View File

File diff suppressed because one or more lines are too long

128
docs/.vitepress/config.js Executable file → Normal file
View File

@ -10,16 +10,16 @@ export default {
{
text: "Dev",
link: "/dev/",
activeMatch: "/dev/",
activeMatch: "/dev/"
// items: [
// { text: "Sommaire", link: "/dev/" },
// { text: "introduction", link: "/dev/introduction/" },
// { text: "B1", link: "/dev/B1/" },
// { text: "B2", link: "/dev/B2/" },
// { text: "B3", link: "/dev/B3/" }
// ]
},
{ text: "Design", link: "/design/", activeMatch: "/design/" },
{ text: "À propos", link: "/a-propos", activeMatch: "/a-propos" },
{ text: "À propos", link: "/a-propos", activeMatch: "/a-propos" }
],
sidebar: {
// This sidebar gets displayed when user is
@ -31,111 +31,55 @@ export default {
{ text: "Sommaire", link: "/dev/" }, // /dev/index.md
{ text: "Documentations", link: "/dev/docs" },
{ text: "Outils", link: "/dev/outils" },
{ text: "Les pros", link: "/dev/goat" },
],
{ text: "Les pros", link: "/dev/goat" }
]
},
{
text: "Fragments",
text: "B1",
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/",
items: [
{
text: "Titres",
link: "/dev/fragments/html/01-titres",
},
{
text: "Paragraphe",
link: "/dev/fragments/html/02-paragraphe",
},
{
text: "Image",
link: "/dev/fragments/html/04-image",
},
],
},
{
text: "CSS",
items: [
{
text: "Reset CSS",
link: "/dev/fragments/css/00-reset",
},
{
text: "Centrer",
link: "/dev/fragments/css/01-centrer",
},
],
},
],
{ text: "Introduction B1", link: "/dev/B1/" },
{ text: "HTML B1", link: "/dev/B1/html" }
]
},
{
text: "Débutant",
text: "B2",
collapsible: true,
collapsed: true,
items: [
{ 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: "Typographie", link: "/dev/01-debutant/typographie" },
],
{ text: "Introduction B2", link: "/dev/B2/" },
{ text: "HTML B2", link: "/dev/B2/html" }
]
},
{
text: "Intermédiaire",
text: "B3",
collapsible: true,
collapsed: true,
items: [
{
text: "Introduction intermédiaire",
link: "/dev/02-intermediaire/",
},
// { text: "HTML intermédiaire", link: "/dev/02-intermediaire/html" },
{ text: "CSS", link: "/dev/02-intermediaire/css" },
{ text: "JavaScript", link: "/dev/02-intermediaire/javascript" },
{ text: "Git", link: "/dev/02-intermediaire/git" },
{ text: "Node.js", link: "/dev/02-intermediaire/nodejs" },
{ text: "Markdown", link: "/dev/02-intermediaire/markdown" },
],
},
{
text: "Avancé",
collapsed: true,
items: [
{ text: "Introduction avancé", link: "/dev/03-avance/" },
// { text: "HTML avancé", link: "/dev/03-avance/html" },
],
{ text: "Introduction B3", link: "/dev/B3/" },
{ text: "HTML B3", link: "/dev/B3/html" }
]
},
{
text: "Code Camp",
collapsible: true,
collapsed: true,
items: [
{ text: "Théorie", link: "/dev/code-camp/" },
{ text: "Sujets", link: "/dev/code-camp/sujets" },
],
},
{ text: "Sujets", link: "/dev/code-camp/sujets" }
]
}
],
"/design/": [
{
text: "Design",
items: [
{ text: "Introduction", link: "/design/" },
{ text: "Emails", link: "/design/emails/" },
],
},
],
{ text: "Index", link: "/design/" },
{ text: "Introduction", link: "/design/introduction" }
]
}
]
},
outlineTitle: "Sur cette page",
@ -143,24 +87,24 @@ export default {
footer: {
message: "Ces contenus sont publiés sous licence Creative Commons",
copyright: "CC BY-SA 4.0",
copyright: "CC BY-SA 4.0"
},
docFooter: {
prev: "Précédent",
next: "Suivant",
},
next: "Suivant"
}
},
editLink: {
pattern: "https://gitlab.com/3_w/docs/-/edit/main/docs/:path",
text: "Proposer des changements sur Gitlab",
text: "Proposer des changements sur Gitlab"
},
markdown: {
theme: "one-dark-pro",
externalLinks: {
target: "_self",
},
},
target: "_self"
}
}
};

13
docs/.vitepress/theme/components/CustomBlockquote.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<blockquote>
<slot>YELLO</slot>
</blockquote>
</template>
<script>
export default {
name: "CustomBlockquote"
};
</script>
<style scoped></style>

46
docs/.vitepress/theme/custom.css Executable file → Normal file
View File

@ -1,57 +1,13 @@
:root {
/* custom colors */
--color-primary-light: hsl(11, 100%, 31%);
--color-primary-dark: hsl(11, 100%, 75%);
/* custom theme */
--vp-c-brand-1: var(--color-primary-light);
--vp-c-brand-2: var(--color-primary-light);
--vp-button-brand-bg: var(--color-primary-light);
--vp-button-brand-text: var(--vp-c-bg);
--vp-button-brand-hover-text: var(--color-primary-light);
--vp-button-brand-active-text: var(--color-primary-light);
--vp-button-brand-border: var(--color-primary-light);
--vp-button-brand-hover-bg: var(--vp-c-bg);
--vp-button-brand-active-bg: var(--vp-c-bg);
--vp-button-brand-hover-border: var(--color-primary-light);
--vp-button-brand-active-border: var(--color-primary-light);
/* --vp-custom-block-tip-bg: var(--vp-c-bg);
--vp-custom-block-danger-bg: var(--vp-c-bg);
--vp-custom-block-info-bg: var(--vp-c-bg);
--vp-custom-block-warning-bg: var(--vp-c-bg);
--vp-custom-block-tip-text: hsl(161, 96%, 20%);
--vp-custom-block-warning-text: hsl(26, 95%, 29%);
--vp-custom-block-danger-text: hsl(350, 75%, 38%); */
--vp-code-font-size: 0.9375rem;
}
.dark {
--vp-c-brand-1: var(--color-primary-dark);
--vp-c-brand-2: var(--color-primary-dark);
--vp-button-brand-bg: var(--color-primary-dark);
--vp-button-brand-hover-text: var(--vp-c-dark);
--vp-button-brand-active-text: var(--vp-c-dark);
--vp-button-brand-border: var(--color-primary-dark);
--vp-button-brand-hover-border: var(--color-primary-dark);
--vp-button-brand-active-border: var(--color-primary-dark);
/* --vp-custom-block-tip-bg: var(--vp-c-bg);
--vp-custom-block-danger-bg: var(--vp-c-bg);
--vp-custom-block-info-bg: var(--vp-c-bg);
--vp-custom-block-warning-bg: var(--vp-c-bg);
--vp-custom-block-tip-text: hsl(161, 78%, 43%);
--vp-custom-block-warning-text: hsl(32, 95%, 44%);
--vp-custom-block-danger-text: hsl(0, 100%, 76%); */
}
:where(details summary) {
cursor: pointer;
}
a:hover {
text-decoration: none;
text-decoration: underline;
}
.prev-next a:hover {

15
docs/.vitepress/theme/index.js Executable file → Normal file
View File

@ -1,6 +1,21 @@
import DefaultTheme from "vitepress/theme";
import PageLayout from "./layouts/PageLayout.vue";
import "./custom.css";
const modules = import.meta.globEager("./components/**/*.vue");
const components = [];
for (const path in modules) {
components.push(modules[path].default);
}
export default {
...DefaultTheme,
// Layout: PageLayout,
enhanceApp({ app }) {
// import all components globally
components.forEach(comp => {
app.component(comp.name, comp);
});
}
};

0
docs/.vitepress/theme/layouts/PageLayout.vue Executable file → Normal file
View File

0
docs/a-propos.md Executable file → Normal file
View File

BIN
docs/design/emails/assets/2col.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/design/emails/assets/desktop.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/design/emails/assets/mobile.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/design/emails/assets/shadow-mobile.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

93
docs/design/emails/index.md
View File

@ -1,93 +0,0 @@
# Designer des <span lang="en">emails</span> modernes
## Contexte
Gardez à l'esprit que chaque <span lang="en">template</span> (photoshop, sketch, figma…) sera converti en code à un moment donné.
Ce guide vise à partager des bonnes pratiques lors de la conception graphique d'e-mails ainsi qu'à préserver la santé mentale des développeurs.
::: tip
J'ai utilisé Photoshop et Sketch pour concevoir des <span lang="en">emails</span>. N'importe quel logiciel de prototypage suffit.
J'utilise également le [langage MJML](https://mjml.io) pour développer des <span lang="en">newsletter</span> car personne ne devrait encore avoir à le faire à la main… plus jamais.
:::
## Connaissances générales
Les <span lang="en">emails</span> sont l'un des types de contenu internet les moins "&nbsp;avancés&nbsp;". Ils sont encore développés avec des éléments de type `table` et **l'énorme diversité** des clients de messagerie rend presque impossible une compatibilité à 100&nbsp;%.
::: info
Je cherche à obtenir la plus grande compatibilité possible avec les clients de messagerie, donc je n'utiliserai pas de propriété comme les `media-queries` car ils ne sont pas supportés par tous les clients.
:::
### Le <span lang="en">responsive</span>
Les <span lang="en">emails</span> peuvent être <span lang="en">responsive</span>, mais nous n'avons que très peu de contrôle sur cet aspect.
Comme les <span lang="en">emails</span> font généralement jusqu'à 800px de large, il n'y a que deux versions&nbsp;: une version ordinateur et une version mobile.
Ainsi, ce que vous voyez sur une version sera identique sur l'autre.
Par exemple, si vous alignez une image à droite sur la version ordinateur en raison d'une disposition en deux colonnes, l'image restera alignée à droite sur la version mobile en une colonne.
**Ce qui peut être bizarre&nbsp;:**
![email ordinateur à 2 colonnes, l'image alignée à droite, le texte aligné à gauche](./assets/desktop.jpg)
![email mobile à 1 colonne, l'image reste alignée à droite et n'est donc pas centrée](./assets/mobile.jpg)
::: tip
Lorsque nous concevons un produit web, nous avons l'habitude de penser d'abord au mobile (ou alors vous devriez). Le <span lang="en">mail</span>, pour une fois, suit la tendance&nbsp;!
:::
### Colonnes
Idéalement, une mise en page en une seule colonne serait la meilleure chose à faire. Mais nous savons que les gens (clients et concepteurs) ont peur des choses simples. Donc j'accepte une mise en page en deux colonnes.
![](./assets/2col.jpg)
### Images
Les images sont beaucoup utilisées dans les <span lang="en">mail</span>. Parfois trop. Afin d'être le plus lisible et accessible possible, évitez de mettre du texte sur une image. Si vous devez le faire, ne mettez pas une information clé sur une image. Si le client bloque les images (par défaut sur de nombreux clients), votre <span lang="en">email</span> ne contiendra pas les informations nécessaires pour être pertinent.
Si vous souhaitez utiliser une ombre portée, veillez à la concevoir **à l'intérieur** de vos marges.
![](./assets/shadow-mobile.jpg)
### Textes
Utilisez le plus de vrai texte dans vos <span lang="en">emails</span>. Le texte sous forme d'image ne fonctionnera pas bien.
Utilisez également les polices de caractères du système, telles que Arial, Trebuchet, Verdana, Times… La plupart des clients de messagerie ne peuvent pas afficher les polices personnalisées et vous ne pouvez donc pas prévoir quelle police par défaut sera utilisée.
::: danger ATTENTION
**NE FAITES PAS** de retours à la ligne forcés.
:::
Vous pouvez créer un nouveau paragraphe, sans problème, mais vous ne pouvez pas rendre le texte joli.
De plus, les sauts de ligne forcés produisent un glyphe bizarre sur certains clients.
### Coins arrondis
À éviter. On peut les faire fonctionner, bien sûr. Mais est-ce vraiment nécessaire&nbsp;?
::: details Réponse&nbsp;:
Non.
:::
Certains clients supportent les coins arrondis, d'autres ne les montrent pas, d'autres, encore, les cassent un peu.
La seule façon sûre de le faire est d'exporter chaque coin arrondi en tant qu'image et de les placer manuellement autour d'un bloc de couleur. Comme je l'ai dit&nbsp;: évitez.
::: info
Si vous n'êtes pas sûr de la compatibilité d'une fonctionnalité, vous pouvez consulter son adoption sur [<span lang="en">can I email.</span>](https://www.caniemail.com/).
:::
## Mes recommandations
::: tip
Je recommande une largeur d'<span lang="en">email</span> de 600 pixels avec des marges à gauche et à droite de 30 à 50 pixels.
:::
C'est arbitraire mais 600 pixels permet un peu plus de compatibilité avec les petits écrans. Il y a moins de chance que la mise en page se casse à cause d'un écran 10 pixels trop petit.
Si vous devez exporter des images pour votre développeur chéri, exportez autant de `.jpg` que possible avec une qualité maximale de 79&nbsp;%. Des images de plus petite taille accéléreront le temps de chargement.
> Allez bon courage maintenant&nbsp;!

12
docs/design/index.md Executable file → Normal file
View File

@ -1,3 +1,13 @@
# Design
Supports et ressources concernant le design web.
cool
::: info
This is an info box.
:::
## Introduction
### definition
## Getting started

93
docs/dev/01-debutant/css.md
View File

@ -1,93 +0,0 @@
# 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.

76
docs/dev/01-debutant/typographie.md
View File

@ -1,76 +0,0 @@
# Utiliser des typographies sur le web
Lorsque l'on publie du contenu sur le web, nous avons la possibilité de personnaliser les polices de caractères utilisées.
## Les polices système
Il existe une famille informelle de polices appellées "polices systèmes". Ce sont les polices qui ont le plus de chance d'être installées sur la quasi-totalité des ordinateurs, quelque soit le système d'exploitation utilisé. On y trouve notamment&nbsp;:
- Arial
- Times New Roman
- Trebuchet
- Verdana
- Georgia
- Courier
## Modifier la police
En CSS, la propriété permettant de changer la police de caractères est `font-family`
```css
body {
font-family: Arial;
}
```
Afin de s'assurer un certain contrôle sur la police affichée dans le cas où l'utilisateur n'aurait pas celle que nous voulons utiliser, il convient de lister des polices alternatives. On termine généralement en utilisant un mot-clé générique définissant la famille de police souhaitée.
```css
body {
font-family: Helvetica, Arial, sans-serif;
}
```
## Les polices personnalisées
L'intérêt des polices web vient surtout de la possibilité d'utiliser sa (ou ses) propre police.
### Choisir une police
La première étape est de choisir une police adaptée au projet. Il existe de nombreux sites proposant des polices gratuites à télécharger. Je vous recommande [Font Squirrel](https://www.fontsquirrel.com/) ou [Google fonts](https://fonts.google.com/).
### Préparer la police
Un fichier de police sera généralement au format `.otf` ou `.ttf`. Ces formats, bien que compatibles, ne sont pas adaptés pour une utilisation web. Il convient de les convertir au format `.woff2`. Vous pouvez le faire grâce à des outils en ligne tels que [Transfonter.](https://transfonter.org/)
Il est aussi possible de supprimer les caractères inutilisés dans le fichier de police (comme les alphabets non latin) afin de réduire le poids du fichier.
### Importer la police
Avant de pouvoir utiliser notre police personnalisée, nous devons la rendre disponible sur notre site web. Cela se passe dans le fichier CSS, grâce à la déclaration `@font-face`.
```css
@font-face {
font-family: "Luciole"; // on définit le nom de la police
src: url("../fonts/webfonts/Luciole-Regular.woff2") format("woff2"); // chemin vers le fichier .woff2
font-weight: normal; // graisse de la police
font-style: normal; // style de la police
font-display: swap; // stratégie de chargement de la police
}
```
### Utiliser la police
Il ne reste plus qu'à indiquer aux éléments concernés qu'ils doivent utiliser notre police personnalisée&nbsp;!
:::warning Attention
N'oubliez pas les polices de secours 😉
:::
```css
h1,
h2,
h3 {
font-family: "Luciole", Arial, sans-serif;
}
```

114
docs/dev/02-intermediaire/css.md
View File

@ -1,114 +0,0 @@
# CSS Intermédiaire
Dans cette partie plus poussée, nous verrons des techniques de mise en page avancée comme les grilles CSS ainsi que des fonctionnalités CSS dynamiques telles que les variables.
## Les variables CSS
Depuis quelques années, le langage CSS permet de définir et d'utiliser des variables. Une variable est un élément qui stocke une valeur.
L'intérêt des variables réside principalement, mais pas uniquement, dans le fait de pouvoir utiliser une même valeur dynamique à plusieurs endroits. Ainsi, si la variable doit être modifiée, elle modifiera toutes ses instances en une seule fois.
Par exemple, si la couleur principale d'une marque change, il suffira de mettre la variable à jour et pas de chercher et modifier chaque occurrence de la couleur en question dans le code.
Une variable peut stocker n'importe quelle valeur. Qu'il s'agisse d'une couleur, d'une suite de chiffre ou encore d'une fonction entière.
### Syntaxe
Pour définir une variable en CSS, il convient de respecter la nomenclature suivante&nbsp;:
`--` `NOM-DE-VARIABLE` `:` `VALEUR`
Les variables globales sont généralement définies dans un sélecteur `:root`
Par exemple&nbsp;:
```css
:root {
--text-color: #222222;
--bg-color: white;
}
```
### Utilisation
Une fois définies, les variables sont disponibles mais n'auront pas d'effet tant qu'elles ne seront pas appliquées à un propriété CSS. Pour utiliser une variable, il faut utiliser la fonction CSS `var()`
```css
body {
color: var(--text-color); // #222222
background-color: var(--bg-color); // white
}
```
Afin d'éviter d'utiliser une variable qui n'existe pas ou qui pourrait être supprimée, on peut définir une deuxième valeur dans la fonction `var()` qui servira de valeur de secours.
```css
body {
color: var(--text-color, black); // #222222
background-color: var(--brand-color, #f0f0f0); // #f0f0f0
}
```
## CSS Grid
La propriété `display: grid` permet de créer des grilles de mise en page, c'est-à-dire des colonnes, des lignes et des cellules dans lesquelles placer le contenu HTML.
Je vous recommande la lecture détaillée et l'utilisation des exemples dynamiques de [cet article sur les grilles CSS.](https://www.joshwcomeau.com/css/interactive-guide-to-grid/)
### Utilisation
La grille se déclare sur un élément (parent) contenant d'autres éléments (enfants). Toute la structure de la grille sera également déclarée sur la parent.
```css
.parent {
// On initialise la grille
display: grid;
// On créé des colonnes
grid-template-columns: 1fr 3fr; // 2 colonnes
// On créé des lignes
grid-template-rows: 100px 1fr 50px; // 3 lignes
}
```
L'unité `fr` utilisée ici permet de dire aux colonnes et lignes de répartir l'espace disponible selon des **fr**actions. Ainsi, la deuxième colonne bénificiera des 3 quart de l'espace disponible alors que la première n'en aura qu'un quart.
### La répétition de colonnes
Si nos colonnes doivent partager l'espace de manière égale, il est possible d'utiliser la fonction `repeat()` afin d'optimiser la déclaration.
```css
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr); // 3 colonnes de 1fr chacune
}
```
### La répétition <span lang="en">responsive</span>
Bien que pratique, cette déclaration n'est pas <span lang="en">responsive</span>. On peut la modifier dans une règle `@media` en fonction de la taille de la fenêtre. On peut également définir une grille fluide qui s'adaptera d'elle-même à l'espace disponible dans le navigateur.
```css
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
```
- `auto-fit` permet de dire aux cellules de grandir afin de remplir l'espace disponible dans la ligne
- `minmax()` est une fonction qui permet de définir une valeur minimum et une valeur maximum
- `300px` est la largeur minimum d'une cellule
- `1fr` est la largeur maximum
Ainsi, la grille va calculer dynamiquement combien d'enfants peuvent rentrer côte-à-côte dans l'espace disponible en se basant sur les valeurs min et max. Lorsqu'un enfant n'a plus la place, il passe à la ligne.
#### Optimisation finale
Pour éviter de causer un débordement horizontal à cause de la valeur min sur les petits écrans, on préfèrera utiliser un garde-fou qui garantira que les enfants resteront contenus dans la page.
```css
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
```
- `min()` est une fonction qui permet de choisir la plus petite valeur entre deux
- `300px` est la largeur minimum idéale d'une cellule
- `100%` est la largeur minimum permise pour éviter un débordement horizontal

104
docs/dev/02-intermediaire/git.md
View File

@ -1,104 +0,0 @@
# 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).
## Interfaces et serveurs
Git permet de stocker et sauvegarder des documents ainsi que leurs versions précédentes sur un serveur prévu à cet effet. Les plus connus sont&nbsp;:
- [Github](https://github.com/)
- [Gitlab](https://about.gitlab.com/)
- [Bitbucket](https://bitbucket.org/)
- [Gitea](https://gitea.io/)
Certains de ces services proposent des fonctionnalités avancés de suivi des bugs, d’automatisation des tâches, etc.
::: info
Les trois premiers proposent un compte gratuit largement suffisant pour un usage classique.
Le dernier est à installer sois-même sur un serveur.
:::
## Utilisation locale
### Installtion
#### MacOs
Git est inclus dans MacOs, mais vous devez installer les <span lang="en">command line tools</span> avant de pouvoir l'utiliser.
:::warning Attention
Si c'est la première fois que vous tentez d'utiliser le terminal ou certaines commandes, MacOS vous demandera d'installer les <span lang="en">command line tools</span>. C'est une suite d'outils indispensable pour utiliser certaines fonctionnalités en ligne de commande (dans un terminal).
Vous pouvez déclencher cette installation via la commande `xcode-select --install`
:::
#### Windows
Git doit être installé via un exécutable windows [téléchargeable ici.](https://git-scm.com/download/win)
### Outils
Afin de créer et gérer un dépôt de documents (généralement un dossier contenant le code source de notre projet), il est nécessaire d’utiliser un terminal. Il est possible d’utiliser le terminal intégré à son logiciel de développement ou celui de son système d’exploitation&nbsp;:
- **terminal** sur MacOS et linux
- **powershell** sur Windows
### Authentification du serveur
Pour éviter d’avoir à renseigner le mot de passe de son compte github, gitlab, gitea à chaque fois, il est recommandé d’utiliser une clé SSH. Ce protocole permet une authentification en arrière plan de votre machine auprès du serveur.
Afin de générer une clé, renseignez et validez la commande suivant dans le terminal&nbsp;:
```bash
ssh-keygen -t ed25519 -C "VOTRE_EMAIL"
```
Ne renseignez pas de mot/phrase de passe. Vous devriez recevoir une réponse du terminal contenant la localisation de la clé sur votre ordinateur ainsi qu’une “empreinte” de clé.
::: details Exemple d’empreinte
```bash
The key fingerprint is:
SHA256://wlS3vSWCovCYh+Y5LbtlS1Ee4nr0e3mTOmFq7//us test@mail.fr
The key’s randomart image is:
+--[ED25519 256]--+
| . |
| . . |
| + |
| o o |
| .S.. + . |
| . .o. =. o|
| . .. ...o=*=|
| +o= o+==%o|
| .*oo .BO@E*|
+----[SHA256]-----+
```
:::
Vous devez ensuite récupérer la clé publique, généralement `id_ed25519.pub`, copier son contenu et le coller dans les paramètres de votre compte github, gitlab, etc.
### Création d’un dépôt
Les étapes de création d’un dépôt sont quasiment systématiquement les mêmes&nbsp;:
1. ouvrir le dossier de travail dans le terminal
2. taper la commande `git init`
3. se rendre sur son serveur git en ligne
4. créer un nouveau dépôt vide depuis l’interface
### Envoyer des fichiers vers le serveur
Maintenant que le dépôt est créé, il faut faire le lien entre votre projet local et dépôt sur le serveur. À l’intérieur du dépôt distant vide, vous devriez trouver des commandes fournies par le serveur. Ces commandes peuvent-être copiées/collées dans l’ordre dans le terminal.
1. ajouter le serveur comme dépôt distant
- `git remote add origin git@github.com:USER/REPO.git`
2. demander à git de suivre tous les fichiers du dossier
- `git add .`
3. ajouter et figer l’état des fichiers suivis avec un commentaire
- `git commit -m "COMMENTAIRE"`
4. envoyer les fichiers sur le serveur
- `git push origin main`
::: tip
À chaque fois que vous souhaitez envoyer des modifications, répétez les étapes 2 à 4
:::

1
docs/dev/02-intermediaire/html.md
View File

@ -1 +0,0 @@
# HTML – Intermédiaire

141
docs/dev/02-intermediaire/javascript.md
View File

@ -1,141 +0,0 @@
# 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>
```
:::
## Les types de données
Il existe en JavaScript plusieurs [types de données&nbsp;:](https://developer.mozilla.org/fr/docs/Web/JavaScript/Data_structures)
- Valeurs primitives&nbsp;:
- <span lang="en">Number</span> (nombre)
- <span lang="en">String</span> (chaîne de caractères)
- <span lang="en">Boolean</span> (booléen)
- <span lang="en">Null</span> (nul)
- <span lang="en">Undefined</span> (indéfini)
- <span lang="en">Object</span> (objet)
Il est possible de regrouper ces types de données dans des tableaux (<span lang="en">Array</span>).
## Sélectionner le document HTML ([DOM](https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction))
JavaScript nous permet d'éxécuter des actions sur une page HTML. Par exemple&nbsp;:
- afficher, masquer, créer et supprimer des éléments&nbsp;;
- stocker, trier, organiser des données&nbsp;;
- modifier les styles CSS&nbsp;;
- ajouter des conditions, des boucles, des événements…
- etc.
Dans la plupart des cas, il est nécessaire de cibler un ou plusieurs éléments du document HTML afin de leur appliquer ces actions.
Afin de sélectionner un élément HTML en JavaScript, il faut utiliser une méthode permettant de cibler le ou les éléments qui nous intéressent. Il est possible de cibler un élément via le nom de sa balise, la valeur d'un attribut (`id` ou `classe` par exemple) ou d'autres moyens plus complexes que nous ne verrons pas ici.
### Sélectionner des balises
La méthode pour sélectionner une balise est la suivante&nbsp;:
<<< @/snippets/js/DOM-select.js#getElementsByTagName
Toutes les balises correspondantes sont retournées sous forme de `HTMLCollection` (un équivalent de tableau JavaScript).
### Sélectionner un id
<<< @/snippets/js/DOM-select.js#getElementById
Retourne un objet.
### Sélectionner une classe
<<< @/snippets/js/DOM-select.js#getElementsByClassName
Retourne un tableau.
::: warning Attention à l'orthographe
Notez que les méthodes qui retournent plusieurs éléments s'écrivent au pluriel alors que la sélection via un `id` est au singulier. Cela permet de se rappeler que la valeur d'un attribut `id` doit être unique dans la page HTML.
:::
### Sélectionner librement n'importe quoi
Il existe une méthode permettant de spécifier librement le type d'attribut à sélectionner. Il devient possible de chaîner ces attributs à la manière d'un sélecteur CSS.
<<< @/snippets/js/DOM-select.js#querySelector
Retourne un objet pour `querySelector` ou un `NodeList` pour `querySelectorAll` (semblable à un tableau).
## Les variables
Lorsque l'on sélectionne un élément, la valeur retournée n'est pas enregistrée par défaut. Si nous avons besoin de cibler à nouveau le même élément, il faudra alors réécrire toute la méthode de sélection.
Afin d'éviter de dupliquer du code inutilement, il est possible de stocker des données dans des variables afin de les réutiliser à plusieurs endroits.
On peut créer une variable de trois façons&nbsp;:
- [const](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/const)
- [let](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/let)
- [var](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/var)
Retenez que `const` permet de déclarer une variable constante, c'est-à-dire qu'elle ne peut pas être réaffectée.
### Stocker des données
#### Une seule valeur
Il est recommandé de déclarer des variables dès que l'on a besoin de conserver une valeur.
<<< @/snippets/js/variables.js#const
On peut assigner directement des type de données dans une variable.
<<< @/snippets/js/variables.js#dataTypes
#### Plusieurs valeurs
Pour stocker plusieurs valeurs, il est possible de déclarer un object ou un tableau (en fonction de nos besoins).
<<< @/snippets/js/variables.js#multiplesValues
## Écouter des événements
Une fois nos éléments HTML ciblés et stockés, nous avons besoin de déclencher des actions lorsque quelque chose se passe. Ce quelque chose peut être un clic, un survol, un champ de formulaire qui change, etc.
Nous devons donc **écouter** ces événements déclencher ce qui doit l'être ensuite. La méthode JavaScript à utiliser est `addEventListener('ÉVÉNEMENT', FONCTION)`
<<< @/snippets/js/variables.js#addEventListener
## Les conditions
Il est souvent nécessaire de déclencher des actions sur la page uniquement si certaines conditions sont remplies. Par exemple, nous pouvons regarder la valeur vraie ou fausse d'une variable et déclencher ou non une action.
```js
if (condition) {
// code à exécuter
}
```
Si la condition est remplie, le code sera exécuté. Sinon, il sera ignoré.
Une condition se construit de cette façon&nbsp;:
`if` `(` `valeur à évaluer` `opérateur` `valeur de référence` `)`
Par exemple&nbsp;: `if` `(` `myName` `===` `'Nico'` `)` ou encore `if` `(` `myAge` `>` `18` `)`
Voici [une liste d'opérateurs](https://www.joshwcomeau.com/operator-lookup/) et leurs explications (en anglais).
### Évaluer un booléen
Un booléen peut être soit vrai soit faux. Pour évaluer sa valeur, nous pouvons nous contenter de renseigner le nom de la variable
<<< @/snippets/js/variables.js#conditionsIf

137
docs/dev/02-intermediaire/markdown.md
View File

@ -1,137 +0,0 @@
# Intro au markdown
Le langage markdown est une manière d'écrire du `html` simplifiée. Un fichier markdown seul ne sera pas compris par un navigateur. Il est indispensable de le "&nbsp;compiler&nbsp;" afin de le rendre lisible dans un navigateur.
## Titres
Pour écrire des titres, on préfixe avec des `#`. Autant de `#` que de niveau de titre.
Exemple: `## h2`, `### h3`
## Listes
### Ordonnées
1. une
2. liste
3. ordonnée
:::details Code source
```md
1. une
2. liste
3. ordonnée
équivalen à
1. une
1. liste
1. ordonnée
```
:::
### Désordonnées
- une
- liste
1. liste
1. imbriquée
- désordonnée
:::details Code source
```md
- une
- liste
1. liste
1. imbriquée
- désordonnée
```
:::
### Checkbox
- [ ] à faire
- [x] urgent
:::warning Attention
N'est pas supporté partout, comme ici par exemple 😬
:::
## Code
Ligne de code: entourer avec des "backticks" `code`
:::details Code source
```md
`code`
```
:::
Bloc de code:
```css
body {
font-size: 1rem;
}
```
:::details Code source
````md
```css
body {
font-size: 1rem;
}
```
````
:::
## Liens
`[texte du lien](https://cible-du-lien.fr)`
Exemple: [nardu.in](https://www.nardu.in)
## Images
`![](CIBLE_IMAGE)`
![](https://picsum.photos/200/200)
## Mise en forme
On peut écrire du texte en gras ou en italique grâce aux `*` et/ou au `_`.
### Gras
Du texte **en gras.**
:::details Code source
```md
Du texte **en gras.**
```
:::
### Italique
Du texte _en italique._
:::details Code source
```md
Du texte _en italique._
```
:::
## Référence
[Documentation sur le markdown.](https://www.markdownguide.org/cheat-sheet/)

104
docs/dev/02-intermediaire/nodejs.md
View File

@ -1,104 +0,0 @@
# Installer Node.js
[Node.js](https://nodejs.org/fr) est un environnement d’exécution JavaScript. Plus simplement, c'est un outil permettant d'exécuter des programmes écrits en JavaScript sur un ordinateur.
## Versions
Node.js est en développement permanent, ce qui signifie que de nombreuses versions sont disponibles à l'utilisation. On distingue les version <abbr>`LTS`</abbr> <span lang="en">(long term support)</span> et les mises à jour classiques, plus nombreuses.
Afin d'installer et de gérer plusieurs versions de Node.js sur une seule machine, on peut installer un gestionnaire de version de node, autrement appeler <abbr>`nvm`</abbr> <span lang="en">(node version manager)</span>.
## MacOS
### Installation de nvm
Sur MacOS, on installera [nvm](https://github.com/nvm-sh/nvm) via une commande dans le terminal&nbsp;:
```sh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
```
:::warning Attention
Si c'est la première fois que vous tentez d'utiliser le terminal ou certaines commandes, MacOS vous demandera d'installer les <span lang="en">command line tools</span>. C'est une suite d'outils indispensable pour utiliser certaines fonctionnalités en ligne de commande (dans un terminal).
Vous pouvez déclencher cette installation via la commande `xcode-select --install`
:::
Pour vérifier que l'installation s'est bien passée, fermez le terminal puis relancez-le. Lancez enfin `nvm --version` dans le terminal. Vous devez obtenir une réponse similaire à&nbsp;:
```sh{2}
$ nvm --version
0.39.3
```
Si vous obtenez un message d'erreur indiquant que vous n'avez pas de fichier `.bashrc` ou `.zshrc`, lancez la commande suivante pour créer ce dernier&nbsp;:
```sh
# macOs Mojave (10.14) ou inférieure
touch ~/.bashrc
# macOs Catalina (10.15) ou supérieure
touch ~/.zshrc
```
Relancez maintenant la commande d'installation de `nvm` puis `nvm --version` pour vérifier l'installation.
### Installation de node
Nous pouvons maintenant [installer une ou plusieurs versions](https://github.com/nvm-sh/nvm#long-term-support) de Node.js via nvm.
```sh
# installer une version précise de node
nvm install 20.2.0
# installer la dernière version lts en date
nvm install lts/*
# installer une version lts précise
nvm install lts/gallium
```
### Utiliser une version installée
:::info
Cette étape est inutile si vous n'avez qu'une seule version installée.
:::
nvm fera de la première version que vous installerez la version par défaut de votre machine. On peut changer de version en utilisant `nvm use VERSION_INSTALLÉE`.
```sh
# lister les versions installées sur la machine
nvm ls
# choisir une version à utiliser
nvm use 18.16.0
```
## Windows
### Installation de nvm
Comme pour [git](./git.md), il faut installer `nvm` via un exécutable sur Windows. Rendez-vous sur [cette page](https://github.com/coreybutler/nvm-windows/releases) et téléchargez la dernière version de `nvm-setup.exe`.
### Installation de node
Ouvrez une fenêtre `powershell` windows puis lancez&nbsp;:
```sh
# installer une version précise de node
nvm install 20.2.0
# installer la dernière version lts en date
nvm install lts
```
### Utiliser une version installée
nvm attendra qu'on lui dise d'utiliser une version installée pour fonctionner. On peut choisir ou changer de version en utilisant `nvm use VERSION_INSTALLÉE`.
```sh
# lister les versions installées sur la machine
nvm list
# choisir une version à utiliser
nvm use lts
```

1
docs/dev/03-avance/html.md
View File

@ -1 +0,0 @@
# HTML – Avancé

22
docs/dev/03-avance/index.md
View File

@ -1,22 +0,0 @@
# 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)

30
docs/dev/01-debutant/html.md → docs/dev/B1/html.md Executable file → Normal file
View File

@ -1,24 +1,22 @@
# HTML – Débutant
# HTML B1
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;:
## 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 :
`<` `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.
::: 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
### 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
@ -29,7 +27,7 @@ En HTML, chaque balise est une boîte. Se représenter une boîte par élément
<<< @/snippets/html/base.html#base
:::
## Les balises structurantes
### Les balises structurantes
- `<header>` = en-tête
- `<nav>` = élément contenant des liens, destiné à la navigation
@ -44,15 +42,13 @@ En HTML, chaque balise est une boîte. Se représenter une boîte par élément
<<< @/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
Les balises “&nbsp;en bloc&nbsp;” sont des balises qui occuperont toute la largeur disponible, quelle que soit la largeur de leur contenu.
#### Balises bloc
- `<blockquote>` = une citation
- `<p>` = un paragraphe
@ -61,13 +57,7 @@ Les balises “&nbsp;en bloc&nbsp;” sont des balises qui occuperont toute la l
- `<li>` = élément d’une liste
- `<div>` = conteneur générique
::: 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.
#### Balises en ligne
- `<img>` = insertion d’une image
- `<a>` = un lien

10
docs/dev/01-debutant/index.md → docs/dev/B1/index.md Executable file → Normal file
View File

@ -1,4 +1,4 @@
# Débutant – Découverte
# Découverte et bases
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,16 +29,14 @@ 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. Mise en ligne
9. Développement local
10. Mise en ligne
## Concepts et architecture
@ -48,5 +46,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

1
docs/dev/B2/html.md Normal file
View File

@ -0,0 +1 @@
# HTML B2

20
docs/dev/02-intermediaire/index.md → docs/dev/B2/index.md Executable file → Normal file
View File

@ -1,4 +1,4 @@
# Intermédiaire - Approfondissement
# 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,22 +9,26 @@ 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 intermédiaire
2. HTML avancé
1. formulaires
2. templating
3. CSS intermédiaire
3. CSS avancé
1. Pseudo elements
2. flex
3. grid
2. Propriétés logiques
3. Variables
4. Contenus
1. CMS
2. API
3. BDD mysql
5. Bases JS
1. Introduction
1. Présentation (front/back)
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. SEO
7. JS avancé (contenus dynamiques)
1. Rest
2. Fetch
3. Graphql
8. Webapp (node)

1
docs/dev/B2/introduction.md Normal file
View File

@ -0,0 +1 @@
# Intro B2

1
docs/dev/B3/html.md Normal file
View File

@ -0,0 +1 @@
# HTML B2

1
docs/dev/B3/index.md Normal file
View File

@ -0,0 +1 @@
# Frontend B3

1
docs/dev/B3/introduction.md Normal file
View File

@ -0,0 +1 @@
# Intro B3

24
docs/dev/code-camp/index.md Executable file → Normal file
View File

@ -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,27 +41,25 @@ 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
└── robots.txt
└── index.html
```
:::
## 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&nbsp;:
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 :
`<` `nom de la balise` `attributs` `>`
`contenu de la balise`
`</` `nom de la balise` `>`
@ -130,7 +128,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&nbsp;:
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 :
- la mise en page
- les couleurs
@ -139,7 +137,7 @@ Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur
- les polices de caractères
- etc.
On parle de “&nbsp;règle CSS&nbsp;”. Une règle se construit ainsi&nbsp;:
On parle de « règle CSS ». Une règle se construit ainsi :
`sélecteur` `{` `propriété` `:` `valeur` `;` `}`
@ -202,7 +200,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 “&nbsp;conflit&nbsp;” 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 « conflit » entre plusieurs règles.
Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.**
@ -211,7 +209,7 @@ Les deux éléments de la cascade que nous utiliseront le plus ici sont **la sp
## Accessibilité
D'après [Access42&nbsp;:](https://access42.net/)
D'après [Access42 :](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.

2
docs/dev/code-camp/sujets.md Executable file → Normal file
View File

@ -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&nbsp;:
Il devra obligatoirement contenir ces éléments :
- une photo de l'artiste
- un clip vidéo

0
docs/dev/docs.md Executable file → Normal file
View File

49
docs/dev/fragments/base/01-structure.md
View File

@ -1,49 +0,0 @@
# 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}

15
docs/dev/fragments/base/02-robots.md
View File

@ -1,15 +0,0 @@
# 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

14
docs/dev/fragments/css/00-reset.md
View File

@ -1,14 +0,0 @@
# 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

59
docs/dev/fragments/css/01-centrer.md
View File

@ -1,59 +0,0 @@
# Centrer des éléments
Il existe plusieurs méthodes permettant de centrer des éléments en CSS. L'utilisation de l'une ou de l'autre dépend généralement du contexte dans lequel se trouve l'élément à centrer.
## Description
Il est possible de centrer horizontalement et verticalement. À la fois dans toute la page ou dans une zone de contenu définie.
## Exemples
### Centrer du texte
```CSS
p {
text-align: center;
}
```
### Centrer horizontalement un élément dont la largeur est restreinte
```CSS
.container {
max-inline-size: 60ch;
margin-inline: auto;
}
```
### Centrer horizontalement le contenu d'un élément
```CSS
.container {
display: flex; /* ou grid */
justify-content: center;
}
```
### Centrer verticalement le contenu d'un élément
```CSS
.container {
display: flex; /* ou grid */
align-items: center;
}
```
### Centrer horizontalement et verticalement le contenu d'un élément
```CSS
.container {
display: flex;
align-items: center;
justify-content: center;
}
/* OU */
.container {
display: grid;
place-content: center;
}
```

68
docs/dev/fragments/html/01-titres.md
View File

@ -1,68 +0,0 @@
# Titres
## Description
Les titres en HTML sont essentiels. Ils servent à structurer le contenu de la page en sections logiques. Tels la table des matières d'un livre, les titres doivent être organisés du plus important au moins important.
Il existe 6 niveaux de titres, nommés `hX` de 1 à 6:
- `<h1>` est le titre le plus important de la page. Il est indispensable. Il ne peut y en avoir qu'un seul par page. Il doit permettre d'identifier le contenu de la page.
- `<h2>`
- `<h3>`
- `<h4>`
- `<h5>`
- `<h6>`
Les titres doivent se succéder de manière logique. Un `h2` doit succéder à un `h1`, un `h3` doit succéder à un `h2` et ainsi de suite.
On ne peut pas utiliser un `h4` après un `h2` si aucun `h3` n'est présent entre eux.
## Exemples
### Structure incorrecte
```html
<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<h4>Sous-titre</h4> // [!code error]
```
### Structure correcte
```html
<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<h3>Sous-titre</h3>
<h2>Titre secondaire</h2>
<h3>Sous-titre</h3>
<h4>Sous-titre</h4>
<h2>Titre secondaire</h2>
```
### Structure complexe correcte
```html
<h1>Sandwich PB&J</h1>
<h2>Les ingrédients</h2> // [!code hl]
<h3>Le frais</h3> // [!code hl]
<ul>
<li>confiture</li>
</ul>
<h3>Le sec</h3> // [!code hl]
<ul>
<li>pain</li>
<li>beurre de cacahuette</li>
</ul>
<h2>Les étapes</h2> // [!code hl]
<ol>
<li>couper deux tartines de pain</li>
<li>étaler la confiture sur une tartine</li>
<li>étaler le beurre de cacahuette sur l’autre tartine</li>
<li>faire un sandwich</li>
</ol>
```
Il est possible de revenir à un titre de niveau supérieur à n'importe quel moment.
:::warning Styles et titres
Il est fréquent de voir des titres importants utiliser un niveau inférieur pour des raisons de styles. Ce n'est pas une bonne pratique, il faudra préférer utiliser une classe plutôt que de modifier la structure du document.
:::

32
docs/dev/fragments/html/02-paragraphe.md
View File

@ -1,32 +0,0 @@
# Paragraphe
## Description
Un paragraphe est un morceau de texte lambda. Il contient généralement le contenu brut de la page. Il est souhaitable de séparer son contenu en plusieurs paragraphes afin de pouvoir séparer visuellement les différentes parties d'une même section de texte.
Il est généralement préférable d'utiliser plusieurs paragraphes plutôt que des sauts de ligne à l'intérieur d'un seul énorme paragraphe.
## Exemples
```html
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, mollitia!</p>
<p>
Ut incidunt voluptas libero natus deleniti cum, quod eum nostrum sit ipsa illo
repellendus in nulla, exercitationem consequatur cupiditate corporis ex
veniam.
</p>
```
## Mise en forme
Afin de mettre en forme le contenu d'un paragraphe, il existe plusieurs balises utilisables. Ces balises se comportent “en ligne”, permettant ainsi de cohabiter les unes à côté des autres.
```html
<strong>Permet de mettre du texte en avant et en gras</strong>
<b>Permet de mettre du texte en gras</b>
<em>Permet de mettre du texte en italique</em>
<span>
Est une balise sans effet par défaut, utile pour styler un morceau de texte en
CSS
</span>
```

35
docs/dev/fragments/html/04-image.md
View File

@ -1,35 +0,0 @@
# Image
## Description
Afin d'insérer une image dans son document, il convient d'utiliser la balise `<img>`. Cette dernière est particulière car elle n'a pas besoin de balise dite “fermante”
C'est une balise qui fait partie de la famille des [“Éléments remplacés”.](https://developer.mozilla.org/fr/docs/Web/CSS/Replaced_element)
Cette balise nécessite deux attributs obligatoires: `src` et `alt` et deux attributs recommandés: `width` et `height`.
L'attribut `src` nous permet de renseigner la source de l'image. Que ce soit une URL distante ou bien un chemin vers une image locale.
L'attribut `alt` est à renseigner si l'image est “porteuse de sens”. **Si l'image est décorative, l'attribut `alt` doit rester vide mais ne doit pas être supprimé.**
Les attributs `width` et `height` sont à renseigner dans la mesure du possible afin que le navigateur réserve la place nécessaire à l'image au moment du chargement de la page.
## Exemples
```html
<img
src="./images/banniere-promo.jpg"
alt="Économisez 40% avec le code BIENVENUE"
width="600"
height="60"
/>
```
```html
<img
src="https://photos-de-chats.fr/felix.png"
alt=""
width="300"
height="400"
/>
```

7
docs/dev/fragments/html/index.md
View File

@ -1,7 +0,0 @@
# Fragments de code
Dans cette partie, vous trouverez des bouts de code (fragments) HTML. Ces exemples sont accompagnés d'une description rapide et existent afin que vous puissiez constituer votre bibliothèque personnelle d'éléments récurrents.
## Fragments disponibles
- [Titres](01-titres.md)

0
docs/dev/goat.md Executable file → Normal file
View File

8
docs/dev/index.md Executable file → Normal file
View File

@ -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 “&nbsp;[l’amélioration progressive](https://briefs.video/videos/is-progressive-enhancement-dead-yet/)&nbsp;”
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/) »
## Ressources
@ -14,7 +14,7 @@ Nous aborderons l'apprentissage du développement web par le prisme de [l’acce
## Niveaux
- [Débutant — Découverte et bases](./01-debutant/)
- [Intermédiaire — Approfondissement](./02-intermediaire/)
- [Avancé — Expertise web](./03-avance/)
- [B1 — Découverte et bases](./B1/)
- [B2 — Approfondissement](./B2/)
- [B3 — Expertise web](./B3/)
- [Code Camp — Découverte intensive](./code-camp/)

0
docs/dev/outils.md Executable file → Normal file
View File

BIN
docs/directus/assets/admin.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
docs/directus/assets/collection-imbriquee-edition.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
docs/directus/assets/collection-imbriquee.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
docs/directus/assets/collections-accueil.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
docs/directus/assets/collections-asso.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
docs/directus/assets/directus-login.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/directus/assets/mediatheque.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

29
docs/directus/index.md Normal file
View File

@ -0,0 +1,29 @@
---
layout: doc
---
# Directus
Outil de gestion de contenus (CMS).
## Présentation
Directus est un outil permettant de gérer des informations stockées dans une base de données. Ici, il va nous permettre d'administrer les contenus d'un site web.
## Interface
### Connexion
L'interface d'administration est accessible via l'URL qui vous a été communiquée.
![](./assets/directus-login.jpg)
### Contenus (collections)
Les contenus sont organisés en "collections". Généralement, une collection représente une page ou un ensemble de pages identiques.
Exemple de collection de pages identiques. Ici, les champs de contenus sont configurés à l'avance.
![](./assets/collections-asso.jpg)
Exemple de collection d'une page unique. Chaque nouvel élément créé dans cette collection deviendra une page sur le site.
![](./assets/collections-accueil.jpg)

0
docs/index.md Executable file → Normal file
View File

2
docs/public/robots.txt Executable file → Normal file
View File

@ -1,2 +1,2 @@
User-agent: *
Allow: /
Disallow: /

0
docs/snippets/css/base.css Executable file → Normal file
View File

98
docs/snippets/css/reset.css
View File

@ -1,98 +0,0 @@
/* 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 */

0
docs/snippets/html/base.html Executable file → Normal file
View File

23
docs/snippets/html/structure.html
View File

@ -1,23 +0,0 @@
<!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>

22
docs/snippets/js/DOM-select.js
View File

@ -1,22 +0,0 @@
// #region getElementsByTagName
// sélectionner tous les éléments "section"
document.getElementsByTagName("section");
// #endregion getElementsByTagName
// #region getElementById
// sélectionner l'élément dont la valeur de l'attribut id est "custom"
document.getElementById("custom");
// #endregion getElementById
// #region getElementsByClassName
// sélectionner les éléments dont la valeur de l'attribut class est "card"
document.getElementsByClassName("card");
// #endregion getElementsByClassName
// #region querySelector
// sélectionner le premier élément de classe "card" dans une section d'id "custom"
document.querySelector("section#custom .card");
// sélectionner tous les éléments "button"
document.querySelectorAll("button");
// #endregion querySelector

39
docs/snippets/js/variables.js
View File

@ -1,39 +0,0 @@
// #region const
// stocker l'élément d'id "custom" dans la variable customElement
const customElement = document.getElementById("custom");
// #endregion const
// #region dataTypes
// myName ne devrait pas changer, pas d'où la constante
const myName = "Nico";
// myAge changera tous les ans, d'où l'utilisation de let
let myAge = 32;
// #endregion dataTypes
// #region multiplesValues
// me est un objet contenant plusieurs propriétés et leur valeur
const me = {
name: "Nico",
age: 32,
};
// myPseudos est un tableau contenant plusieurs valeurs
let myPseudos = ["nicool", "dev man"];
// #endregion multiplesValues
// #region addEventListener
const myButton = document.getElementById("sendButton");
// ici, on écoute l'événement "click" sur l'élément "myButton"
myButton.addEventListener("click", function () {
// actions à exécuter
});
// #endregion addEventListener
// #region conditionsIf
// la variable "userLogged" est un booléen, ici vrai
let userLogged = true;
// on évalue la valeur de "userLogged" avant d'exécuter la fonction
if (userLogged) {
// actions à exécuter
}
// #endregion conditionsIf

9
docs/snippets/robots.txt
View File

@ -1,9 +0,0 @@
// #region allow
User-agent: *
Allow: /
// #endregion allow
// #region disallow
User-agent: *
Disallow: /
// #endregion disallow

5
package.json Executable file → Normal file
View File

@ -1,12 +1,13 @@
{
"name": "vitepress-starter",
"packageManager": "yarn@3.2.1",
"scripts": {
"dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"serve": "vitepress serve docs"
},
"devDependencies": {
"vitepress": "^1.0.0-rc.31",
"vue": "^3.2.47"
"vitepress": "1.0.0-alpha.19",
"vue": "^3.2.40"
}
}

1846
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff