
#1 Application entretien des plantes
Nous ouvrons le bal des challenges avec cette première maquette d’application d’entretien de plantes.
Qu’est-ce que cette catégorie challenges ?
Dans cette catégorie, vous retrouverez des exercices gratuits pour pratiquer sur différentes thématiques : la prise en main de logiciels de design comme la pratique technique du code !
Il se peut qu’il y ait des fichiers à télécharger pour réaliser le challenge : dans ce cas, RDV à la fin de l’article où vous trouverez un mini-formulaire. Il suffit de renseigner votre adresse email, et quelques secondes après, à la place du petit formulaire, vous trouverez le lien de téléchargement ! ?
Une fois votre challenge terminé, n’hésitez pas à nous partager votre résultat sur les réseaux sociaux ou directement ici en commentaire !
Challenge #1
Pour ce premier challenge, vous pouvez choisir entre 2 niveaux :
- Niveau 1 : reproduction de la maquette
- Niveau 2 : intégration en HTML et CSS
Toutes les ressources sont disponibles en téléchargement à la fin de l’article.

Niveau 1 : reproduction de la maquette
Cela vous permet de prendre en main les outils de conception d’interfaces. Nous vous recommandons l’utilisation d’Adobe Xd (gratuit sous MacOS et Windows) mais vous êtes libre d’utiliser la solution de votre choix (par exemple Sketch, Figma, …).
Niveau 2 : intégration de la maquette
Si vous souhaitez vous entraîner à la pratique du HTML/CSS, vous pouvez vous lancer sur l’intégration de ces 2 interfaces.
- Largeur : 375px
- Hauteur 812px
Vous pouvez utiliser l’éditeur de code de votre choix : Visual Studio Code, Brackets, ou même le Notepad. Nous avons cependant une préférence pour Visual Studio Code. ?
Télécharger les ressources
Aller plus loin…
Vous souhaitez avancer et vous former à l’UI-UX Design ? Découvrez notre formation dédiée qui vous permettra d’apprendre les techniques pour réaliser des interfaces web et mobiles jolies et efficaces ainsi que les langages de code HTML et CSS pour les intégrer.