User:Kiara/Code

This document gathers resources and tutorials to get into web development. 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. 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. Be curious, have fun :)

1. BASIS FOR WEB DEV

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. Now you're ready to go!

- W3 Schools [1] - MDN or https://developer.mozilla.org/en-US/ - Free Code Camp [2] - Udemy [3] → 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 ;) - Learn about accessibility [4] - OpenClassrooms (FR + EN) [5] - Graphikart (FR) [6]

→ Nice tools to help you code - 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
   - Wakamai Fondue - what can my font do?? https://wakamaifondue.com/
   - Base64 encoder (can be useful for font manipulation) https://www.giftofspeed.com/base64-encoder/
   - Modularscale - scaling type https://www.modularscale.com/
   - Transfonter - to transform otf and ttf into woff, woff2 and svg https://transfonter.org/
   - SYMBL (choose your language!) https://symbl.cc/fr/

   About colours 
   - Coolors - colour palettes https://coolors.co/?home
   - Coolors contrast checker https://coolors.co/contrast-checker/c801ff-0e0e10
   - Polypane contrast checker https://polypane.app/color-contrast/#fg=%23107db5&bg=%23fff&level=aa&format=rgb&algo=WCAG2&filter=none
   - Contrast ratio https://www.siegemedia.com/contrast-ratio
   - Odd contrast - contrast ratio checker https://www.oddcontrast.com/#hex__*132b77__*ffa8c1
   - 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 - Texturing - a dithering software https://ivan-murit.fr/project.php?w=texturing&p=download.htm - Dither it! - dither images in your browser https://ditherit.com/

2. LANGUAGES

2.1 HTML

→ Getting started - HTML tags cheatsheet https://webaim.org/resources/htmlcheatsheet/

→ Go further - Out of order without JS https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/ - Web components https://hawkticehurst.com/writing/a-year-working-with-html-web-components/

2.2 CSS

→ Getting started - Centering https://tonsky.me/blog/centering/ - 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 - Tool for creating proportional scales for typography, iconography, spacing, and components in design systems https://proportio.app/ - To create colour palettes based one input colour https://colour-tool.qweb.co.uk/ - Loaders https://css-loaders.com/ - Gives you the CSS you need to draw some shapes https://css-shape.com/ - Help with responsive and scaling https://utopia.fyi/blog/clamp-calculator/ - Fancy SVG filters https://www.stefanjudis.com/blog/fancy-svg-filters/ - Flex layouts https://getbootstrap.com/docs/4.0/utilities/flex/ - Image slideshow https://codepen.io/cadars/pen/PoJGMNP

→ CSS-print

   paged.js
   - paged.js website https://pagedjs.org/about/
   - paged.js demo https://gitlab.coko.foundation/pagedjs/pagedjs-templates/ukulele-demo
   - Rapide introduction au CSS-print (FR) https://sarahgarcin.com/workshops/coding-cooking/web2print.html
   - Encore une intro au CSS-print (FR) https://ateliers.esad-pyrenees.fr/web/pages/ressources/ctrl-alt-print/pagedjs/
   - Bookolab (FR) https://bookolab.coalitioncyborg.org/?utm_source=pocket_saves
   - Add a map to your book https://gitlab.coko.foundation/pagedjs/book-of-cook/-/blob/main/public/examples/map.html
   - Booklet imposition https://gitlab.coko.foundation/pagedjs/pagedjs-plugins/booklet-imposition
   - 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
   - Pagebot https://pypi.org/project/pagebot/
   - CollabPrint (ether2html) https://gitlab.com/quentinjuhel/collabprint/-/tree/main/
   - Markdown2html2print (FR) https://eyssette.forge.aeif.fr/a4/
   - XPUB imposition tools https://pzwiki.wdka.nl/mediadesign/Imposition
   - Gabarit Abrüpt Pandoc (FR) https://gitlab.com/cestabrupt/gabarit-abrupt

   - Baseline https://csscade.com/baseline/
   - Breaking words https://adrianroselli.com/2024/02/techniques-to-break-words.html
   - Hanging punctuation https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation
   - Container queries https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/
   - Baseline grids https://maketypework.com/web-typography-baseline-grids-made-easy/
   - Colour speration when generating PDF https://gitlab.constantvzw.org/osp/tools.pdfutils
   - 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
   - Make your PDF press ready https://github.com/vibranthq/press-ready
   - Bash script for imposition https://gitlab.com/quentinjuhel/Bookletor

   Some culture
   - Mistakes that have been made when CSS was created https://wiki.csswg.org/ideas/mistakes

→ Go further - CSS Values and Units https://drafts.csswg.org/css-values-4/#viewport-relative-lengths - The CSS border-image property https://www.smashingmagazine.com/2024/01/css-border-image-property/ - Better context menus with safe triangles https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/ - Lines to connect elements with CSS anchor positioning https://frontendmasters.com/blog/drawing-a-line-to-connect-elements-with-css-anchor-positioning/ - where() to replace complex multi-selectors https://helloanselm.com/writings/css-where-to-replace-complex-multi-selectors - "A powerful CSS display property that no one talks about" https://www.youtube.com/watch?v=cs37yx73b1o - "Stop fighting with CSS positioning" https://www.youtube.com/watch?v=86nTToBm2uQ - At-rules https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule - At-rules (FR) https://developer.mozilla.org/fr/docs/Web/CSS/At-rule - Media queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries - @media orientation https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation - @media orientation (FR) https://developer.mozilla.org/fr/docs/Web/CSS/@media/orientation - CSS container queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries - CSS Container Query Proposal & Explainer https://css.oddbird.net/rwd/query/explainer/ - W3C Guide to container queries https://www.w3.org/TR/css-contain-3/#container-queries - Utiliser les media queries (FR) https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries - State of CSS 2022 https://web.dev/blog/state-of-css-2022#container-queries - La propriété align-content pour les mises en page de blocs (FR) https://web.dev/blog/align-content-block?hl=fr - Techniques CSS méconnues des designers (FR) https://toutcequibouge.net/blog/2024/04/panorama-de-techniques-css-parfois-meconnues-des-designers/ - 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 - Rognage rectangulaire arrondi (FR) https://vincent-valentin.name/articles/un-rognage-rectangulaire-arrondi

→ Resources (blogs, etc. about CSS (upcoming) features) - The Cascade https://csscade.com/ - An exploration of the pain points that CSS gap solves. https://ishadeed.com/article/the-gap/ - Do we need CSS flex-wrap detection? https://ishadeed.com/article/flex-wrap-detect/ - New Viewport Units https://ishadeed.com/article/new-viewport-units/ - On compliance vs readability: Generating text colors with CSS https://lea.verou.me/blog/2024/contrast-color/ - Custom properties with defaults: 3+1 strategies https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/ - 12 Modern CSS One-Line Upgrades https://moderncss.dev/12-modern-css-one-line-upgrades/ - Modern CSS For Dynamic Component-Based Architecture https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ - 10 Heuristics to Simplify Design Decision-Making https://www.betterbydesign.cc/p/10-heuristics-to-simplify-design - List of links about container queries https://github.com/sturobson/Awesome-Container-Queries - Modern CSS in real life https://chriscoyier.net/2023/06/06/modern-css-in-real-life/

2.3 JAVASCRIPT

→ Getting started - Beginner JavaScript Notes https://wesbos.com/javascript?ref=sidebar - JS Syntax (choose your language!) https://fr.wikipedia.org/wiki/Syntaxe_JavaScript - Apprenez à programmer avec JavaScript (FR) https://openclassrooms.com/fr/courses/7696886-apprenez-a-programmer-avec-javascript?archived-source=6175841 - Vanilla JS 30 days challenge https://javascript30.com/ - Beginner JavaScript https://beginnerjavascript.com/ - "5 things designers can do with JS" https://frontendmasters.com/blog/5-things-designers-can-do-with-javascript/ - "Browser security bugs that aren't: JavaScript in PDF" https://textslashplain.com/2024/04/10/browser-security-bugs-that-arent-javascript-in-pdf/

→ Experiments - "Scaled prev/next" https://codepen.io/esadpyrenees/pen/xxJbjmO - 3D card model https://glitch.com/~3d-card-model-viewer

→ Tools - Scroll to top https://www.w3schools.com/jsref/prop_element_scrolltop.asp - Popups https://www.w3schools.com/howto/howto_js_popup.asp - Fabric.js http://fabricjs.com/ - Paper.js http://paperjs.org/examples/

   P5.js
   - p5.js website https://p5js.org/
   - Start learning P5.js https://youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&si=xYq63Ur6jL8zNo-C
   - Simple.js - to make p5.js even easier for beginners https://github.com/makeyourownalgorithmicart/simple.js/wiki
   - P5.riso https://antiboredom.github.io/p5.riso/
   - P5.utils https://github.com/alptugan/p5.utils

2.4 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

- "Write your first PHP program" https://www.freecodecamp.org/news/what-is-php-write-your-first-php-program/ - "The PHP handbook" https://www.freecodecamp.org/news/the-php-handbook/ - "PHP syntax: comments, variables, data types" https://www.freecodecamp.org/news/php-syntax-comments-variables-data-types-with-examples/ - "Logical operators in PHP" https://www.freecodecamp.org/news/logical-operators-in-php/ - "Method overloading in PHP" https://www.freecodecamp.org/news/method-overloading-in-php/ - "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 - Playlist "Apprendre le PHP" (FR) https://www.youtube.com/watch?v=cWoq5znh0vw&list=PLjwdMgw5TTLVDv-ceONHM_C19dPW1MAMD

3. ADDITIONAL SKILLS

3.1 RESPONSIVE DESIGN

- Responsive webdesign https://www.freecodecamp.org/learn/2022/responsive-web-design/

3.2 ACCESSIBILITY

→ All time resources for pretty much everything accessibility-related - Stephanie Walter's blog (EN) https://stephaniewalter.design/blog/ - Blog de Stephanie Walter (FR) https://stephaniewalter.design/fr/blog/ - W3C Web Accessibility Initiative https://www.w3.org/WAI/fundamentals/

→ Tutorials - Designing without dark patterns, a guide for designers https://beta.designersethiques.org/en/thematique-design-persuasif/concevoir-sans-dark-patterns - Keyboard Accessibility Guide Part 1: HTML + CSS https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/ - Keyboard Accessibility Guide Part 2: JavaScript https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-javascript-part2/ - Standards Guidelines 2022 https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/ - 10 ways to improve accessibility on websites and social media https://www.lireo.com/10-ways-to-improve-accessibility-on-websites-and-social-media/ - Note on aria label usage https://html5accessibility.com/stuff/2024/05/22/not-so-short-note-on-aria-label-usage-big-table-edition/ - Introduction to web accessibility https://www.edx.org/learn/web-accessibility/the-world-wide-web-consortium-w3c-introduction-to-web-accessibility - Making an accessibility statement https://www.w3.org/WAI/planning/statements/ - Getting the WCAG color contrast right https://uxdesign.cc/getting-the-wcag-color-contrast-right-799508389679 - Dialogs and popovers seem similar. How are they different? https://hidde.blog/dialog-modal-popover-differences/ - Readability guidelines https://readabilityguidelines.co.uk/ - Accessibilité des PDF (FR) https://blog.hello-bokeh.fr/2024/03/11/accessibilite-des-pdf/ - L’attribut lang, pour rendre la page audible... et compréhensible (FR) https://accessibilite.public.lu/fr/news/2023-10-05-langues.html - Comment partager une image de façon accessible ? (FR) https://www.copsae.fr/partager-image-accessible/ - Accessibilité : quelles exigences pour les livres numériques ? (FR) https://actualitte.com/article/113075/legislation/accessibilite-quelles-exigences-pour-les-livres-numeriques - Utiliser prefers-reduced-motion (FR) https://www.teotimepacreau.fr/blog/prefers-motion-reduced/ - RGAA 4.1 (FR - english version in progress) https://rgaa.tanaguru.com/index.html - Contrastes de couleur (FR) https://developer.mozilla.org/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast - Color contrast https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast

→ Articles and opinions - “An accessible website won’t be beautiful”… really?! https://medium.com/@chiaracielo/an-accessible-website-wont-be-beautiful-really-076802c79e90 - Accessibility resources, tools, articles and books for designers https://stephaniewalter.design/blog/accessibility-resources-tools-articles-books-for-designer/ - Accessibility resources and tools to design inclusive products https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/ - Thème sombre, dark mode et mythe d'accessibilité (FR) https://stephaniewalter.design/fr/blog/theme-sombre-dark-mode-et-mythe-daccessibilite/ - Dark mode and accessibility myth https://stephaniewalter.design/blog/dark-mode-accessibility-myth-debunked/ - Approach to alt-text https://adrianroselli.com/2024/05/my-approach-to-alt-text.html - How to pick the least wrong colors https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/

3.3 BLOGS & CMS

- Eleventy official website www.11ty.dev - Setting up Eleventy https://anhvn.com/posts/2024/my-eleventy-site-setup/ - Process Wire website https://processwire.com/ - Process Wire Tutorials https://youtube.com/playlist?list=PLbrh75U7tpN97Gs_GQcyz1FiXsLnG_W-Q&si=kLNDhVoUSnz1HKBH - Scribouilli (FR) https://scribouilli.org/

3.4 OPTIMISATION

- Optimiser le chargement des fonts (FR) https://www.julienpradet.fr/tutoriels/optimiser-le-chargement-des-fonts/