Des liens et des ressources

Initiation à HTML et CSS

• Introduction à HTML (MDN)
• A Simple Guide to HTML: principales balises HTML
• HTML5 Template: A Basic Boilerplate for Any Project
• Minute hack: Page web starter

• Premiers pas avec CSS (MDN)
• Initiation à la mise en forme du texte (MDN)
• Différence enrte ID et class: lien 1 – lien 2
• Web design in 4 minutes

Sites utiles: coup d'œil

• Can I use ___ ?
• CSSreference.io
• Liste des propriétés CSS (MDN)
• Liste des propriétés CSS (CSS tricks)

Sites utiles: tutoriels et tricks

• MDN Webs docs (CSS)
• MDN Webs docs (HTML)
• w3schools.com
• css-tricks.com
• codepen.io
• jsfiddle.net
• glitch.com
• Interneting is hard (But it doesn’t have to be): Friendly web development tutorials for complete beginners

Web responsive (modèle de boîtes et media queries)

• Unités CSS: lien 1 – lien 2
• Introduction au modèle de boîte CSS (MDN)
• Box sizing pour les nuls (la-cascade.io)
• Box sizing (MDN)
• Media queries (MDN)
• CSS Media Queries - Examples (w3school)
• Logic in Media Queries (css-tricks)

Tutoriels

• Les Media Queries CSS3
• Beginner's guide to media queries
• Utiliser les requêtes media (MDN)
• Media queries and break points

Exemples de web responsive

• https://lynnandtonic.com/
• https://lynnandtonic.com/archive/2017/
• https://matthewrayfield.com/goodies/popup-trombone/
• http://lieucommun.com/responsivewishes2017/
• https://mediaqueri.es/

Positionnement: float, flexbox et grille

• Position relative, absolute et fixe (MDN)
• CSS float (MDN)
• Comment fonctionne CSS float (la-cascade.io)
• A complete guide to grid (css-tricks)
• Layout land (tutoriels youtube)
• A guide to flexbox (css-tricks)
• Choisir son positionnement avec CSS (24joursdeweb.fr)
• Centering in CSS, a complete guide (css-tricks)
• z-index (MDN)

Tools

• Flexbox playground (codepen)
• gridbyexample.com

Exercices / exemples

• One line layout
• Flexbox froggy
• Responsive grid magazine layout in just 20 lines of css
• CSS Grid Layout - Template Areas (CodePen)
• CSS Grid Layout - New Terminology (CodePen)
• CSS Grid: Periodic Table (CodePen)
• Grid Experiment No. 1 (CodePen)
• Grid, Flex, and background patterns (CodePen)
• Monopoly board (CodePen)

Exemples d'utilisation de CSS grid

• labs.jensimmons.com
• klassehickmann.com
• criticalarchitecture.org
• cssgridgarden.com

Aller plus loin avec CSS

• Les variables CSS (MDN)
• A Complete Guide to calc() in CSS
• Comment fonctionne calc()
• Des interactions en pur CSS

La typographie pour le web

• Fontes web (MDN)
• Initiation à la mise en forme du texte (MDN)
• CSS @font-face Rule
• Déclarer une police non-standard avec @font-face
• Professional Web Typography, Donny Truong

Tools

• Transfonter: modern and simple css @font-face generator
• Webfont generator (fontsquirrel)
• Tester les cractéristiques open type d'une police

Fontes variables

• Axis Praxis
• List of available variable fonts (Google Sheet)
• V-font
• very-able-fonts.com
• Variable futures, A typographic exploration
• https://www.recursive.design/
• https://webkit.org/blog/7051/variable-fonts-on-the-web/
• https://www.lambdatest.com/blog/variable-fonts-cross-browser-compatibility/
• A twitter thread about Variables fonts

Articles

CSS animation (& some javascript)

• The State of Web Animation
• Web animation - Readymag

Exemples

• Swiss in CSS, posters animés
• The Moving Poster
• Playthings de Nicolas Tilly
• emotivefeels.com
• Net art avec uniquement du css (Raphaël Bastide): declin-sequence.neocities.org

Histoire d'Internet et du web

• Voyage dans les internets (émission France Culture)
• The history of the web
• CERN 2019 rebuilding of the original NeXT web browser
• La première page internet
• Invention du CSS en 1994 (W3C)
• La guerre des navigateurs
• Parts de marché des navigateurs (video)
• Valley of the Boom (série)
• A brief history of web design for designers

CSS Print

• Designing For Print With CSS (Rachel Andrew)
• CSSprint by Andreas Zettl
• printcss.tube, tutos vidéos

Exemples

• PrePostPrint
• Create a 🖨️ printable zine with CSS
• John Caserta
• Bindery.js
• Print to CSS, Dan Davies: A print inspired layout design using CSS Grid for every week of the year
• Print It, Objet Papier
• Critical Atlas of Internet, Louise Drulhe
• Code X: PrePostPrint
• Computed Layout

Specifications et syntaxes utilse

• CSS column (MDN)

Paged.js

• Pagedjs.org
• Code source (gitlab)
• Releases
• Documentation
• Scripts expérimentaux
• Proposition de specifications pour les notes: pagedjs.org – Github W3C

Exemples: livres faits avec Paged.js

• paged.design, templates
• Printing in relation to graphic art, livre d'exemple
• Les sculpture de la villa romaine de Chiragan, catalogue numérique et imprimé
• Volumes, catalogue
• Diversions, livret

Exemples: outil intégrant Paged.js

• Ovide, outil

Du beau monde

• Open source publishing
• Velvetyne
• Bonjour Monde (gitlab)
• Luuse
• Nicolas Tilly
• Loraine Furter

Ressources typographiques

• Fonts Squirrel
• Font Library
• Open Foundry
• Fontain.org
• Velvetyne
• OSP Fondery
• Badass libre Fonts by Womxn
• Love letters
• Use & Modify
• Bye Bye Binary

Ressources outils web

Couleurs

• HTML Color Picker
• Wikipédia Web colors
• leonardocolor.io
• htmlcolorcodes.com
• GradPad
• CSS Gradient

Autres

• Clippy: CSS clip-path maker
• Box Shadow CSS Generator | CSSmatic
• Border-radius CSS Generator | CSSmatic

JavaScript: librairies et ressources

• Paper.js, vector graphics scripting
• p5.js, creative coding
• jQuery
• Shapes morphing

Web typesetting

• https://silnrsi.github.io/FDBP/en-US/Design_Metrics.html

Regex, expressions régulières

• A guide to JavaScipt Regular expressions
• regex101: Online regex tester and debugger- PHP, PCRE, Python, Golang and JavaScript
• https://blog.smarchal.com/regex-et-unicode

Publications web

Exemples

• Pavel Kedzich

Parametric stuff

• https://ortype.is/specimen/l10

Logiciels libres

• Gimp
• Darktable
• Inkscape
• Krita
• Figma

Création de caractère

• FontForge
• Birdfont
• Glyphr
• Metaflop
• I can Variable font

Command line tools

• FFmpeg
• ImageMagick