From 52c86295e9350027caa8e0520ab0b133341bbd80 Mon Sep 17 00:00:00 2001 From: Nico Date: Sat, 16 Jul 2022 12:04:51 +0200 Subject: [PATCH] initial commit --- .gitignore | 99 ++ README.md | 1 + docs/.vitepress/config.js | 101 ++ docs/.vitepress/theme/custom.css | 3 + docs/.vitepress/theme/index.js | 4 + docs/design/index.md | 13 + docs/dev/B2/html.md | 1 + docs/dev/B2/index.md | 1 + docs/dev/B2/introduction.md | 1 + docs/dev/B3/html.md | 1 + docs/dev/B3/index.md | 1 + docs/dev/B3/introduction.md | 1 + docs/dev/code-camp/index.md | 183 +++ docs/dev/docs.md | 19 + docs/dev/front/html.md | 1 + docs/dev/front/index.md | 1 + docs/dev/front/introduction.md | 1 + docs/dev/index.md | 18 + docs/dev/outils.md | 33 + docs/index.md | 30 + docs/snippets/css/base.css | 51 + docs/snippets/html/base.html | 88 ++ package.json | 13 + yarn.lock | 1938 ++++++++++++++++++++++++++++++ 24 files changed, 2603 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 docs/.vitepress/config.js create mode 100644 docs/.vitepress/theme/custom.css create mode 100644 docs/.vitepress/theme/index.js create mode 100644 docs/design/index.md create mode 100644 docs/dev/B2/html.md create mode 100644 docs/dev/B2/index.md create mode 100644 docs/dev/B2/introduction.md create mode 100644 docs/dev/B3/html.md create mode 100644 docs/dev/B3/index.md create mode 100644 docs/dev/B3/introduction.md create mode 100644 docs/dev/code-camp/index.md create mode 100644 docs/dev/docs.md create mode 100644 docs/dev/front/html.md create mode 100644 docs/dev/front/index.md create mode 100644 docs/dev/front/introduction.md create mode 100644 docs/dev/index.md create mode 100644 docs/dev/outils.md create mode 100644 docs/index.md create mode 100644 docs/snippets/css/base.css create mode 100644 docs/snippets/html/base.html create mode 100644 package.json create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1cc31ff --- /dev/null +++ b/.gitignore @@ -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 diff --git a/README.md b/README.md new file mode 100644 index 0000000..c9e39aa --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# vitepress-starter diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js new file mode 100644 index 0000000..a137be9 --- /dev/null +++ b/docs/.vitepress/config.js @@ -0,0 +1,101 @@ +export default { + lang: "fr", + title: "3W", + titleTemplate: "Support de cours", + description: "C’est 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" + } + } +}; diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css new file mode 100644 index 0000000..4398ba6 --- /dev/null +++ b/docs/.vitepress/theme/custom.css @@ -0,0 +1,3 @@ +:root { + --vp-code-font-size: 0.9375rem; +} diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js new file mode 100644 index 0000000..c495bc1 --- /dev/null +++ b/docs/.vitepress/theme/index.js @@ -0,0 +1,4 @@ +import DefaultTheme from "vitepress/theme"; +import "./custom.css"; + +export default DefaultTheme; diff --git a/docs/design/index.md b/docs/design/index.md new file mode 100644 index 0000000..fc4dc4a --- /dev/null +++ b/docs/design/index.md @@ -0,0 +1,13 @@ +# Design + +cool + +::: info +This is an info box. +::: + +## Introduction + +### definition + +## Getting started \ No newline at end of file diff --git a/docs/dev/B2/html.md b/docs/dev/B2/html.md new file mode 100644 index 0000000..ca01114 --- /dev/null +++ b/docs/dev/B2/html.md @@ -0,0 +1 @@ +# HTML B2 \ No newline at end of file diff --git a/docs/dev/B2/index.md b/docs/dev/B2/index.md new file mode 100644 index 0000000..be747ea --- /dev/null +++ b/docs/dev/B2/index.md @@ -0,0 +1 @@ +# Frontend B2 \ No newline at end of file diff --git a/docs/dev/B2/introduction.md b/docs/dev/B2/introduction.md new file mode 100644 index 0000000..2b38a8a --- /dev/null +++ b/docs/dev/B2/introduction.md @@ -0,0 +1 @@ +# Intro B2 \ No newline at end of file diff --git a/docs/dev/B3/html.md b/docs/dev/B3/html.md new file mode 100644 index 0000000..ca01114 --- /dev/null +++ b/docs/dev/B3/html.md @@ -0,0 +1 @@ +# HTML B2 \ No newline at end of file diff --git a/docs/dev/B3/index.md b/docs/dev/B3/index.md new file mode 100644 index 0000000..0b9a735 --- /dev/null +++ b/docs/dev/B3/index.md @@ -0,0 +1 @@ +# Frontend B3 \ No newline at end of file diff --git a/docs/dev/B3/introduction.md b/docs/dev/B3/introduction.md new file mode 100644 index 0000000..4d0a1a5 --- /dev/null +++ b/docs/dev/B3/introduction.md @@ -0,0 +1 @@ +# Intro B3 \ No newline at end of file diff --git a/docs/dev/code-camp/index.md b/docs/dev/code-camp/index.md new file mode 100644 index 0000000..f9784f0 --- /dev/null +++ b/docs/dev/code-camp/index.md @@ -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 + +- `` = déclaration du type de document +- `` = racine du document, contient tous les autres éléments +- `` = fournit des informations générales (métadonnées) sur le document +- `` = 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 + +- `
` = en-tête +- `