reorganized levels,

added content updated dependencies
2023-02-14 19:30:53 +01:00 · 2023-02-14 19:30:53 +01:00 · 7f356d807a
commit 7f356d807a
parent 6214c827eb
32 changed files with 11143 additions and 2043 deletions
--- 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
@ -0,0 +1,80 @@
+# HTML – Débutant
+
+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.
+
+::: 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
+
+- `lang` = déclaration du langage utilisé pour le contenu
+- `dir` = Sens de lecture du contenu
+- `charset` = définit l'encodage des caractères utilisés
+- `title` = définit le titre du document (fenêtre/onglet/référencement)
+
+::: details Afficher le code
+<<< @/snippets/html/base.html#base
+:::
+
+## Les balises structurantes
+
+- `<header>` = en-tête
+- `<nav>` = élément contenant des liens, destiné à la navigation
+- `<main>` = contenu principal du document
+- `<article>` = une composition autonome pouvant être utilisée seule
+- `<section>` = zone générique du document, plus utile au développeur qu’à l’utilisateur
+- `<aside>` = contenu secondaire ou indirect à l’inverse de `<main>`
+- `<h1>` - `<h6>` = niveaux des titres du document
+- `<footer>` = pied de page
+
+::: details Afficher le code
+<<< @/snippets/html/base.html#structure
+:::
+
+## 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.
+
+- `<blockquote>` = une citation
+- `<p>` = un paragraphe
+- `<ol>` = liste ordonnée
+- `<ul>` = liste désordonnée (liste à puce)
+- `<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.
+
+- `<img>` = insertion d’une image
+- `<a>` = un lien
+- `<span>` = conteneur générique en ligne
+- `<strong>` = contenu important (en gras)
+- `<br>` = saut de ligne
+
+::: details Afficher le code
+<<< @/snippets/html/base.html#full
+:::
--- a/docs/dev/01-debutant/index.md
+++ b/docs/dev/01-debutant/index.md
@ -0,0 +1,52 @@
+# 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.
+
+## Programme
+
+:::info Voici à titre indicatif le programme prévisionnel pour la première année.
+Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
+:::
+
+1. Introduction et test du niveau de la classe
+2. Historique et enjeux du web
+   1. Structure et architecture (client-serveur/front-back)
+   2. Protocoles (http, TLS, DNS, ftp…)
+   3. Langages (HTML, CSS, JS, PHP, etc.)
+   4. Évolutions
+3. Organiser son espace de travail
+4. Navigateurs
+   1. Uniformité/différences ([caniuse](https://caniuse.com/))
+   2. Inspecteurs (version développeur)
+5. Éditeur [VSCodium](https://github.com/VSCodium/vscodium) (vscode)
+   1. Config
+   2. Plugins
+6. Bases HTML
+   1. Balises basiques
+   2. HTML sémantique
+   3. Structurer le contenu
+7. Bases CSS
+   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
+
+## Concepts et architecture
+
+- **Internet** = réseau de réseaux, infrastructure globale (TPC/IP)
+- **Web** = application basée sur le réseau d’internet (HTTP/HTTPS)
+- **DNS** = annuaire adresse IP/nom de domaine
+- **FTP**/SFTP = transfert de fichiers
+- **HTML** = contenus
+- **CSS** = styles
+- **JavaScript** = éléments dynamiques
+- **Fonts** = polices de caractères