initial commit
This commit is contained in:
Nico
commit
52c86295e9
24 changed files with 2603 additions and 0 deletions
1
docs/dev/B2/html.md
Normal file
1
docs/dev/B2/html.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# HTML B2
|
||||
1
docs/dev/B2/index.md
Normal file
1
docs/dev/B2/index.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Frontend B2
|
||||
1
docs/dev/B2/introduction.md
Normal file
1
docs/dev/B2/introduction.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Intro B2
|
||||
1
docs/dev/B3/html.md
Normal file
1
docs/dev/B3/html.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# HTML B2
|
||||
1
docs/dev/B3/index.md
Normal file
1
docs/dev/B3/index.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Frontend B3
|
||||
1
docs/dev/B3/introduction.md
Normal file
1
docs/dev/B3/introduction.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Intro B3
|
||||
183
docs/dev/code-camp/index.md
Normal file
183
docs/dev/code-camp/index.md
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
# Code camp
|
||||
|
||||
Vous êtes sur le point de commencer une semaine intensive de développement web. Soufflez un coup, tout va bien se passer :relaxed:
|
||||
|
||||
[[toc]]
|
||||
|
||||
## 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
|
||||
|
||||
## Configuration et préparation
|
||||
|
||||
- Paramétrons votre environnement de développement.
|
||||
- Préparons votre dossier de travail local.
|
||||
- Jetons un œil à la maquette.
|
||||
|
||||
::: 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/
|
||||
├── assets/
|
||||
│ ├── css/
|
||||
│ │ └── style.css
|
||||
│ ├── fonts/
|
||||
│ │ └── arial.woff2
|
||||
│ ├── images/
|
||||
│ │ └── hero.jpg
|
||||
│ ├── js/
|
||||
│ │ └── main.js
|
||||
│ └── svg/
|
||||
│ └── icon-guitar.svg
|
||||
├── favicon.ico
|
||||
└── index.html
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## HTML
|
||||
|
||||
Le HTML 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.
|
||||
|
||||
### 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
|
||||
|
||||
- `<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
|
||||
|
||||
#### Balises en ligne
|
||||
|
||||
- `<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
|
||||
:::
|
||||
|
||||
## 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
|
||||
:::
|
||||
|
||||
## 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 « 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.**
|
||||
|
||||
- [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.
|
||||
|
||||
## Accessibilité
|
||||
|
||||
## Mise en ligne
|
||||
|
||||
## Bonus
|
||||
19
docs/dev/docs.md
Normal file
19
docs/dev/docs.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
# Liens et documentation
|
||||
|
||||
Tous les liens sont externes.
|
||||
|
||||
## HTML
|
||||
|
||||
- [Commencer avec HTML](https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
|
||||
- [Liste de toutes les balises HTML](https://developer.mozilla.org/fr/docs/Web/HTML/Element)
|
||||
- [L'élément `button`](https://www.buttoncheatsheet.com/)
|
||||
- [Mauvais exemples (et corrections) HTML](https://www.htmhell.dev/)
|
||||
|
||||
## CSS
|
||||
|
||||
- [Commencer avec CSS](https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/CSS_basics)
|
||||
- [Liste et documentation de toutes les propriétés CSS](https://tympanus.net/codrops/css_reference/)
|
||||
- [La cascade CSS et les spécificités de styles](https://wattenberger.com/blog/css-cascade)
|
||||
- [La spécificité expliquée visuellement](https://www.matuzo.at/blog/2022/specificity/)
|
||||
- [Cours de google sur le CSS](https://web.dev/learn/css/)
|
||||
- [Exercice intéractif sur les sélecteurs](https://flukeout.github.io/)
|
||||
1
docs/dev/front/html.md
Normal file
1
docs/dev/front/html.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# HTML B1
|
||||
1
docs/dev/front/index.md
Normal file
1
docs/dev/front/index.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Frontend B1
|
||||
1
docs/dev/front/introduction.md
Normal file
1
docs/dev/front/introduction.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Intro B1
|
||||
18
docs/dev/index.md
Normal file
18
docs/dev/index.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
# Dev
|
||||
|
||||
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/) »
|
||||
|
||||
## Ressources
|
||||
|
||||
- [Documentations](./docs)
|
||||
- [Outils](./outils)
|
||||
|
||||
## Niveaux
|
||||
|
||||
- [B1 — première année](./B1/)
|
||||
- [B2 — deuxième année](./B2/)
|
||||
- [B3 — troisième année](./B3/)
|
||||
33
docs/dev/outils.md
Normal file
33
docs/dev/outils.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# Liste d'outils utiles
|
||||
|
||||
## Générique
|
||||
|
||||
- [Tableaux de support des navigateurs pour les technologies web](https://caniuse.com/)
|
||||
|
||||
## Typo
|
||||
|
||||
### Bibliothèques
|
||||
|
||||
- [Font squirrel](https://www.fontsquirrel.com/)
|
||||
- [Coollabs (remplacement google fonts)](https://fonts.coollabs.io/)
|
||||
|
||||
### Outils webfont
|
||||
|
||||
- [Générateur de fichier webfont](https://transfonter.org/)
|
||||
- [Analyse de fichier font](https://wakamaifondue.com/)
|
||||
|
||||
## Image
|
||||
|
||||
- [Outil d’optimisation d’image](https://squoosh.app/)
|
||||
|
||||
## Couleurs
|
||||
|
||||
- [Génération de palette](https://coolors.co/generate)
|
||||
- [Génération avancée de palette](http://khroma.co/train/)
|
||||
- [Générateur de dégradé](https://www.joshwcomeau.com/gradient-generator/)
|
||||
- [Générateur d’ombre portée](https://www.joshwcomeau.com/shadow-palette/)
|
||||
|
||||
## Illustrations
|
||||
|
||||
- [Undraw](https://undraw.co/illustrations)
|
||||
- [Blush](https://blush.design/)
|
||||
Loading…
Add table
Add a link
Reference in a new issue