Bonjour à toi, jeune développeur ! Aujourd'hui, tu vas découvrir comment faire un petit site Internet en manipulant les langages HTML, CSS et JavaScript !
- INTRODUCTION
- TABLE DES MATIÈRES
- PRÉ-REQUIS
- FONCTIONNEMENT D'UN SITE WEB
- CRÉER UN SITE WEB
- POUR LES PLUS COURAGEUX
- Un navigateur web ouvert sur CodePen.
- Et c'est tout ! (pour une fois !)
CodePen.io est un site qui permet de développer un micro site web sans avoir à configurer quoi que ce soit. Pendant que vous écrivez ton code, votre site se mettra à jour en temps réel !
Un site web est composé de 3 parties :
- Le HTML
- Le CSS
- Le JavaScript
Le HTML est le langage qui permet de créer la structure de votre site. C'est grâce à lui que vous pouvez créer des paragraphes, des titres, des images, etc. Pour imager, le HTML est le squelette de votre site. Si vous voulez en savoir plus sur le HTML, je vous conseille de lire ce tutoriel.
Ou alors voici quelques exemples de balises HTML :
<!DOCTYPE html>
<html>
<head>
<title>Mon premier site</title>
</head>
<body>
<h1>Bonjour à tous !</h1>
<p>Je suis un paragraphe</p>
</body>
</html><a href="https://www.google.com">Cliquez ici pour aller sur google</a><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo de google"><ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Il y a beaucoup d'autres balises HTML, mais je vous laisse découvrir par vous-même.
Le CSS est le langage qui permet de mettre du style à votre site. C'est grâce à lui que vous pouvez changer la couleur de votre texte, la taille de votre texte, etc. Pour imager, le CSS est la peau, le "makeup" de votre site. Les fichiers css sont généralement nommés "style.css" et sont stockés dans un dossier nommé "css" -- dans notre cas, CodePen.io nous fait grâce d'intégrer automatiquement tout ça, donc rien à faire de ce côté là !
Si vous voulez en savoir plus sur le CSS, je vous conseille de lire ce tutoriel. Ou alors voici quelques jeu online pour apprendre le CSS :
C'est pas vraiment ce qu'il manque comme jeu pour apprendre le CSS. Voici quelques exemples de code CSS :
h1 {
color: red;
}h1 {
font-size: 50px;
}body {
background-color: black;
}img {
width: 100px;
}Et plein d'autres choses encore.
Le JavaScript est le langage qui permet de rendre votre site dynamique. C'est grâce à lui que vous pouvez faire des animations, des formulaires, etc. Pour imager, le JavaScript est le cerveau de votre site. Les fichiers JavaScript sont généralement nommés "script.js" et sont stockés dans un dossier nommé "js". Le javascript est un langage très puissant, il vas vous permettre de faire intéragir votre site avec l'utilisateur, de faire des formulaires, de faire des animations, etc.
Si vous voulez en savoir plus sur le JavaScript, je vous conseille de lire ce tutoriel.
Maintenant que vous savez comment fonctionne un site web, vous pouvez commencer à créer le vôtre. Trouvez un thème ou un sujet qui vous plait, une idée de site, etc. et lancez-vous !
Si vous voulez trouvez des idées de site, vous pouvez aller sur Dribbble.
Si vous voulez trouver des thèmes pour votre site, vous pouvez aller sur ThemeForest.
Et voici une pelleté de site pour vous aider à créer votre site ou bien pour avoir des idées / code :
Pour les plus courageux vous pouvez faire ce qu'on appelle des call API. C'est à dire que vous pouvez faire des requêtes à des API pour récupérer des données et les afficher sur votre site. Vous pouvez donc intégrez des données de météo, images, gifs, etc. sur votre site.
Une API est une interface de programmation qui permet de récupérer des données. Elle est généralement gratuite et vous pouvez l'utiliser pour faire des requêtes à partir de votre site. Une API marche grâce à des URL et à des paramètres. Il existe plusieurs types de requètes (GET, POST, PUT, DELETE, etc.)
vous pouvez voir dans le dossier code/ des exemples de requêtes à des API.
Voici quelques api pour vous aider :