User:Kiara/Code

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
How to make a free & handmade portfolio site

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)