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.
 Be curious, have fun :)
+== BASIS FOR WEB DEV ==
-=== 1. 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.
-First of all, you will have to install VSCode https://code.visualstudio.com/Download 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.
-You can also browse into the language extensions if you want your interface to not be in english.
 Now you're ready to go!
-- W3 Schools [https://www.w3schools.com/]
+==== Getting Started – The basis of basis ====
-- MDN [https://developer.mozilla.org/fr/ or https://developer.mozilla.org/en-US/]
+* [https://pzwiki.wdka.nl/mediadesign/HTML_%2B_CSS The XPUB page about HTML and CSS!]<br>
-- Free Code Camp [https://www.freecodecamp.org/]
+* [https://www.w3schools.com/ W3 Schools] <br>
-- Udemy [https://www.udemy.com/] → 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 ;)
+* [https://developer.mozilla.org/fr/ <span style="color: #5F9EA0;">MDN (FR)</span>] or [https://developer.mozilla.org/fr/ MDN (EN)] <br>
-- Learn about accessibility [https://practical-accessibility.today/]
+* [https://www.freecodecamp.org/ Free Code Camp] <br>
-- OpenClassrooms (FR + EN) [https://openclassrooms.com/en/]
+* [https://www.udemy.com/ Udemy] <small>→ 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 ;)</small> <br>
-- Graphikart (FR) [https://grafikart.fr/]
+* [https://practical-accessibility.today/ To learn about accessibility] <br>
+* [https://openclassrooms.com/fr/ <span style="color: #5F9EA0;">OpenClassrooms (FR)</span>] or [https://openclassrooms.com/en/ OpenClassrooms (EN)] <br>
-→ Nice tools to help you code
+* [https://grafikart.fr/ <span style="color: #5F9EA0;">Graphikart (FR)</span>]
-- Can I Use - up to date browser support for CSS properties, HTML tags, etc. https://caniuse.com/
-- Clippy - to help you crop images with CSS clip-path https://bennettfeely.com/clippy/
-- HTML checker, to see if your code is well written :) https://validator.w3.org/nu/
-- Convertisseur d'unités (FR) https://outils-css.aliasdmc.fr/convertir-unites-de-longueurs-css.php?px=16&absolute=16&type=absolute&find=13%2C5&typefind=px&finddpi=96#bloc-convertir
-    About fonts and type
+==== Nice tools to help you code ====
-    - Wakamai Fondue - what can my font do?? https://wakamaifondue.com/
+* General
-    - Base64 encoder (can be useful for font manipulation) https://www.giftofspeed.com/base64-encoder/
+** [https://caniuse.com/ Can I Use] – Up to date browser support for CSS properties, HTML tags, etc. <br>
-    - Modularscale - scaling type https://www.modularscale.com/
+** [https://bennettfeely.com/clippy/ Clippy] – To crop images with CSS <code>clip-path</code> <br>
-    - Transfonter - to transform otf and ttf into woff, woff2 and svg https://transfonter.org/
+** [https://validator.w3.org/nu/ HTML Validator] – HTML checker, to see if your code is well written :) <br>
-    - SYMBL (choose your language!) https://symbl.cc/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 colours
+* About fonts and type
-    - Coolors - colour palettes https://coolors.co/?home
+** [https://wakamaifondue.com/ Wakamai Fondue] – What can my font do?? <br>
-    - Coolors contrast checker https://coolors.co/contrast-checker/c801ff-0e0e10
+** [https://www.giftofspeed.com/base64-encoder/ Base64 encoder] – Can be useful for font manipulation <br>
-    - Polypane contrast checker https://polypane.app/color-contrast/#fg=%23107db5&bg=%23fff&level=aa&format=rgb&algo=WCAG2&filter=none
+** [https://www.modularscale.com/ Modularscale] – Scaling type <br>
-    - Contrast ratio https://www.siegemedia.com/contrast-ratio
+** [https://transfonter.org/ Transfonter] – Transform otf and ttf into woff, woff2 and svg <br>
-    - Odd contrast - contrast ratio checker https://www.oddcontrast.com/#hex__*132b77__*ffa8c1
+** [https://symbl.cc/fr/ SYMBL]  – Symbols, unicode, emojis to copy/paste
-    - Salmon Olive - colours accepted by the web https://raphaelbastide.com/salmon-olive/
-    - Color Hunt - colour palettes https://colorhunt.co/
-    - Randoma11y - generate random accessible colour contrasts https://randoma11y.com/
-    - WhoCanUse - to simulate the rendering of colours according to visual impairments https://www.whocanuse.com/?bg=993333&fg=ffffff&fs=16&fw=
-    - Accessible colour palettes builder 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 colors - do you meet the WCAG criteria? https://accessible-colors.com/
-    - Colorblind webpage filter - to see how a website displays https://www.toptal.com/designers/colorfilter
-→ Not coding but really nice
+* About colours
-- Texturing - a dithering software https://ivan-murit.fr/project.php?w=texturing&p=download.htm
+** [https://raphaelbastide.com/salmon-olive/ Salmon Olive] – Colours accepted by the web <br>
-- Dither it! - dither images in your browser https://ditherit.com/
+** [https://coolors.co/?home Coolors]  – Colour palettes <br>
+** [https://coolors.co/contrast-checker/c801ff-0e0e10 Coolors]  – Contrast checker <br>
+** [https://polypane.app/color-contrast/#fg=%23107db5&bg=%23fff&level=aa&format=rgb&algo=WCAG2&filter=none Polypane]  – Contrast checker <br>
+** [https://www.siegemedia.com/contrast-ratio Contrast ratio] – Contrast checker<br>
+** [https://www.oddcontrast.com/#p3__color(display-p3_0.0967_0.167_0.4494)__color(display-p3_0.951_0.675_0.7569) Odd contrast] – Contrast ratio checker <br>
+** [https://colorhunt.co/ Color Hunt] – Colour palettes <br>
+** [https://randoma11y.com/ Randoma11y]  – Generate random accessible colour contrasts <br>
+** [https://www.whocanuse.com/ WhoCanUse]  – To simulate the rendering of colours according to visual impairments <br>
+** [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
-=== 2. LANGUAGES ===
+==== Not coding but really nice ====
-==== 2.1 HTML ====
+[https://ivan-murit.fr/project.php?w=texturing&p=download.htm Texturing] – A dithering software <br>
-→ Getting started
+[https://ditherit.com/ Dither it!] – Dither images in your browser
-- HTML tags cheatsheet https://webaim.org/resources/htmlcheatsheet/
-→ Go further
+== LANGUAGES ==
-- Out of order without JS https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/
+=== HTML ===
-- Web components https://hawkticehurst.com/writing/a-year-working-with-html-web-components/
+==== Getting started ====
+[https://webaim.org/resources/htmlcheatsheet/ HTML tags cheatsheet]
-==== 2.2 CSS ====
+==== Go further ====
-→ Getting started
+[https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/ Out of order without JS] <br>
-- Centering https://tonsky.me/blog/centering/
+[https://hawkticehurst.com/writing/a-year-working-with-html-web-components/ Web components]
-- Transparent borders https://bradfrost.com/blog/post/transparent-borders/
+----
-- An interactive guide to CSS grids https://www.joshwcomeau.com/css/interactive-guide-to-grid/
-- A more modern CSS reset https://piccalil.li/blog/a-more-modern-css-reset/
-- @font-face rule https://fullystacked.net/new-font-face-syntax/
-- The Rules of Margin Collapse https://www.joshwcomeau.com/css/rules-of-margin-collapse/
-→ Tools
+=== CSS ===
-- Tool for creating proportional scales for typography, iconography, spacing, and components in design systems https://proportio.app/
+==== Getting started ====
-- To create colour palettes based one input colour https://colour-tool.qweb.co.uk/
+[https://tonsky.me/blog/centering/ Centering things] <br>
-- Loaders https://css-loaders.com/
+[https://bradfrost.com/blog/post/transparent-borders/ Transparent borders] <br>
-- Gives you the CSS you need to draw some shapes https://css-shape.com/
+[https://www.joshwcomeau.com/css/interactive-guide-to-grid/ An interactive guide to CSS grids] <br>
-- Help with responsive and scaling https://utopia.fyi/blog/clamp-calculator/
+[https://piccalil.li/blog/a-more-modern-css-reset/ A more modern CSS reset] <br>
-- Fancy SVG filters https://www.stefanjudis.com/blog/fancy-svg-filters/
+[https://fullystacked.net/new-font-face-syntax/ <code>@font-face</code> rule] <br>
-- Flex layouts https://getbootstrap.com/docs/4.0/utilities/flex/
+[https://www.joshwcomeau.com/css/rules-of-margin-collapse/ The Rules of Margin Collapse]
-- Image slideshow https://codepen.io/cadars/pen/PoJGMNP
-→ CSS-print
+==== Tools ====
-    paged.js
+[https://proportio.app/ Tool for creating proportional scales for typography, iconography, spacing, and components in design systems]<br>
-    - paged.js website https://pagedjs.org/about/
+[https://colour-tool.qweb.co.uk/ Create colour palettes based one input colour] <br>
-    - paged.js demo https://gitlab.coko.foundation/pagedjs/pagedjs-templates/ukulele-demo
+[https://css-loaders.com/ CSS Loaders] <br>
-    - Rapide introduction au CSS-print (FR) https://sarahgarcin.com/workshops/coding-cooking/web2print.html
+[https://css-shape.com/ Shapes translated into CSS] <br>
-    - Encore une intro au CSS-print (FR) https://ateliers.esad-pyrenees.fr/web/pages/ressources/ctrl-alt-print/pagedjs/
+[https://utopia.fyi/blog/clamp-calculator/ Help with responsive and scaling] <br>
-    - Bookolab (FR) https://bookolab.coalitioncyborg.org/?utm_source=pocket_saves
+[https://www.stefanjudis.com/blog/fancy-svg-filters/ Fancy SVG filters] <br>
-    - Add a map to your book https://gitlab.coko.foundation/pagedjs/book-of-cook/-/blob/main/public/examples/map.html
+[https://getbootstrap.com/docs/4.0/utilities/flex/ Flex layouts] <br>
-    - Booklet imposition https://gitlab.coko.foundation/pagedjs/pagedjs-plugins/booklet-imposition
+[https://codepen.io/cadars/pen/PoJGMNP Image slideshow]
-    - Full page elements https://gitlab.com/pagedjs-plugins/full-page
-    - Reload in place https://gitlab.com/nicolastaf/pagedjs-reload-in-place/-/blob/master/reload-in-place.js
-    Other layout tools
+==== CSS-print ====
-    - Pagebot https://pypi.org/project/pagebot/
+* paged.js
-    - CollabPrint (ether2html) https://gitlab.com/quentinjuhel/collabprint/-/tree/main/
+** [https://pagedjs.org/about/ Website] <br>
-    - Markdown2html2print (FR) https://eyssette.forge.aeif.fr/a4/
+** [https://gitlab.coko.foundation/pagedjs/pagedjs-templates/ukulele-demo Demo] <br>
-    - XPUB imposition tools https://pzwiki.wdka.nl/mediadesign/Imposition
+** [https://sarahgarcin.com/workshops/coding-cooking/web2print.html <span style="color: #5F9EA0;">Introduction à paged.js par Sarah Garcin (FR)</span>] <br>
-    - Gabarit Abrüpt Pandoc (FR) https://gitlab.com/cestabrupt/gabarit-abrupt
+** [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>
+** [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>
+** [https://gitlab.com/nicolastaf/pagedjs-reload-in-place/-/blob/master/reload-in-place.js paged.js plugin: Reload in place] <br>
+** [https://gitlab.coko.foundation/pagedjs/book-of-cook/-/blob/main/public/examples/map.html paged.js plugin: Add a map to your book]
-    - Baseline https://csscade.com/baseline/
+* Other layout tools
-    - Breaking words https://adrianroselli.com/2024/02/techniques-to-break-words.html
+** [https://pypi.org/project/pagebot/ Pagebot] <br>
-    - Hanging punctuation https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation
+** [https://gitlab.com/quentinjuhel/collabprint/-/tree/main/ CollabPrint (ether2html)] <br>
-    - Container queries https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/
+** [https://eyssette.forge.aeif.fr/a4/ <span style="color: #5F9EA0;">Markdown2html2print (FR)</span>] <br>
-    - Baseline grids https://maketypework.com/web-typography-baseline-grids-made-easy/
+** [[Imposition|XPUB imposition tools]] <br>
-    - Colour speration when generating PDF https://gitlab.constantvzw.org/osp/tools.pdfutils
+** [https://gitlab.com/cestabrupt/gabarit-abrupt <span style="color: #5F9EA0;">Gabarit Abrüpt Pandoc (FR)</span>]
-    - Nuclear Anchored Sidenotes https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/?utm_source=pocket_shared
-    - Text-balancer https://codeberg.org/da/text-balancer
-    - target-counter() for pagination https://www.oxygenxml.com/doc/versions/24.1/ug-authorEclipse/topics/dg-target-counter-function.html
-    - Hyphenopoly https://github.com/mnater/Hyphenopoly
-    → Advanced level
+* General helping for CSS-print
-    - Make your PDF press ready https://github.com/vibranthq/press-ready
+** [https://csscade.com/baseline/ Baseline] <br>
-    - Bash script for imposition https://gitlab.com/quentinjuhel/Bookletor
+** [https://adrianroselli.com/2024/02/techniques-to-break-words.html Breaking words] <br>
+** [https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation Hanging punctuation] <br>
+** [https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/ Container queries] <br>
+** [https://maketypework.com/web-typography-baseline-grids-made-easy/ Baseline grids] <br>
+** [https://gitlab.constantvzw.org/osp/tools.pdfutils Colour speration when exporting to PDF] <br>
+** [https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/?utm_source=pocket_shared Nuclear Anchored Sidenotes] <br>
+** [https://codeberg.org/da/text-balancer Text-balancer] <br>
+** [https://www.oxygenxml.com/doc/versions/24.1/ug-authorEclipse/topics/dg-target-counter-function.html <code>target-counter()</code> for pagination]<br>
+** [https://github.com/mnater/Hyphenopoly Hyphenopoly]
-    Some culture
+* Advanced level
-    - Mistakes that have been made when CSS was created https://wiki.csswg.org/ideas/mistakes
+** [https://github.com/vibranthq/press-ready Make your PDF press ready] <br>
+** [https://gitlab.com/quentinjuhel/Bookletor Bash script for imposition]
-→ Go further
+==== Go further ====
-- CSS Values and Units https://drafts.csswg.org/css-values-4/#viewport-relative-lengths
+[https://drafts.csswg.org/css-values-4/#viewport-relative-lengths CSS Values and Units]  <br>
-- The CSS border-image property https://www.smashingmagazine.com/2024/01/css-border-image-property/
+[https://www.smashingmagazine.com/2024/01/css-border-image-property/ The CSS <code>border-image</code> property] <br>
-- Better context menus with safe triangles https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/
+[https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/ Better context menus with safe triangles] <br>
-- Lines to connect elements with CSS anchor positioning https://frontendmasters.com/blog/drawing-a-line-to-connect-elements-with-css-anchor-positioning/
+[https://frontendmasters.com/blog/drawing-a-line-to-connect-elements-with-css-anchor-positioning/ Lines to connect elements with CSS anchor positioning] <br>
-- where() to replace complex multi-selectors https://helloanselm.com/writings/css-where-to-replace-complex-multi-selectors
+<code>[https://helloanselm.com/writings/css-where-to-replace-complex-multi-selectors where()]</code> [https://helloanselm.com/writings/css-where-to-replace-complex-multi-selectors to replace complex multi-selectors] <br>
-- "A powerful CSS display property that no one talks about" https://www.youtube.com/watch?v=cs37yx73b1o
+[https://www.youtube.com/watch?v=cs37yx73b1o Video: A powerful CSS display property that no one talks about] <br>
-- "Stop fighting with CSS positioning" https://www.youtube.com/watch?v=86nTToBm2uQ
+[https://www.youtube.com/watch?v=86nTToBm2uQ Video: Stop fighting with CSS positioning] <br>
-- At-rules https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
+[https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule At-rules] <br>
-- At-rules (FR) https://developer.mozilla.org/fr/docs/Web/CSS/At-rule
+<span style="color: #5F9EA0;">[https://developer.mozilla.org/fr/docs/Web/CSS/At-rule At-rules (FR)]</span> <br>
-- Media queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
+[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries Media queries] <br>
-- @media orientation https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
+[https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation <code>@media</code> orientation] <br>
-- @media orientation (FR) https://developer.mozilla.org/fr/docs/Web/CSS/@media/orientation
+[https://developer.mozilla.org/fr/docs/Web/CSS/@media/orientation <span style="color: #5F9EA0;"><code>@media</code> orientation (FR)</span>] <br>
-- CSS container queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
+[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries CSS container queries] <br>
-- CSS Container Query Proposal & Explainer https://css.oddbird.net/rwd/query/explainer/
+[https://css.oddbird.net/rwd/query/explainer/ CSS Container Query Proposal & Explainer] <br>
-- W3C Guide to container queries https://www.w3.org/TR/css-contain-3/#container-queries
+[https://www.w3.org/TR/css-contain-3/#container-queries W3C Guide to container queries] <br>
-- Utiliser les media queries (FR) https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries
+[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>
-- State of CSS 2022 https://web.dev/blog/state-of-css-2022#container-queries
+[https://web.dev/blog/state-of-css-2022#container-queries State of CSS 2022] <br>
-- La propriété align-content pour les mises en page de blocs (FR) https://web.dev/blog/align-content-block?hl=fr
+[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>
-- Techniques CSS méconnues des designers (FR) https://toutcequibouge.net/blog/2024/04/panorama-de-techniques-css-parfois-meconnues-des-designers/
+[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>
-- Un fallback pour les valeurs portées par des CSS vars (FR) https://vincent-valentin.name/articles/un-fallback-pour-les-valeurs-portees-par-des-css-vars
+[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>
-- Rognage rectangulaire arrondi (FR) https://vincent-valentin.name/articles/un-rognage-rectangulaire-arrondi
+[https://vincent-valentin.name/articles/un-rognage-rectangulaire-arrondi <span style="color: #5F9EA0;">Rognage rectangulaire arrondi (FR)</span>]
-→ Resources (blogs, etc. about CSS (upcoming) features)
+==== Resources (blogs, etc. about CSS (upcoming) features) ====
-- The Cascade https://csscade.com/
+[https://csscade.com/ The Cascade] <br>
-- An exploration of the pain points that CSS gap solves. https://ishadeed.com/article/the-gap/
+[https://wiki.csswg.org/ideas/mistakes Mistakes that have been made when CSS was created] <br>
-- Do we need CSS flex-wrap detection? https://ishadeed.com/article/flex-wrap-detect/
+[https://ishadeed.com/article/the-gap/ An exploration of the pain points that CSS gap solves] <br>
-- New Viewport Units https://ishadeed.com/article/new-viewport-units/
+[https://ishadeed.com/article/flex-wrap-detect/ Do we need CSS <code>flex-wrap</code> detection?] <br>
-- On compliance vs readability: Generating text colors with CSS https://lea.verou.me/blog/2024/contrast-color/
+[https://ishadeed.com/article/new-viewport-units/ New Viewport Units] <br>
-- Custom properties with defaults: 3+1 strategies https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/
+[https://lea.verou.me/blog/2024/contrast-color/ On compliance vs readability: Generating text colors with CSS] <br>
-- 12 Modern CSS One-Line Upgrades https://moderncss.dev/12-modern-css-one-line-upgrades/
+[https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/ Custom properties with defaults: 3+1 strategies] <br>
-- Modern CSS For Dynamic Component-Based Architecture https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/
+[https://moderncss.dev/12-modern-css-one-line-upgrades/ 12 Modern CSS One-Line Upgrades] <br>
-- 10 Heuristics to Simplify Design Decision-Making https://www.betterbydesign.cc/p/10-heuristics-to-simplify-design
+[https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ Modern CSS For Dynamic Component-Based Architecture] <br>
-- List of links about container queries https://github.com/sturobson/Awesome-Container-Queries
+[https://www.betterbydesign.cc/p/10-heuristics-to-simplify-design 10 Heuristics to Simplify Design Decision-Making] <br>
-- Modern CSS in real life https://chriscoyier.net/2023/06/06/modern-css-in-real-life/
+[https://github.com/sturobson/Awesome-Container-Queries List of links about container queries] <br>
+[https://chriscoyier.net/2023/06/06/modern-css-in-real-life/ Modern CSS in real life] <br>
+----
-==== 2.3 JAVASCRIPT ====
+=== JAVASCRIPT ===
-→ Getting started
+==== Getting started ====
-- Beginner JavaScript Notes https://wesbos.com/javascript?ref=sidebar
+[https://wesbos.com/javascript?ref=sidebar Beginner JavaScript Notes] <br>
-- JS Syntax (choose your language!) https://fr.wikipedia.org/wiki/Syntaxe_JavaScript
+[https://fr.wikipedia.org/wiki/Syntaxe_JavaScript JS Syntax (choose your language!)] <br>
-- Apprenez à programmer avec JavaScript (FR) https://openclassrooms.com/fr/courses/7696886-apprenez-a-programmer-avec-javascript?archived-source=6175841
+[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>
-- Vanilla JS 30 days challenge https://javascript30.com/
+[https://javascript30.com/ Vanilla JS 30 days challenge] <br>
-- Beginner JavaScript https://beginnerjavascript.com/
+[https://beginnerjavascript.com/ Beginner JavaScript] <br>
-- "5 things designers can do with JS" https://frontendmasters.com/blog/5-things-designers-can-do-with-javascript/
+[https://frontendmasters.com/blog/5-things-designers-can-do-with-javascript/ 5 things designers can do with JS] <br>
-- "Browser security bugs that aren't: JavaScript in PDF" https://textslashplain.com/2024/04/10/browser-security-bugs-that-arent-javascript-in-pdf/
+[https://textslashplain.com/2024/04/10/browser-security-bugs-that-arent-javascript-in-pdf/ Browser security bugs that aren't: JavaScript in PDF]
-→ Experiments
+==== Experiments ====
-- "Scaled prev/next" https://codepen.io/esadpyrenees/pen/xxJbjmO
+[https://codepen.io/esadpyrenees/pen/xxJbjmO Scaled prev/next] <br>
-- 3D card model https://glitch.com/~3d-card-model-viewer
+[https://glitch.com/~3d-card-model-viewer 3D card model]
-→ Tools
+==== Tools ====
-- Scroll to top https://www.w3schools.com/jsref/prop_element_scrolltop.asp
+[https://www.w3schools.com/jsref/prop_element_scrolltop.asp Scroll to top] <br>
-- Popups https://www.w3schools.com/howto/howto_js_popup.asp
+[https://www.w3schools.com/howto/howto_js_popup.asp Popups] <br>
-- Fabric.js http://fabricjs.com/
+[http://fabricjs.com/ Fabric.js] <br>
-- Paper.js http://paperjs.org/examples/
+[http://paperjs.org/examples/ Paper.js]
-    P5.js
+* p5.js
-    - p5.js website https://p5js.org/
+** [https://p5js.org/ Website] <br>
-    - Start learning P5.js https://youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&si=xYq63Ur6jL8zNo-C
+** [https://youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&si=xYq63Ur6jL8zNo-C Start learning p5.js] <br>
-    - Simple.js - to make p5.js even easier for beginners https://github.com/makeyourownalgorithmicart/simple.js/wiki
+** [https://github.com/makeyourownalgorithmicart/simple.js/wiki Simple.js] – To make p5.js even easier for beginners <br>
-    - P5.riso https://antiboredom.github.io/p5.riso/
+** [https://antiboredom.github.io/p5.riso/ p5.riso] <br>
-    - P5.utils https://github.com/alptugan/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.
- PHP Manual (choose your language!) https://www.php.net/manual/fr/index.php
+[https://www.php.net/manual/fr/index.php PHP Manual] (choose your language!) <br>
-- "Write your first PHP program" https://www.freecodecamp.org/news/what-is-php-write-your-first-php-program/
+[https://www.freecodecamp.org/news/what-is-php-write-your-first-php-program/ Write your first PHP program] <br>
-- "The PHP handbook" https://www.freecodecamp.org/news/the-php-handbook/
+[https://www.freecodecamp.org/news/the-php-handbook/ The PHP handbook] <br>
-- "PHP syntax: comments, variables, data types" https://www.freecodecamp.org/news/php-syntax-comments-variables-data-types-with-examples/
+[https://www.freecodecamp.org/news/php-syntax-comments-variables-data-types-with-examples/ PHP syntax: comments, variables, data types] <br>
-- "Logical operators in PHP" https://www.freecodecamp.org/news/logical-operators-in-php/
+[https://www.freecodecamp.org/news/logical-operators-in-php/ Logical operators in PHP] <br>
-- "Method overloading in PHP" https://www.freecodecamp.org/news/method-overloading-in-php/
+[https://www.freecodecamp.org/news/method-overloading-in-php/ Method overloading in PHP] <br>
-- "Programmez en orienté objet avec PHP" (FR) https://openclassrooms.com/fr/courses/1665806-programmez-en-oriente-objet-en-php/7306631-tirez-un-maximum-de-ce-cours
+[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>
-- Playlist "Apprendre le PHP" (FR) https://www.youtube.com/watch?v=cWoq5znh0vw&list=PLjwdMgw5TTLVDv-ceONHM_C19dPW1MAMD
+[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 ===
-- Responsive webdesign https://www.freecodecamp.org/learn/2022/responsive-web-design/
+[https://www.freecodecamp.org/learn/2022/responsive-web-design/ Responsive webdesign]
-==== 3.2 ACCESSIBILITY ====
+=== ACCESSIBILITY ===
-→ All time resources for pretty much everything accessibility-related
+==== All time resources for pretty much everything accessibility-related ====
-- Stephanie Walter's blog (EN) https://stephaniewalter.design/blog/
+[https://stephaniewalter.design/blog/ Stephanie Walter's blog (EN)] <br>
-- Blog de Stephanie Walter (FR) https://stephaniewalter.design/fr/blog/
+[https://stephaniewalter.design/fr/blog/ <span style="color: #5F9EA0;">Blog de Stephanie Walter (FR)</span>] <br>
-- W3C Web Accessibility Initiative https://www.w3.org/WAI/fundamentals/
+[https://www.w3.org/WAI/fundamentals/ W3C Web Accessibility Initiative]
-→ Tutorials
+==== Tutorials ====
-- Designing without dark patterns, a guide for designers https://beta.designersethiques.org/en/thematique-design-persuasif/concevoir-sans-dark-patterns
+[https://beta.designersethiques.org/en/thematique-design-persuasif/concevoir-sans-dark-patterns Designing without dark patterns, a guide for designers] <br>
-- Keyboard Accessibility Guide Part 1: HTML + CSS https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/
+[https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/ Keyboard Accessibility Guide Part 1: HTML + CSS] <br>
-- Keyboard Accessibility Guide Part 2: JavaScript https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-javascript-part2/
+[https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-javascript-part2/ Keyboard Accessibility Guide Part 2: JavaScript] <br>
-- Standards Guidelines 2022 https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/
+[https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/ Standards Guidelines 2022] <br>
-- 10 ways to improve accessibility on websites and social media https://www.lireo.com/10-ways-to-improve-accessibility-on-websites-and-social-media/
+[https://www.lireo.com/10-ways-to-improve-accessibility-on-websites-and-social-media/ 10 ways to improve accessibility on websites and social media] <br>
-- Note on aria label usage https://html5accessibility.com/stuff/2024/05/22/not-so-short-note-on-aria-label-usage-big-table-edition/
+[https://html5accessibility.com/stuff/2024/05/22/not-so-short-note-on-aria-label-usage-big-table-edition/ Note on aria label usage] <br>
-- Introduction to web accessibility https://www.edx.org/learn/web-accessibility/the-world-wide-web-consortium-w3c-introduction-to-web-accessibility
+[https://www.edx.org/learn/web-accessibility/the-world-wide-web-consortium-w3c-introduction-to-web-accessibility Introduction to web accessibility] <br>
-- Making an accessibility statement https://www.w3.org/WAI/planning/statements/
+[https://www.w3.org/WAI/planning/statements/ Making an accessibility statement] <br>
-- Getting the WCAG color contrast right https://uxdesign.cc/getting-the-wcag-color-contrast-right-799508389679
+[https://uxdesign.cc/getting-the-wcag-color-contrast-right-799508389679 Getting the WCAG color contrast right] <br>
-- Dialogs and popovers seem similar. How are they different? https://hidde.blog/dialog-modal-popover-differences/
+[https://hidde.blog/dialog-modal-popover-differences/ Dialogs and popovers seem similar. How are they different?] <br>
-- Readability guidelines https://readabilityguidelines.co.uk/
+[https://readabilityguidelines.co.uk/ Readability guidelines] <br>
-- Accessibilité des PDF (FR) https://blog.hello-bokeh.fr/2024/03/11/accessibilite-des-pdf/
+[https://blog.hello-bokeh.fr/2024/03/11/accessibilite-des-pdf/ <span style="color: #5F9EA0;">Accessibilité des PDF (FR)</span>] <br>
-- L’attribut lang, pour rendre la page audible... et compréhensible (FR) https://accessibilite.public.lu/fr/news/2023-10-05-langues.html
+[https://accessibilite.public.lu/fr/news/2023-10-05-langues.html <span style="color: #5F9EA0;">L’attribut <code>lang</code>, pour rendre la page audible... et compréhensible (FR)</span>] <br>
-- Comment partager une image de façon accessible ? (FR) https://www.copsae.fr/partager-image-accessible/
+[https://www.copsae.fr/partager-image-accessible/ <span style="color: #5F9EA0;">Comment partager une image de façon accessible ? (FR)</span>] <br>
-- Accessibilité : quelles exigences pour les livres numériques ? (FR) https://actualitte.com/article/113075/legislation/accessibilite-quelles-exigences-pour-les-livres-numeriques
+[https://actualitte.com/article/113075/legislation/accessibilite-quelles-exigences-pour-les-livres-numeriques <span style="color: #5F9EA0;">Accessibilité : quelles exigences pour les livres numériques ? (FR)</span>] <br>
-- Utiliser prefers-reduced-motion (FR) https://www.teotimepacreau.fr/blog/prefers-motion-reduced/
+[https://www.teotimepacreau.fr/blog/prefers-motion-reduced/ <span style="color: #5F9EA0;">Utiliser <code>prefers-reduced-motion</code> (FR)</span>] <br>
-- RGAA 4.1 (FR - english version in progress) https://rgaa.tanaguru.com/index.html
+[https://rgaa.tanaguru.com/index.html <span style="color: #5F9EA0;">RGAA 4.1 (FR - english version in progress)</span>] <br>
-- Contrastes de couleur (FR) https://developer.mozilla.org/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
+[https://developer.mozilla.org/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast <span style="color: #5F9EA0;">Contrastes de couleur (FR)</span>] <br>
-- Color contrast https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
+[https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast Color contrast]
-→ Articles and opinions
+==== Articles and opinions ====
-- “An accessible website won’t be beautiful”… really?! https://medium.com/@chiaracielo/an-accessible-website-wont-be-beautiful-really-076802c79e90
+[https://medium.com/@chiaracielo/an-accessible-website-wont-be-beautiful-really-076802c79e90 “An accessible website won’t be beautiful”… really?!] <br>
-- Accessibility resources, tools, articles and books for designers https://stephaniewalter.design/blog/accessibility-resources-tools-articles-books-for-designer/
+[https://stephaniewalter.design/blog/accessibility-resources-tools-articles-books-for-designer/ Accessibility resources, tools, articles and books for designers] <br>
-- Accessibility resources and tools to design inclusive products https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/
+[https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/ Accessibility resources and tools to design inclusive products] <br>
-- Thème sombre, dark mode et mythe d'accessibilité (FR) https://stephaniewalter.design/fr/blog/theme-sombre-dark-mode-et-mythe-daccessibilite/
+[https://stephaniewalter.design/fr/blog/theme-sombre-dark-mode-et-mythe-daccessibilite/ <span style="color: #5F9EA0;">Thème sombre, dark mode et mythe d'accessibilité (FR)</span>] <br>
-- Dark mode and accessibility myth https://stephaniewalter.design/blog/dark-mode-accessibility-myth-debunked/
+[https://stephaniewalter.design/blog/dark-mode-accessibility-myth-debunked/ Dark mode and accessibility myth] <br>
-- Approach to alt-text https://adrianroselli.com/2024/05/my-approach-to-alt-text.html
+[https://adrianroselli.com/2024/05/my-approach-to-alt-text.html Approach to alt-text] <br>
-- How to pick the least wrong colors https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/
+[https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/ How to pick the least wrong colors]
-==== 3.3 BLOGS & CMS ====
+=== BLOGS & CMS ===
-- Eleventy official website www.11ty.dev
+[https://www.11ty.dev Eleventy website] <br>
-- Setting up Eleventy https://anhvn.com/posts/2024/my-eleventy-site-setup/
+[https://anhvn.com/posts/2024/my-eleventy-site-setup/ Setting up Eleventy] <br>
-- Process Wire website https://processwire.com/
+[https://processwire.com/ Process Wire website] <br>
-- Process Wire Tutorials https://youtube.com/playlist?list=PLbrh75U7tpN97Gs_GQcyz1FiXsLnG_W-Q&si=kLNDhVoUSnz1HKBH
+[https://youtube.com/playlist?list=PLbrh75U7tpN97Gs_GQcyz1FiXsLnG_W-Q&si=kLNDhVoUSnz1HKBH Process Wire Tutorials] <br>
-- Scribouilli (FR) https://scribouilli.org/
+[https://scribouilli.org/ <span style="color: #5F9EA0;">Scribouilli (FR)</span>]
-==== 3.4 OPTIMISATION ====
+=== OPTIMISATION ===
-- Optimiser le chargement des fonts (FR) https://www.julienpradet.fr/tutoriels/optimiser-le-chargement-des-fonts/
+[https://www.julienpradet.fr/tutoriels/optimiser-le-chargement-des-fonts/ <span style="color: #5F9EA0;">Optimiser le chargement des fontes (FR)</span>]