Thème des exercices : CSS

Cet exercice consiste à explorer les possibilités offertes par le système de grille de CSS.

Cet exercice consiste à dessiner un renard en HTML et CSS puis à l’animer en CSS.

Cet exercice, pas à pas, consiste à créer une interface de site web simple avec un menu vertical dans une colonne à droite et un contenu fluide.

Cet exercice, pas à pas, consiste à créer une interface de site web simple et fluide sur une colonne avec un menu horizontal.

Consignes de l’exercice Une liste de réseau sociaux : facebook, flickr, linkedin, twitter, vimeo et youtube ; Une couleur pour chaque service : #3b5998, #0063db, #007bb6, #00aced, #aad450, #bb0000.

Cet exercice consiste à rendre adaptable (au sens de responsive web design) une interface web fournie.

Cet exercice consiste à reconstruire un décor avec des éléments fournies au format SVG, puis d’en faire l’animation via CSS.

Cet exercice consiste à créer un cube à l’aide des transformations 3D puis de l’animer et enfin de le personnaliser. Consignes de l’exercice

Cet exercice consiste à explorer les possibilités offertes par les boites flexibles en CSS.

Cet exercice consiste à construire une interface web de type onepage, puis à convertir les styles CSS créés afin de les présenter en exploitant les avantages de SCSS.

Cet exercice consiste à reproduire des modèles en positionnant des éléments html en absolu ou en relatif.

Cet exercice consiste à reproduire à partir d’un modèle des boutons en respectant des effets de transitions CSS

Cet exercice consiste à utiliser des transitions css pour gérer l’affichage d’une galerie d’images. Dans un second temps, la galerie doit être rendue totalement fonctionnelle avec javascript.

Cet exercice consiste à utiliser des animations css pour animer un tableau de pacman.

Cet exercice consiste créer une animation en CSS. L’exercice a plusieurs niveaux de difficultés, il peut être effectué à partir de fichiers .png ou .svg.

Cet exercice consiste à générer une palette de couleurs avec des outils en ligne puis à la présenter proprement en HTML et CSS.

Cet exercice consiste a définir une maquette de page pas à pas en utilisant un positionnement flexible pour disposer les éléments HTML.

Cet exercice consiste à définir une maquette de page pas à pas, à partir d’une page HTML fournie, en utilisant un positionnement flexible.

Cet exercice consiste à créer une grille de mise en forme en utilisant les propriétés des flexbox en CSS.

Cet exercice consiste à construire un tableau en HTML et à le mettre en forme en CSS.