User:Kiara/Code: Difference between revisions

Latest revision as of 13:44, 17 September 2024

This document gathers resources and tutorials to get into web development.
Subjects are ordered from the least to the most complex. The resources inside though, are just pasted here with no specific order.
The links have a title associated to help you find the subjects you want to focus on. Some resources are in french only, it is specified when it's the case, the link is in green.
Be curious, have fun :)

BASIS FOR WEB DEV

First of all, you will have to install VSCode on your computer. In the extensions tab of the software, you will search for LiveServer and download it. You can also browse into the language extensions if you want your interface to not be in English. Now you're ready to go!

Getting Started – The basis of basis

The XPUB page about HTML and CSS!
W3 Schools
MDN (FR) or MDN (EN)
Free Code Camp
Udemy → most courses aren't free, but they often do discount sessions where you can get introduction courses in some languages for free, so I recommend you create an account for free and check it up from time to time ;)
To learn about accessibility
OpenClassrooms (FR) or OpenClassrooms (EN)
Graphikart (FR)

Nice tools to help you code

General
- Can I Use – Up to date browser support for CSS properties, HTML tags, etc.
- Clippy – To crop images with CSS clip-path
- HTML Validator – HTML checker, to see if your code is well written :)
- Convertisseur d'unités (FR)
- DevDocs – Documentation about different languages

About fonts and type
- Wakamai Fondue – What can my font do??
- Base64 encoder – Can be useful for font manipulation
- Modularscale – Scaling type
- Transfonter – Transform otf and ttf into woff, woff2 and svg
- SYMBL – Symbols, unicode, emojis to copy/paste

About colours
- Salmon Olive – Colours accepted by the web
- Coolors – Colour palettes
- Coolors – Contrast checker
- Polypane – Contrast checker
- Contrast ratio – Contrast checker
- Odd contrast – Contrast ratio checker
- Color Hunt – Colour palettes
- Randoma11y – Generate random accessible colour contrasts
- WhoCanUse – To simulate the rendering of colours according to visual impairments
- Accessible color palettes builder
- Accessible colors – Do you meet the WCAG criteria?
- Colorblind webpage filter – To see how a website displays

Not coding but really nice

Texturing – A dithering software
Dither it! – Dither images in your browser

LANGUAGES

HTML

Getting started

HTML tags cheatsheet

Go further

Out of order without JS
Web components

CSS

JAVASCRIPT

Getting started

Beginner JavaScript Notes
JS Syntax (choose your language!)
Apprenez à programmer avec JavaScript (FR)
Vanilla JS 30 days challenge
Beginner JavaScript
5 things designers can do with JS
Browser security bugs that aren't: JavaScript in PDF

Experiments

Scaled prev/next
3D card model

Tools

Scroll to top
Popups
Fabric.js
Paper.js

p5.js
- Website
- Start learning p5.js
- Simple.js – To make p5.js even easier for beginners
- p5.riso
- p5.utils

PHP

Before starting with PHP you will need a server runner like XAMMP or MAMMP. Don't worry, everything is pretty much listed and detailed in the tutorials below.

PHP Manual (choose your language!)
Write your first PHP program
The PHP handbook
PHP syntax: comments, variables, data types
Logical operators in PHP
Method overloading in PHP
Programmez en orienté objet avec PHP (FR)
Playlist vidéo : Apprendre le PHP (FR)

ADDITIONAL SKILLS

RESPONSIVE DESIGN

Responsive webdesign

ACCESSIBILITY

All time resources for pretty much everything accessibility-related

Stephanie Walter's blog (EN)
Blog de Stephanie Walter (FR)
W3C Web Accessibility Initiative

Tutorials

Designing without dark patterns, a guide for designers
Keyboard Accessibility Guide Part 1: HTML + CSS
Keyboard Accessibility Guide Part 2: JavaScript
Standards Guidelines 2022
10 ways to improve accessibility on websites and social media
Note on aria label usage
Introduction to web accessibility
Making an accessibility statement
Getting the WCAG color contrast right
Dialogs and popovers seem similar. How are they different?
Readability guidelines
Accessibilité des PDF (FR)
L’attribut lang, pour rendre la page audible... et compréhensible (FR)
Comment partager une image de façon accessible ? (FR)
Accessibilité : quelles exigences pour les livres numériques ? (FR)
Utiliser prefers-reduced-motion (FR)
RGAA 4.1 (FR - english version in progress)
Contrastes de couleur (FR)
Color contrast

Articles and opinions

“An accessible website won’t be beautiful”… really?!
Accessibility resources, tools, articles and books for designers
Accessibility resources and tools to design inclusive products
Thème sombre, dark mode et mythe d'accessibilité (FR)
Dark mode and accessibility myth
Approach to alt-text
How to pick the least wrong colors

BLOGS & CMS

Eleventy website
Setting up Eleventy
Process Wire website
Process Wire Tutorials
Scribouilli (FR)

OPTIMISATION

Optimiser le chargement des fontes (FR)

@@ Line 1: / Line 1: @@
-This document gathers resources and tutorials to get into web development.
+This document gathers resources and tutorials to get into web development. <br>
-You can display the table of contents via the pad's settings, so you'll get the main subjects. They are ordered from the least to the most complex. The resources inside though, are just pasted here with no specific order.
+Subjects are ordered from the least to the most complex. The resources inside though, are just pasted here with no specific order. <br>
-The links have a title associated to help you find the subjects you want to focus on.
+The links have a title associated to help you find the subjects you want to focus on. Some resources are in french only, it is specified when it's the case, the link is in green. <br>
-Some resources are in french only, it is specified when it's the case, the link is in green.
 Be curious, have fun :)
-=== BASIS FOR WEB DEV ===
+== BASIS FOR WEB DEV ==
 First of all, you will have to install [https://code.visualstudio.com/Download VSCode] on your computer. In the extensions tab of the software, you will search for '''LiveServer''' and download it.
 You can also browse into the language extensions if you want your interface to not be in English.
 Now you're ready to go!
+==== Getting Started – The basis of basis ====
+* [https://pzwiki.wdka.nl/mediadesign/HTML_%2B_CSS The XPUB page about HTML and CSS!]<br>
 * [https://www.w3schools.com/ W3 Schools] <br>
 * [https://developer.mozilla.org/fr/ <span style="color: #5F9EA0;">MDN (FR)</span>] or [https://developer.mozilla.org/fr/ MDN (EN)] <br>
@@ Line 18: / Line 19: @@
 * [https://grafikart.fr/ <span style="color: #5F9EA0;">Graphikart (FR)</span>]
-<big>→ Nice tools to help you code</big> <br>
+==== Nice tools to help you code ====
 * General
 ** [https://caniuse.com/ Can I Use] – Up to date browser support for CSS properties, HTML tags, etc. <br>
 ** [https://bennettfeely.com/clippy/ Clippy] – To crop images with CSS <code>clip-path</code> <br>
 ** [https://validator.w3.org/nu/ HTML Validator] – HTML checker, to see if your code is well written :) <br>
-** [https://outils-css.aliasdmc.fr/convertir-unites-de-longueurs-css.php#bloc-content Convertisseur d'unités (FR)]
+** [https://outils-css.aliasdmc.fr/convertir-unites-de-longueurs-css.php#bloc-content <span style="color: #5F9EA0;">Convertisseur d'unités (FR)</span>]
+** [https://devdocs.io DevDocs] – Documentation about different languages
 * About fonts and type
@@ Line 44: / Line 46: @@
 ** [https://toolness.github.io/accessible-color-matrix/?n=white&n=FF3F59&n=FBE929&n=Color%204&n=Color%205&n=Color%206&v=FFFFFF&v=FF3F59&v=FBE929&v=47FFE0&v=082771&v=0E0E10 Accessible color palettes builder] <br>
 ** [https://accessible-colors.com/ Accessible colors]  – Do you meet the WCAG criteria? <br>
 ** [https://www.toptal.com/designers/colorfilter Colorblind webpage filter]  – To see how a website displays
-<big>→ Not coding but really nice</big> <br>
+==== Not coding but really nice ====
 [https://ivan-murit.fr/project.php?w=texturing&p=download.htm Texturing] – A dithering software <br>
 [https://ditherit.com/ Dither it!] – Dither images in your browser
-=== LANGUAGES ===
+== LANGUAGES ==
-==== HTML ====
+=== HTML ===
-<big>→ Getting started</big> <br>
+==== Getting started ====
 [https://webaim.org/resources/htmlcheatsheet/ HTML tags cheatsheet]
-<big>→ Go further</big> <br>
+==== Go further ====
 [https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/ Out of order without JS] <br>
 [https://hawkticehurst.com/writing/a-year-working-with-html-web-components/ Web components]
+----
-==== CSS ====
+=== CSS ===
-<big>→ Getting started</big> <br>
+==== Getting started ====
 [https://tonsky.me/blog/centering/ Centering things] <br>
 [https://bradfrost.com/blog/post/transparent-borders/ Transparent borders] <br>
@@ Line 68: / Line 71: @@
 [https://www.joshwcomeau.com/css/rules-of-margin-collapse/ The Rules of Margin Collapse]
-<big>→ Tools</big> <br>
+==== Tools ====
 [https://proportio.app/ Tool for creating proportional scales for typography, iconography, spacing, and components in design systems]<br>
 [https://colour-tool.qweb.co.uk/ Create colour palettes based one input colour] <br>
@@ Line 78: / Line 81: @@
 [https://codepen.io/cadars/pen/PoJGMNP Image slideshow]
-<big>→ CSS-print</big>
+==== CSS-print ====
 * paged.js
 ** [https://pagedjs.org/about/ Website] <br>
 ** [https://gitlab.coko.foundation/pagedjs/pagedjs-templates/ukulele-demo Demo] <br>
-** <span style="color: #5F9EA0;">[https://sarahgarcin.com/workshops/coding-cooking/web2print.html Introduction à paged.js par Sarah Garcin (FR)]</span> <br>
+** [https://sarahgarcin.com/workshops/coding-cooking/web2print.html <span style="color: #5F9EA0;">Introduction à paged.js par Sarah Garcin (FR)</span>] <br>
-** <span style="color: #5F9EA0;">[https://ateliers.esad-pyrenees.fr/web/pages/ressources/ctrl-alt-print/pagedjs/ Introduction à paged.js par Julien Bidoret (FR)]</span> <br>
+** [https://ateliers.esad-pyrenees.fr/web/pages/ressources/ctrl-alt-print/pagedjs/ <span style="color: #5F9EA0;">Introduction à paged.js par Julien Bidoret (FR)</span>] <br>
-** <span style="color: #5F9EA0;">[https://bookolab.coalitioncyborg.org/?utm_source=pocket_saves Bookolab (FR)]</span> <br>
+** [https://bookolab.coalitioncyborg.org/?utm_source=pocket_saves <span style="color: #5F9EA0;">Bookolab (FR)</span>] <br>
 ** [https://gitlab.coko.foundation/pagedjs/pagedjs-plugins/booklet-imposition paged.js plugin: Booklet imposition] <br>
 ** [https://gitlab.com/pagedjs-plugins/full-page paged.js plugin: Full page elements] <br>
@@ Line 93: / Line 96: @@
 ** [https://pypi.org/project/pagebot/ Pagebot] <br>
 ** [https://gitlab.com/quentinjuhel/collabprint/-/tree/main/ CollabPrint (ether2html)] <br>
-** [https://eyssette.forge.aeif.fr/a4/ Markdown2html2print (FR)] <br>
+** [https://eyssette.forge.aeif.fr/a4/ <span style="color: #5F9EA0;">Markdown2html2print (FR)</span>] <br>
 ** [[Imposition|XPUB imposition tools]] <br>
-** [https://gitlab.com/cestabrupt/gabarit-abrupt Gabarit Abrüpt Pandoc (FR)]
+** [https://gitlab.com/cestabrupt/gabarit-abrupt <span style="color: #5F9EA0;">Gabarit Abrüpt Pandoc (FR)</span>]
 * General helping for CSS-print
@@ Line 113: / Line 116: @@
 ** [https://gitlab.com/quentinjuhel/Bookletor Bash script for imposition]
-<big>→ Go further</big> <br>
+==== Go further ====
 [https://drafts.csswg.org/css-values-4/#viewport-relative-lengths CSS Values and Units]  <br>
 [https://www.smashingmagazine.com/2024/01/css-border-image-property/ The CSS <code>border-image</code> property] <br>
@@ Line 124: / Line 127: @@
 <span style="color: #5F9EA0;">[https://developer.mozilla.org/fr/docs/Web/CSS/At-rule At-rules (FR)]</span> <br>
 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries Media queries] <br>
-<code>[https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation @media]</code> [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation orientation] <br>
+[https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation <code>@media</code> orientation] <br>
-<code><span style="color: #5F9EA0;">[https://developer.mozilla.org/fr/docs/Web/CSS/@media/orientation @media]</span></code> <span style="color: #5F9EA0;">[https://developer.mozilla.org/fr/docs/Web/CSS/@media/orientation orientation (FR)]</span> <br>
+[https://developer.mozilla.org/fr/docs/Web/CSS/@media/orientation <span style="color: #5F9EA0;"><code>@media</code> orientation (FR)</span>] <br>
 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries CSS container queries] <br>
 [https://css.oddbird.net/rwd/query/explainer/ CSS Container Query Proposal & Explainer] <br>
 [https://www.w3.org/TR/css-contain-3/#container-queries W3C Guide to container queries] <br>
-<span style="color: #5F9EA0;">[https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries Utiliser les media queries (FR)]</span> <br>
+[https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries <span style="color: #5F9EA0;">Utiliser les media queries (FR)</span>] <br>
 [https://web.dev/blog/state-of-css-2022#container-queries State of CSS 2022] <br>
-<span style="color: #5F9EA0;">[https://web.dev/blog/align-content-block?hl=fr La propriété <code>align-content</code> pour les mises en page de blocs (FR)]</span> <br>
+[https://web.dev/blog/align-content-block?hl=fr <span style="color: #5F9EA0;">La propriété <code>align-content</code> pour les mises en page de blocs (FR)</span>] <br>
-<span style="color: #5F9EA0;">[https://toutcequibouge.net/blog/2024/04/panorama-de-techniques-css-parfois-meconnues-des-designers/ Techniques CSS méconnues des designers (FR)]</span> <br>
+[https://toutcequibouge.net/blog/2024/04/panorama-de-techniques-css-parfois-meconnues-des-designers/ <span style="color: #5F9EA0;">Techniques CSS parfois méconnues des designers (FR)</span>] <br>
-<span style="color: #5F9EA0;">[https://vincent-valentin.name/articles/un-fallback-pour-les-valeurs-portees-par-des-css-vars Un fallback pour les valeurs portées par des CSS vars (FR)]</span> <br>
+[https://vincent-valentin.name/articles/un-fallback-pour-les-valeurs-portees-par-des-css-vars <span style="color: #5F9EA0;">Un fallback pour les valeurs portées par des CSS vars (FR)</span>] <br>
-<span style="color: #5F9EA0;">[https://vincent-valentin.name/articles/un-rognage-rectangulaire-arrondi Rognage rectangulaire arrondi (FR)]</span>
+[https://vincent-valentin.name/articles/un-rognage-rectangulaire-arrondi <span style="color: #5F9EA0;">Rognage rectangulaire arrondi (FR)</span>]
-<big>→ Resources (blogs, etc. about CSS (upcoming) features)</big> <br>
+==== Resources (blogs, etc. about CSS (upcoming) features) ====
-The Cascade – https://csscade.com/ <br>
+[https://csscade.com/ The Cascade] <br>
-Mistakes that have been made when CSS was created – https://wiki.csswg.org/ideas/mistakes <br>
+[https://wiki.csswg.org/ideas/mistakes Mistakes that have been made when CSS was created] <br>
-An exploration of the pain points that CSS gap solves – https://ishadeed.com/article/the-gap/ <br>
+[https://ishadeed.com/article/the-gap/ An exploration of the pain points that CSS gap solves] <br>
-Do we need CSS <code>flex-wrap</code> detection? – https://ishadeed.com/article/flex-wrap-detect/ <br>
+[https://ishadeed.com/article/flex-wrap-detect/ Do we need CSS <code>flex-wrap</code> detection?] <br>
-New Viewport Units – https://ishadeed.com/article/new-viewport-units/ <br>
+[https://ishadeed.com/article/new-viewport-units/ New Viewport Units] <br>
-On compliance vs readability: Generating text colors with CSS – https://lea.verou.me/blog/2024/contrast-color/ <br>
+[https://lea.verou.me/blog/2024/contrast-color/ On compliance vs readability: Generating text colors with CSS] <br>
-Custom properties with defaults: 3+1 strategies – https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/ <br>
+[https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/ Custom properties with defaults: 3+1 strategies] <br>
-Modern CSS One-Line Upgrades – https://moderncss.dev/12-modern-css-one-line-upgrades/ <br>
+[https://moderncss.dev/12-modern-css-one-line-upgrades/ 12 Modern CSS One-Line Upgrades] <br>
-Modern CSS For Dynamic Component-Based Architecture – https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ <br>
+[https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ Modern CSS For Dynamic Component-Based Architecture] <br>
-Heuristics to Simplify Design Decision-Making – https://www.betterbydesign.cc/p/10-heuristics-to-simplify-design <br>
+[https://www.betterbydesign.cc/p/10-heuristics-to-simplify-design 10 Heuristics to Simplify Design Decision-Making] <br>
-List of links about container queries – https://github.com/sturobson/Awesome-Container-Queries <br>
+[https://github.com/sturobson/Awesome-Container-Queries List of links about container queries] <br>
-Modern CSS in real life – https://chriscoyier.net/2023/06/06/modern-css-in-real-life/
+[https://chriscoyier.net/2023/06/06/modern-css-in-real-life/ Modern CSS in real life] <br>
+----
-==== 2.3 JAVASCRIPT ====
+=== JAVASCRIPT ===
-<big>→ Getting started</big> <br>
+==== Getting started ====
 [https://wesbos.com/javascript?ref=sidebar Beginner JavaScript Notes] <br>
 [https://fr.wikipedia.org/wiki/Syntaxe_JavaScript JS Syntax (choose your language!)] <br>
-<span style="color: #5F9EA0;">[https://openclassrooms.com/fr/courses/7696886-apprenez-a-programmer-avec-javascript?archived-source=6175841 Apprenez à programmer avec JavaScript (FR)]</span> <br>
+[https://openclassrooms.com/fr/courses/7696886-apprenez-a-programmer-avec-javascript?archived-source=6175841 <span style="color: #5F9EA0;">Apprenez à programmer avec JavaScript (FR)</span>] <br>
 [https://javascript30.com/ Vanilla JS 30 days challenge] <br>
 [https://beginnerjavascript.com/ Beginner JavaScript] <br>
@@ Line 160: / Line 164: @@
 [https://textslashplain.com/2024/04/10/browser-security-bugs-that-arent-javascript-in-pdf/ Browser security bugs that aren't: JavaScript in PDF]
-<big>→ Experiments</big> <br>
+==== Experiments ====
 [https://codepen.io/esadpyrenees/pen/xxJbjmO Scaled prev/next] <br>
 [https://glitch.com/~3d-card-model-viewer 3D card model]
-<big>→ Tools</big> <br>
+==== Tools ====
 [https://www.w3schools.com/jsref/prop_element_scrolltop.asp Scroll to top] <br>
 [https://www.w3schools.com/howto/howto_js_popup.asp Popups] <br>
@@ Line 175: / Line 179: @@
 ** [https://github.com/makeyourownalgorithmicart/simple.js/wiki Simple.js] – To make p5.js even easier for beginners <br>
 ** [https://antiboredom.github.io/p5.riso/ p5.riso] <br>
-** [https://github.com/alptugan/p5.utils p5.utils]
+** [https://github.com/alptugan/p5.utils p5.utils] <br>
+----
-==== 2.4 PHP ====
+=== PHP ===
 Before starting with PHP you will need a server runner like XAMMP or MAMMP. Don't worry, everything is pretty much listed and detailed in the tutorials below.
@@ Line 187: / Line 192: @@
 [https://www.freecodecamp.org/news/method-overloading-in-php/ Method overloading in PHP] <br>
 [https://openclassrooms.com/fr/courses/1665806-programmez-en-oriente-objet-en-php/7306631-tirez-un-maximum-de-ce-cours <span style="color: #5F9EA0;">Programmez en orienté objet avec PHP (FR)</span>] <br>
-[https://www.youtube.com/watch?v=cWoq5znh0vw&list=PLjwdMgw5TTLVDv-ceONHM_C19dPW1MAMD Playlist vidéo : Apprendre le PHP (FR)]
+[https://www.youtube.com/watch?v=cWoq5znh0vw&list=PLjwdMgw5TTLVDv-ceONHM_C19dPW1MAMD <span style="color: #5F9EA0;">Playlist vidéo : Apprendre le PHP (FR)</span>]
-=== 3. ADDITIONAL SKILLS ===
+== ADDITIONAL SKILLS ==
-==== 3.1 RESPONSIVE DESIGN ====
+=== RESPONSIVE DESIGN ===
 [https://www.freecodecamp.org/learn/2022/responsive-web-design/ Responsive webdesign]
-==== 3.2 ACCESSIBILITY ====
+=== ACCESSIBILITY ===
-<big>→ All time resources for pretty much everything accessibility-related</big> <br>
+==== All time resources for pretty much everything accessibility-related ====
 [https://stephaniewalter.design/blog/ Stephanie Walter's blog (EN)] <br>
 [https://stephaniewalter.design/fr/blog/ <span style="color: #5F9EA0;">Blog de Stephanie Walter (FR)</span>] <br>
 [https://www.w3.org/WAI/fundamentals/ W3C Web Accessibility Initiative]
-<big>→ Tutorials</big> <br>
+==== Tutorials ====
 [https://beta.designersethiques.org/en/thematique-design-persuasif/concevoir-sans-dark-patterns Designing without dark patterns, a guide for designers] <br>
 [https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/ Keyboard Accessibility Guide Part 1: HTML + CSS] <br>
@@ Line 220: / Line 225: @@
 [https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast Color contrast]
-<big>→ Articles and opinions</big> <br>
+==== Articles and opinions ====
 [https://medium.com/@chiaracielo/an-accessible-website-wont-be-beautiful-really-076802c79e90 “An accessible website won’t be beautiful”… really?!] <br>
 [https://stephaniewalter.design/blog/accessibility-resources-tools-articles-books-for-designer/ Accessibility resources, tools, articles and books for designers] <br>
@@ Line 227: / Line 232: @@
 [https://stephaniewalter.design/blog/dark-mode-accessibility-myth-debunked/ Dark mode and accessibility myth] <br>
 [https://adrianroselli.com/2024/05/my-approach-to-alt-text.html Approach to alt-text] <br>
 [https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/ How to pick the least wrong colors]
-==== 3.3 BLOGS & CMS ====
+=== BLOGS & CMS ===
 [https://www.11ty.dev Eleventy website] <br>
 [https://anhvn.com/posts/2024/my-eleventy-site-setup/ Setting up Eleventy] <br>
 [https://processwire.com/ Process Wire website] <br>
 [https://youtube.com/playlist?list=PLbrh75U7tpN97Gs_GQcyz1FiXsLnG_W-Q&si=kLNDhVoUSnz1HKBH Process Wire Tutorials] <br>
 [https://scribouilli.org/ <span style="color: #5F9EA0;">Scribouilli (FR)</span>]
-==== 3.4 OPTIMISATION ====
+=== OPTIMISATION ===
 [https://www.julienpradet.fr/tutoriels/optimiser-le-chargement-des-fonts/ <span style="color: #5F9EA0;">Optimiser le chargement des fontes (FR)</span>]