Créer ton site web - Codepen

Ton Site Web - Codepen

L’Atelier du jour

Créer un site internet sur Codepenpour présenter votre idée

Nos outils d’aujourd’hui

CodepenÉditeur de code

CodePen, c'est un site pour créer et partager des mini-sites web !

Qu’est-ce que le HTML ?

• Le HTML (HyperText Markup Language) est la langue des sites web.

• Il sert à construire la structure d’une page, un peu comme les murs d’une maison.

Qu’est-ce que le CSS ?

• Le CSS (Cascading Style Sheets) est comme la peinture et la décoration de ta page web.

• Il sert à rendre une page jolie et à changer son apparence.

Qu’est-ce que le JavaScript ?

• Le JavaScript est la partie intelligente d’une page web.

• Il permet de rendre la page interactive, comme :
• Afficher un message quand on clique sur un bouton.
• Faire bouger des éléments.

En résumé

• HTML : construit la page (les murs).
• CSS : décore et embellit la page (les peintures).
• JavaScript : donne de la vie et de l’interactivité (comme la carte Google Maps).Avec ces trois outils, tu peux créer des sites modernes et interactifs ! 🎉

Connecte-toi à Codepen

• Rendez-vous sur : https://codepen.io/your-work

• Nom d’utilisateur (username) : hackathon@startupforkids.fr

• Mot de passe (Password) : Hackathon4S4K!

Dupliquer votre projet

• Choisisse le projet “ Template “

• Duplique le projet en cliquant sur “Fork” en bas à droite

• Renomme le nom du projet par le tien ou ton équipe

• Vous pouvez aussi créer votre compte sur Codepen et copier coller le code HTML, CSS et JS

Sauvegarder bien votre projet

• Cliquez sur “ Save “ qui se trouve en haut à droite

Incorporer une image dans Codepen

• Connecte toi à ton compte google ou créez un compte

• Créer un album et autoriser le partage sur google image

• Afficher l’image et copier l’adresse de l’image avec un “clique droit”

• Colle l’URL dans Vittascience (img src =)

• Voir les étapes ici

Incorporer un texte dans Codepen

• Repère l'endroit où tu veux ajouter ton texteSi tu travailles avec des sections colorées (comme des "cards"), trouve la partie du code qui correspond à cette section.
• Utilise la balise <p> pour ajouter ton texteLa balise <p> est utilisée pour écrire des paragraphes dans HTML.Exemple :

C’est quoi une API Google Maps

📌1 - Qu’est-ce qu’une API ?

• Une API est comme un serveur au restaurant :
  • Tu passes une commande (une demande d’information).
  • L’API va chercher les données et te les renvoie toutes prêtes.

📌2 - Et une API Google Maps ?

• C’est un outil qui te permet d’utiliser les cartes de Google sur ton site ou application.
  • Tu peux afficher des cartes, des itinéraires, ou trouver des lieux.
  • La clé API est comme un billet pour utiliser cet outil.

À toi de jouer avec l’API Google Maps

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIBnAKcalNMDaQ3ZZSWc0cJSd0Bt8i7c0&libraries=places"></script>

Merci de votre attention

Propulsé par

sharon@startupforkids.fr

Document confidentiel à usage strictement réservé

ATELIER RÉUSSI !

Voici le code de validation pour cet atelier : 👇

Codepen

Maintenant, rentre ce code en bas de page !