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