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, 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!

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)

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

→ Getting started
Centering things
Transparent borders
An interactive guide to CSS grids
A more modern CSS reset
@font-face rule
The Rules of Margin Collapse

→ Tools
Tool for creating proportional scales for typography, iconography, spacing, and components in design systems
Create colour palettes based one input colour
CSS Loaders
Shapes translated into CSS
Help with responsive and scaling
Fancy SVG filters
Flex layouts
Image slideshow

→ CSS-print

paged.js

Other layout tools

General helping for CSS-print

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

→ Go further
CSS Values and Units
The CSS border-image property
Better context menus with safe triangles
Lines to connect elements with CSS anchor positioning
where() to replace complex multi-selectors
Video: A powerful CSS display property that no one talks about
Video: Stop fighting with CSS positioning
At-rules
At-rules (FR)
Media queries
@media orientation
@media orientation (FR)
CSS container queries
CSS Container Query Proposal & Explainer
W3C Guide to container queries
Utiliser les media queries (FR)
State of CSS 2022
La propriété align-content pour les mises en page de blocs (FR)
Techniques CSS parfois méconnues des designers (FR)
Un fallback pour les valeurs portées par des CSS vars (FR)
Rognage rectangulaire arrondi (FR)

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

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)

3. ADDITIONAL SKILLS

BASIS FOR WEB DEV

LANGUAGES

HTML

CSS

JAVASCRIPT

PHP

3. ADDITIONAL SKILLS

3.1 RESPONSIVE DESIGN

3.2 ACCESSIBILITY

3.3 BLOGS & CMS

3.4 OPTIMISATION