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 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
• 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 (EN) or OpenClassrooms (FR)
• Graphikart (FR)

→ Nice tools to help you code

https://caniuse.com/ – Up to date browser support for CSS properties, HTML tags, etc.

https://bennettfeely.com/clippy/ – To crop images with CSS clip-path

https://validator.w3.org/nu/ – HTML checker, to see if your code is well written :)

https://outils-css.aliasdmc.fr/convertir-unites-de-longueurs-css.php#bloc-content – Convertisseur d'unités (FR)

• 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
  • 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

2. LANGUAGES

2.1 HTML

→ Getting started

HTML tags cheatsheet

→ Go further

Out of order without JS

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
  • Website
  • 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
  • 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
  • Add a map to your book – https://gitlab.coko.foundation/pagedjs/book-of-cook/-/blob/main/public/examples/map.html

• Other layout tools
  • Pagebot
  • CollabPrint (ether2html)
  • Markdown2html2print (FR)
  • XPUB imposition tools
  • Gabarit Abrüpt Pandoc (FR)
• General helping for CSS-print
  • Baseline
  • Breaking words
  • Hanging punctuation
  • Container queries
  • Baseline grids
  • Colour speration when exporting to PDF
  • Nuclear Anchored Sidenotes
  • Text-balancer
  • target-counter() for pagination
  • Hyphenopoly

• Advanced level
  • Make your PDF press ready
  • Bash script for imposition

→ 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/

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

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
  • Website
  • Start learning p5.js
  • Simple.js – To make p5.js even easier for beginners
  • p5.riso
  • 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!)

"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 "Apprendre le PHP" (FR)

3. ADDITIONAL SKILLS

3.1 RESPONSIVE DESIGN

Responsive webdesign

3.2 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

3.3 BLOGS & CMS

Eleventy website

Setting up Eleventy

Process Wire website

Process Wire Tutorials

Scribouilli (FR)

3.4 OPTIMISATION

Optimiser le chargement des fonts (FR)