3W/cours
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reorganized levels,

Browse source 
added content
updated dependencies
This commit is contained in:
Nico 2023-02-14 19:30:53 +01:00
parent 6214c827eb
commit 7f356d807a
32 changed files with 11143 additions and 2043 deletions
Download patch file Download diff file Expand all files Collapse all files

93
docs/dev/01-debutant/css.md Normal file
View file

@ -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.

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

@ -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

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

@ -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

2
docs/dev/B2/git.md → docs/dev/02-intermediaire/git.md
View file

@ -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).

1
docs/dev/02-intermediaire/html.md Normal file
View file

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

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

@ -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

16
docs/dev/02-intermediaire/javascript.md Normal file
View file

@ -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>
```
:::

1
docs/dev/03-avance/html.md Normal file
View file

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

22
docs/dev/03-avance/index.md Normal file
View file

@ -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)

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

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

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

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

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

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

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

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

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

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

24
docs/dev/code-camp/index.md
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,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.

2
docs/dev/code-camp/sujets.md
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 :
Il devra obligatoirement contenir ces éléments&nbsp;:
- une photo de l'artiste
- un clip vidéo

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

@ -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}

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

@ -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

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

@ -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

2
docs/dev/index.md
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 « [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