Exercice 1 Hiérarchiser un contenu

Créer un poster à partir d'une définition

Notions abordées: CSS text, CSS font, typographie web, couleur, positionnement

1. Choisir une définition dans un dictionnaire (cnrtl.fr)
2. Mettre en page un poster à partir de cette définition avec trois niveau hiérarchiques: titre, texte de la définition, crédits

Ressources

• Typography in CSS
• Propriétés CSS font (MDN)
• Propriétés CSS text (MDN)
• CSS color (MDN)
• Positionnement CSS (MDN)
• Propriétés CSS font (W3school)
• Propriétés CSS text (W3school)
• @font-face exemple
• Transfonter, @font-face generator
• Webfont generator de FontSquirrel

Tutoriels

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

Exercice 2 Mettre en page

Ajouter des images ou des formes au poster

Notions abordées: modèle de boîte (box model), CSS flexbox, CSS grid

Ressources

• Box model
• CSS Grid Layout (MDN)
• Grid in CSS
• Flexbox playground
• Flexbox properties demonstration

Tutoriels

• Le modèle de boîte (MDN)
• La mise en page avec CSS (MDN)
• A complete guide to Grid
• Grid by example
• Basic of CSS grid (Layout land)
• Choisir sa spec de positionnement CSS
• Centering in CSS: a complete guide
• Layout land, tutoriels youtube

Exemples

• Print to CSS
• CSS grid: periodic table
• Specimen L10 (ortype)
• Grid experiment n°1
• Grid experiment n°4
• Grid, flex and background patterns
• Monopoly board

Exercice 3 Faire un design responsive

Changer le nombre de colonne en fonction de la taille de l'écran

Notions abordées: media queries, CSS columns

1. Supprimer la feuille de style "template.css" (la commenter)
2. Changer le nombre de colonne du texte de définition en fonction de la taille de l'écran

Ressources

• CSS columns (MDN)
• Exemples de media queries
• Logic in media queries

Tutoriels

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

Exemples

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

Exercice 4 Imprimer une page web

Mettre en page un livret (4 page) à partir du poster

Notions abordées: CSS print, paged.js

1. Ajouter le script paged.js dans le head votre page HTML : <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>head>
2. Mettre des numéros de page

Ressources

• pagedmedia.org/paged-js
• gitlab.pagedmedia.org
• What is the pagedmedia initiative ?
• An overview of the Paged Media × PrePostPrint workshop

Tutoriels

• Paged.js – sneak peeks
• Designing For Print With CSS

Exemples

• 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
• Ovide, outil