Thème des exercices : CSS

Cet exercice consiste à créer une interface simple et fluide pour un site internet.

Cet exercice consiste à créer une interface simple et fluide pour un site internet.

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.

Cet exercice consiste à mettre en forme une page HTML complète à partir d’un modèle.

Cet exercice consiste à utiliser des animations CSS pour faire vivre un « chien » dessiné en HTML et CSS.