Pour évaluer nos compétences sur le Responsive Design, notre formateur nous a demandé de créer une page d’un blog fictif, avec les indications suivantes : Il m’aura fallu une vingtaine d’heures pour réaliser le travail ci-dessous : Mon code HTML : Le CSS a été mis dans deux fichiers. Le premier permet de regrouper tous…Continue reading Évaluation sur le Responsive Design
Mois : juillet 2018
Responsive design – Intégrer un menu responsive
Dans notre exercice de mise en page en Responsive Design, une précision sur l’utilisation d’un menu « burger » et de son menu déroulant, avec deux méthodes possibles, en sachant que la seconde version est adaptée aux mobiles. VERSION 1 : au passage de la souris sur le burger Le code HTML (avec raccourci Emmet) : <!– raccourci…Continue reading Responsive design – Intégrer un menu responsive
Responsive design – Utiliser les media queries
Les requêtes média (media queries) permettent de modifier l’apparence d’un site en fonction du type d’appareil et de ses caractéristiques, que ce soit sa résolution d’écran ou la largeur de la zone d’affichage (viewport). Cet exercice a permis de travailler sur trois types d’affichage : le mobile, la tablette et le PC. Ci-dessous, le code HTML…Continue reading Responsive design – Utiliser les media queries
Habiller la page en CSS ‐ les bordures
L’objectif de ce cours et de créer 13 exemples de bordures et ombres avec du CSS à partir d’une capture écran fournie par le formateur. Ci-dessous le résultat à obtenir : A partir de l’exemple 14, le formateur nous a demandé d’en créer d’autres. Ci-dessous vous pouvez voir mes travaux : On commence par la…Continue reading Habiller la page en CSS ‐ les bordures