Catégories
FCS FCS2-exos W3CSS W3CSS-exos

Tests de webdesign avec w3.css

Le site w3schools permettait de sauvegarder sous forme de liens les tests et exercices réalisés dans le bac à sable Tryit. Cette page regroupe quelques exercices ou tests intéressants réalisés par les stagiaires en formation (… ou par moi-même). Ils sont classés par thèmes d’activité.

Aujourd’hui, les exercices effectués sont sauvegardés en tant que page HTML. Pour retrouver la dynamique de l’édition dans le bac à sable Tryit, il est nécessaire de copier le code source de l’exercice et de le coller dans l’espace d’édition de n’importe quel exercice Tryit (ou dans un éditeur de code comme VCS ou Brackets).

Les couleurs

Les thèmes chromatiques

Page de référence : https://www.w3schools.com/w3css/w3css_color_themes.asp

Inversion de l’ordre des nuances

Il s’agit ici d’inverser l’ordre des nuances de l’échelle des tons. Un défi supplémentaire consiste à effectuer ce changement avec le minimum de modifications du code source.

https://www.w3schools.com/code/tryit.asp?filename=GKKDRRDNFIG2

Les grilles

Page de référence : https://www.w3schools.com/w3css/w3css_responsive.asp

Divisions en tiers et en moitiés

https://www.w3schools.com/code/tryit.asp?filename=GKKSWCMSCQBH

Les cellules

Page de référence : https://www.w3schools.com/w3css/w3css_layout.asp

Test de rendu des différents types de cellules

Étape 1

La sauvegarde de la première étape a été faite sous forme de fichier HTML, sur mon « space » w3schools. Il est donc nécessaire de copier le code source et de le collet dans un éditeur de code ou dans un autre exercice mis en œuvre sur Tryit.

https://dendrographe.w3spaces.com/maquettage-avec-cellules.html

Étape 2

https://www.w3schools.com/code/tryit.asp?filename=GKKRGE6U9UB9

Étape 3

https://www.w3schools.com/code/tryit.asp?filename=GKKSOY1QV8P7

Étape 4

https://www.w3schools.com/code/tryit.asp?filename=GQMPRRPTI3SP

La typographie

Pages de référence :
https://www.w3schools.com/w3css/w3css_defaults.asp
https://www.w3schools.com/w3css/w3css_text.asp
https://www.w3schools.com/w3css/w3css_fonts.asp

Utilisation des classes de fontes de w3.css

https://www.w3schools.com/code/tryit.asp?filename=GQMT29OQ5JIG

Utilisation d’autres polices de caractères – Safe fonts

https://www.w3schools.com/code/tryit.asp?filename=GQMSA98ZEKWQ

Utilisation d’autres polices de caractères – Google Fonts

https://www.w3schools.com/code/tryit.asp?filename=GQMU16N8W9U4