Dégradés, ombres portées en css, utilisez des générateurs!

Ajuster un dégradé, générer une ombre portée, c’est beaucoup plus facile à faire quand on a à disposition une interface graphique.

Il existe beaucoup de sites qui vous offriront ce service, à vous de faire vos recherches…
Lien

Z-index et absolute

Le concept du z-index parait simple, plus la valeur est haute, plus l’élément sera en haut de pile, mais dans le pratique, si on utilise un positionnement en absolute ça pourrait ne pas se passer comme vous l’entendez et vous pourriez y perdre quelques cheveux.


Voici un article qui vous aidera à mieux comprendre ce qui se passe:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Sticky Footer

Un footer qui se retrouve en milieu de page, ça ne se fait pas!

Un pied de page (footer) doit toujours être en bas de page, même si le contenu ne remplis pas la page. Malheureusement, bon nombre de templates négligent ce fait.
sticky footer

Dans le lien ci-dessous vous découvrirez 5 techniques vous permettant de le faire, à vous de choisir la meilleure technique suivant l’architecture de votre site.
(en ce qui me concerne, la méthode avec calc() me parait la plus commode, pour autant que vous n’ayez pas trop de contraintes concernant la rétrocompatibilité)

Media Queries Breakpoints

Une liste des valeurs de rupture (breakpoint) à mettre dans vos media queries, mais veillez en priorité a respecter les valeurs de la feuille de style mère.
La page est assez bien fournie et regroupe les principaux framework css du marché.
Tout cela reste des suggestions et ça ne couvrira pas forcément tous les spécificités des appareils du marché.


https://media-queries.aliasdmc.fr/media-queries-live.php

Flexbox: des grenouilles et des nénuphars

Un quizz très complet où vous aiderez des grenouilles à retrouver leurs nénuphars.
.. et par la même occasion de découvrir beaucoup de fonctionnalités que vous ignoriez probablement. Même si vous pensez être le king de la Flexbox, faites-y un tour.


https://flexboxfroggy.com/#fr