diff options
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..52461b2 --- /dev/null +++ b/README.md @@ -0,0 +1,32 @@ +# Laboratoire du futur site web de Deuxfleurs + +## Objectifs techniques + +* Responsive mobile-first design. +* [Media queries CSS](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) : Des images envoyées adaptées à la taille des viewports. +* Pas besoin de Javascript : Le CSS3 ça déchire, on peut faire des infobulles, des animations, de la parallax. (Navigateurs compatibles depuis 7 ans ou plus.) + +## Idées graphiques + +* Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu. +* S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone. +* Exploiter l'illustration au maximum. En la laissant fixée en fond de page tandis que les éléments graphiques défilent ? + + +## Inspirations + +* [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips) + + On peut faire tout ce qu'il faut avec CSS3 ! + + Néanmoins, *rendre un site accessible sans outils a l'air compliqué*. + +* [W3C Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) + + Utiliser des bannières qui donnent du sens au contenu. + +* [Semantic CSS] (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) + + Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique. + + |