Le déconfinement nous permet progressivement un retour à la normale. Bonne reprise à tous.

Construire un Robot

Introduction

Dans ce projet, vous apprendrez à positionner des images pour créer votre propre robot !

Ce projet couvre des éléments des composantes suivantes de Raspberry Pi Digital Making Curriculum:


Donner des yeux à votre robot

Donnons des yeux à votre robot !

  • Ouvrez ce trinket : jumpto.cc/web-robot. Le projet doit ressembler à ça :

  • Chaque image de ce projet possède son propre nom (ou id). Par exemple, le lien HTML pour les images des yeux et du visage (‘face’, ‘eyes1’ et ‘eyes2’ commençant à la ligne 8 de votre code) ressemblent à ça :

  • Vous pouvez utiliser l’id d’une image pour lui donne son propre style, en utilisant le symbole #. Cela vous permet de styliser chaque image séparément.

    Cliquez sur le fichier style.css. Vous voyez comme la taille du visage du robot et celle des autres images sont différentes ?

  • Ajoutez ce code CSS pour donner un style aux yeux du robot :

    Remarquez que vous stylisez uniquement l’image eyes1, en utilisant #eyes1 dans votre CSS. Si vous préférez, vous pouvez utiliser #eyes2 ou #eyes3 à la place !

  • Vous remarquez comme chaque image est affichée l’une après l’autre ? Il s’agit d’un positionnement relatif. Si vous voulez dire au navigateur exactement où placer les yeux de votre robot, il vous faudra utiliser un positionnement absolu à la place.

    Ajoutez ces 3 lignes de code au CSS pour votre image eyes1 :

    Vous devriez voir les yeux de votre robot se déplacer au bon endroit sur votre robot.

    Ce code CSS dit au navigateur à quelle distance afficher l’image du sommet/de la gauche de la page Web.

    Vous pouvez utiliser bottom au lieu de top pour dire au navigateur à quelle distance du bas de l’écran afficher l’image, et utiliser right au lieu de left.


Donner une bouche à votre robot

Donnons une bouche à votre robot !

  • Ajoutez le code CSS suivant pour styliser votre image mouth1 :

  • La bouche de votre robot a l’air très petite, et elle ne se trouve pas au bon endroit.

    Pouvez-vous modifier cela en effectuant des changements dans votre CSS ?


Défi: Concevez votre propre robot

Utilisez ce que vous avez appris pour finir la conception de votre propre robot. Voici quelques exemples de ce à quoi votre robot pourrait ressembler :


Défi: Ajoutez vos propres images

Pouvez-vous trouver des images supplémentaires à ajouter à votre robot, et les positionner sur votre page Web ? Vous pouvez même remplacer le visage de votre robot par le vôtre !

Produit ajouté avec succès à la comparaison des produits