initial commit

This commit is contained in:
Nico 2022-07-16 12:04:51 +02:00
commit 52c86295e9
24 changed files with 2603 additions and 0 deletions

99
.gitignore vendored Normal file
View File

@ -0,0 +1,99 @@
# Created by .ignore support plugin (hsz.mobi)
### local TLS
localhost*.*
### Node template
# Logs
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.yarn
.pnp*
# conf
.editorconfig
.vscode
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# Nuxt generate
dist
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# IDE / Editor
.idea
# Service worker
sw.*
# macOS
.DS_Store
# Vim swap files
*.swp

1
README.md Normal file
View File

@ -0,0 +1 @@
# vitepress-starter

101
docs/.vitepress/config.js Normal file
View File

@ -0,0 +1,101 @@
export default {
lang: "fr",
title: "3W",
titleTemplate: "Support de cours",
description: "Cest cool je crois.",
lastUpdated: true,
themeConfig: {
nav: [
{
text: "Dev",
items: [
{ text: "Sommaire", link: "/dev/" },
{ text: "B1", link: "/dev/B1/" },
{ text: "B2", link: "/dev/B2/" },
{ text: "B3", link: "/dev/B3/" }
]
},
{ text: "Design", link: "/design/", activeMatch: "/design/" }
],
sidebar: {
// This sidebar gets displayed when user is
// under `dev` directory.
"/dev/": [
{
text: "Général",
items: [
{ text: "Sommaire", link: "/dev/" }, // /dev/index.md
{ text: "Documentations", link: "/dev/docs" },
{ text: "Outils", link: "/dev/outils" }
]
},
{
text: "B1",
collapsible: true,
collapsed: true,
items: [
{ text: "Sommaire", link: "/dev/B1/" },
{ text: "Introduction", link: "/dev/B1/introduction" },
{ text: "HTML", link: "/dev/B1/html" }
]
},
{
text: "B2",
collapsible: true,
collapsed: true,
items: [
{ text: "Sommaire", link: "/dev/B2/" },
{ text: "Introduction", link: "/dev/B2/introduction" },
{ text: "HTML", link: "/dev/B2/html" }
]
},
{
text: "B3",
collapsible: true,
collapsed: true,
items: [
{ text: "Sommaire", link: "/dev/B3/" },
{ text: "Introduction", link: "/dev/B3/introduction" },
{ text: "HTML", link: "/dev/B3/html" }
]
},
{
text: "Code Camp",
collapsible: true,
collapsed: true,
items: [{ text: "Théorie", link: "/dev/code-camp/" }]
}
],
"/design/": [
{
text: "Design",
items: [
{ text: "Index", link: "/design/" },
{ text: "Introduction", link: "/design/introduction" }
]
}
]
},
outlineTitle: "Sur cette page",
lastUpdatedText: "Mis à jour le",
footer: {
message: "Ces contenus sont publiés sous licence Creative Commons",
copyright: "CC BY 4.0"
},
docFooter: {
prev: "Précédent",
next: "Suivant"
}
},
markdown: {
theme: "one-dark-pro",
externalLinks: {
target: "_self"
}
}
};

View File

@ -0,0 +1,3 @@
:root {
--vp-code-font-size: 0.9375rem;
}

View File

@ -0,0 +1,4 @@
import DefaultTheme from "vitepress/theme";
import "./custom.css";
export default DefaultTheme;

13
docs/design/index.md Normal file
View File

@ -0,0 +1,13 @@
# Design
cool
::: info
This is an info box.
:::
## Introduction
### definition
## Getting started

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

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

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

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

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

View File

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

183
docs/dev/code-camp/index.md Normal file
View 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 dinternet (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à lutilisateur
- `<aside>` = contenu secondaire ou indirect à linverse 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 dune liste
- `<div>` = conteneur générique
#### Balises en ligne
- `<img>` = insertion dune 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 dattribut
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 denchaî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
View 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
View File

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

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

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

View File

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

18
docs/dev/index.md Normal file
View 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 [laccessibilité numérique](https://access42.net/decouvrir-accessibilite?lang=fr) et de « [lamé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
View 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 doptimisation dimage](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 dombre portée](https://www.joshwcomeau.com/shadow-palette/)
## Illustrations
- [Undraw](https://undraw.co/illustrations)
- [Blush](https://blush.design/)

30
docs/index.md Normal file
View File

@ -0,0 +1,30 @@
---
layout: home
hero:
name: 3W
text: Ressources et supports de cours.
tagline: Lezgongue
actions:
- theme: brand
text: Développement
link: /dev/
- theme: alt
text: Design
link: /design/
# features:
# - icon: ⚡️
# title: Vite, The DX that can't be beat
# details: Lorem ipsum...
# - icon: 🖖
# title: Power of Vue meets Markdown
# details: Lorem ipsum...
# - icon: 🛠️
# title: Simple and minimal, always
# details: Lorem ipsum...
---
# Hello VitePress
- [le dev](./dev/)
- [et ici le design](./design/)

View File

@ -0,0 +1,51 @@
// #region tag
body {}
main {}
ul {}
p {}
span {}
// #endregion tag
// #region class
.class-personnelle {}
.container {}
// #endregion class
// #region attr
a[href] {}
a[href="/"] {}
// #endregion attr
// #region chain
ul, ol {}
ul.class-personnelle {}
ul > li {}
.class-personnelle img {}
* + * {}
// #endregion chain
// #region property
body {
margin-top: -40px;
padding: 0 20px;
overflow-x: hidden;
font-family: Arial, sans-serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.4;
color: var(--dark);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--blue);
font-weight: 500;
margin: 0;
padding: 0;
line-height: 1.2;
}
// #endregion property

View File

@ -0,0 +1,88 @@
// #region base
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
[Contenu du site]
</body>
</html>
// #endregion base
// #region structure
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<section>
<h1>Titre principal</h1>
<article>
<header>
<h2>Titre secondaire</h2>
</header>
</article>
</section>
</main>
<aside>
<h2></h2>
</aside>
<footer></footer>
</body>
</html>
// #endregion structure
// #region full
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<body>
<header>
<nav>
<a href="/">accueil</a>
</nav>
</header>
<main>
<section>
<h1>Titre principal</h1>
<article>
<header>
<h2>Titre secondaire</h2>
</header>
<p>Lorem <strong>ipsum</strong> dolor sit amet.</p>
</article>
</section>
</main>
<aside>
<h2></h2>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</aside>
<footer></footer>
</body>
</html>
// #endregion full

13
package.json Normal file
View File

@ -0,0 +1,13 @@
{
"name": "vitepress-starter",
"packageManager": "yarn@3.2.1",
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
},
"devDependencies": {
"vitepress": "^1.0.0-alpha.4",
"vue": "^3.2.37"
}
}

1938
yarn.lock Normal file

File diff suppressed because it is too large Load Diff