Blog

Challenge #jecodechezmoi n°5 - Créer son site web

08 April 2020

Tu as entre 13 et 18 ans ?

Tu es maker débutant ou confirmé ?

Tu souhaites découvrir un nouvel outil d'expression ou te créer une image sur le web ?

À tes balises, ce challenge est fait pour toi !

 

Crée ton journal de bord


screenshot-scratch.mit.edu-2020.04.08-14_55_12

 

Pour ce challenge, tu es entièrement libre, il te faudra créer un site web à ton image ! 

Jour après jour, semaine après semaine, mets en avant les activités de ton quotidien.
Intègre des visuels de tes dessins, tes photos, poèmes, une recette de cuisine... Tu l’auras compris, tout est possible ! crée un site internet qui te ressemble ! 

 

Tu peux par exemple faire une page d’accueil consacrée à tes activités d’expression et faire un lien qui renvoie sur une seconde page où tu présentes les activités sportives que tu effectues à la maison ! 

 

Petite difficulté en plus, tâche de faire un rendu visuellement esthétique pour donner envie aux visiteurs de se balader sur ton site. 

Lorsque tu estimes que ton site web est complet, partage-nous le lien ton site via notre formulaire #Jecodechezmoi :
Je partage mon site  clic-rouge 

 

 

Pour t’aider dans ce challenge, voici un tuto pour apprendre à créer une histoire animée sur Scratch !

Au programme : comment mettre ses textes et ses images avec HTML, modifier ses couleurs avec un fichier CSS, ajouter des pages et finaliser pour rendre son projet trop stylé.

Pour créer ton site, rends-toi sur...  Glitch  clic-rouge !

 

Étape 0 :
Créer un compte glitch

Pour créer ton site, tu vas aller sur glitch.com !
 

Crée ton compte Glitch :

Attention : Pour te créer un compte avec ton adresse mail, il faut que tu puisses avoir accès à tes mails pour copier le mot de passe temporaire que Glitch va t’envoyer.
N’oublie pas de te déconnecter après !

Capture_d’écran_2019-12-09_à_16_16_24

Capture_d’écran_2019-12-09_à_16_22_11

Crée un nouveau projet :

Capture_d’écran_2019-12-09_à_16_32_56-scaled

Supprime les parties inutiles :

Tu vas commencer par supprimer les deux fichiers dont tu n'as pas besoin :

Capture_d’écran_2019-12-09_à_16_33_41

Ensuite, supprime en plus dans le fichier HTML les deux lignes suivantes :

Capture_d’écran_2019-12-09_à_16_39_39
 
Capture_d’écran_2019-12-09_à_16_39_48-scaled 

Découvre l'interface :

Capture_d’écran_2019-12-09_à_16_33_30-1536x773

Capture_d’écran_2019-12-09_à_16_33_26-scaled

 

 

 

Étape 1 :
Mettre son contenu texte et ses images

 
Un bon site passe d'abord par une bonne hiérarchie des informations : titre <h1>, sous-titre <h2>, paragraphe <p>...
Commence par te familiariser avec les balises de bases HTML qui vont te permettre de structurer ton contenu texte et image. Tu vas construire le squelette de ton site !
 

Pour mettre ton contenu texte et tes images, remixe ce projet et laisse toi guider par les <!-- notes --> :

screenshot-exemple-etape1.glitch.me-2020.03.31-17_06_11

   Remixer  clic-rouge  

 

 

Étape 2 :
Modifier ses couleurs avec un fichier CSS

 
Un fichier quoi ? Le fichier CSS vas te permettre de mettre en forme ton contenu, gérer les polices et couleurs de tes textes ou encore la taille de tes images. C'est en quelque sorte la peau de ton site !
 

Pour modifier les couleurs, remixe ce fichier CSS et crée ton propre style :

screenshot-exemple-etape2.glitch.me-2020.03.31-17_07_02

   Remixer  clic-rouge  

 

 

Étape 3 :
Ajouter plusieurs pages et les lier

 
Ton site doit être clair et précis, tu ne peux pas mettre toutes les informations au même endroit. Créer de nouvelles pages ou renvoi vers d'autres sites pour étoffer des sujets qui auraient besoin de plus d'explication. 
 

Crée plusieurs pages à ton site et lie les entre elles :

screenshot-exemple-etape3.glitch.me-2020.03.31-17_07_38

   Remixer  clic-rouge  

 

 

Étape 4 :
Finaliser et rendre esthétique ses pages

 
Enfin, habille ton site ! Donne lui une identité visuel unique qui va lui permettre de se démarquer des autres. Rend le original !
 

Pour finaliser et rendre esthétique ton site, aides toi des ressources suivantes :

 

 

 

Regarde cette page de projets exemples pour trouver plus d’idées ! 

 

Partage-nous le lien ton site sur la page #Jecodechezmoi :
Je partage mon site  clic-rouge 

 

Autres challenges

Challenge #jecodechezmoi N°1

Activité #jecodechezmoi N°2

Challenge #jecodechezmoi N°3

Challenge #jecodechezmoi N°4

Activité #jecodechezmoi N°6

 

Envie d'aller plus loin et de découvrir nos atelier en ligne avec un animateur  ? : 

Jetez un coup d'oeil aux thématiques de stage en ligne ! 

 

Newsletter

Newsletter