User:Kiara/Code: Difference between revisions
(→HTML) |
|||
(5 intermediate revisions by the same user not shown) | |||
Line 9: | Line 9: | ||
Now you're ready to go! | Now you're ready to go! | ||
==== Getting Started – The basis of basis ==== | |||
* [https://www.w3schools.com/ W3 Schools] <br> | * [https://www.w3schools.com/ W3 Schools] <br> | ||
* [https://developer.mozilla.org/fr/ <span style="color: #5F9EA0;">MDN (FR)</span>] or [https://developer.mozilla.org/fr/ MDN (EN)] <br> | * [https://developer.mozilla.org/fr/ <span style="color: #5F9EA0;">MDN (FR)</span>] or [https://developer.mozilla.org/fr/ MDN (EN)] <br> | ||
Line 17: | Line 18: | ||
* [https://grafikart.fr/ <span style="color: #5F9EA0;">Graphikart (FR)</span>] | * [https://grafikart.fr/ <span style="color: #5F9EA0;">Graphikart (FR)</span>] | ||
==== Nice tools to help you code ==== | |||
* General | * General | ||
** [https://caniuse.com/ Can I Use] – Up to date browser support for CSS properties, HTML tags, etc. <br> | ** [https://caniuse.com/ Can I Use] – Up to date browser support for CSS properties, HTML tags, etc. <br> | ||
Line 45: | Line 46: | ||
** [https://www.toptal.com/designers/colorfilter Colorblind webpage filter] – To see how a website displays | ** [https://www.toptal.com/designers/colorfilter Colorblind webpage filter] – To see how a website displays | ||
==== Not coding but really nice ==== | |||
[https://ivan-murit.fr/project.php?w=texturing&p=download.htm Texturing] – A dithering software <br> | [https://ivan-murit.fr/project.php?w=texturing&p=download.htm Texturing] – A dithering software <br> | ||
[https://ditherit.com/ Dither it!] – Dither images in your browser | [https://ditherit.com/ Dither it!] – Dither images in your browser | ||
Line 151: | Line 152: | ||
---- | ---- | ||
==== | === JAVASCRIPT === | ||
==== Getting started ==== | |||
[https://wesbos.com/javascript?ref=sidebar Beginner JavaScript Notes] <br> | [https://wesbos.com/javascript?ref=sidebar Beginner JavaScript Notes] <br> | ||
[https://fr.wikipedia.org/wiki/Syntaxe_JavaScript JS Syntax (choose your language!)] <br> | [https://fr.wikipedia.org/wiki/Syntaxe_JavaScript JS Syntax (choose your language!)] <br> | ||
Line 161: | Line 162: | ||
[https://textslashplain.com/2024/04/10/browser-security-bugs-that-arent-javascript-in-pdf/ Browser security bugs that aren't: 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 ==== | |||
[https://codepen.io/esadpyrenees/pen/xxJbjmO Scaled prev/next] <br> | [https://codepen.io/esadpyrenees/pen/xxJbjmO Scaled prev/next] <br> | ||
[https://glitch.com/~3d-card-model-viewer 3D card model] | [https://glitch.com/~3d-card-model-viewer 3D card model] | ||
==== Tools ==== | |||
[https://www.w3schools.com/jsref/prop_element_scrolltop.asp Scroll to top] <br> | [https://www.w3schools.com/jsref/prop_element_scrolltop.asp Scroll to top] <br> | ||
[https://www.w3schools.com/howto/howto_js_popup.asp Popups] <br> | [https://www.w3schools.com/howto/howto_js_popup.asp Popups] <br> | ||
Line 192: | Line 193: | ||
== ADDITIONAL SKILLS == | == ADDITIONAL SKILLS == | ||
=== RESPONSIVE DESIGN === | |||
[https://www.freecodecamp.org/learn/2022/responsive-web-design/ Responsive webdesign] | [https://www.freecodecamp.org/learn/2022/responsive-web-design/ Responsive webdesign] | ||
==== | === ACCESSIBILITY === | ||
==== All time resources for pretty much everything accessibility-related ==== | |||
[https://stephaniewalter.design/blog/ Stephanie Walter's blog (EN)] <br> | [https://stephaniewalter.design/blog/ Stephanie Walter's blog (EN)] <br> | ||
[https://stephaniewalter.design/fr/blog/ <span style="color: #5F9EA0;">Blog de Stephanie Walter (FR)</span>] <br> | [https://stephaniewalter.design/fr/blog/ <span style="color: #5F9EA0;">Blog de Stephanie Walter (FR)</span>] <br> | ||
[https://www.w3.org/WAI/fundamentals/ W3C Web Accessibility Initiative] | [https://www.w3.org/WAI/fundamentals/ W3C Web Accessibility Initiative] | ||
==== Tutorials ==== | |||
[https://beta.designersethiques.org/en/thematique-design-persuasif/concevoir-sans-dark-patterns Designing without dark patterns, a guide for designers] <br> | [https://beta.designersethiques.org/en/thematique-design-persuasif/concevoir-sans-dark-patterns Designing without dark patterns, a guide for designers] <br> | ||
[https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/ Keyboard Accessibility Guide Part 1: HTML + CSS] <br> | [https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/ Keyboard Accessibility Guide Part 1: HTML + CSS] <br> | ||
Line 222: | Line 223: | ||
[https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast Color contrast] | [https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast Color contrast] | ||
==== Articles and opinions ==== | |||
[https://medium.com/@chiaracielo/an-accessible-website-wont-be-beautiful-really-076802c79e90 “An accessible website won’t be beautiful”… really?!] <br> | [https://medium.com/@chiaracielo/an-accessible-website-wont-be-beautiful-really-076802c79e90 “An accessible website won’t be beautiful”… really?!] <br> | ||
[https://stephaniewalter.design/blog/accessibility-resources-tools-articles-books-for-designer/ Accessibility resources, tools, articles and books for designers] <br> | [https://stephaniewalter.design/blog/accessibility-resources-tools-articles-books-for-designer/ Accessibility resources, tools, articles and books for designers] <br> | ||
Line 231: | Line 232: | ||
[https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors/ 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] | ||
=== BLOGS & CMS === | |||
[https://www.11ty.dev Eleventy website] <br> | [https://www.11ty.dev Eleventy website] <br> | ||
[https://anhvn.com/posts/2024/my-eleventy-site-setup/ Setting up Eleventy] <br> | [https://anhvn.com/posts/2024/my-eleventy-site-setup/ Setting up Eleventy] <br> |
Revision as of 21:15, 12 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
- 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)
- Can I Use – Up to date browser support for CSS properties, HTML tags, etc.
- 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
- Wakamai Fondue – What can my font do??
- 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
- Salmon Olive – Colours accepted by the web
Not coding but really nice
Texturing – A dithering software
Dither it! – Dither images in your browser
LANGUAGES
HTML
Getting started
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
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
Mistakes that have been made when CSS was created
An exploration of the pain points that CSS gap solves
Do we need CSS flex-wrap
detection?
New Viewport Units
On compliance vs readability: Generating text colors with CSS
Custom properties with defaults: 3+1 strategies
12 Modern CSS One-Line Upgrades
Modern CSS For Dynamic Component-Based Architecture
10 Heuristics to Simplify Design Decision-Making
List of links about container queries
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
- Website
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
ACCESSIBILITY
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)