Et maintenant ?
Tu sais maintenant créer un site simple et le mettre en ligne ! Tu peux étoffer ton site en apprenant des fonctionnalités de HTML et du CSS, ou bien améliorer tes outils en utilisant un générateur de sites.
Pour t’aider dans la suite de tes aventures, cette page explique comment trouver de nouvelles informations pour apprendre, comment résoudre les messages d’erreur, mais aussi en quoi consiste un générateur de site.
Les générateurs de site
La plupart des sites contiennent plusieurs pages qui partagent la même présentation, mais dont le contenu est différent. Par exemple, les articles d’un blog, ou les recettes d’un site de cuisine, ont toujours la même mise en page.
En réalisant ton propre site, tu as peut-être trouvé compliqué de devoir copier-coller le code HTML entier d’une page juste pour créer une autre page avec un contenu différent. Les générateurs de site simplifient cela : tu crées un seul modèle HTML (ou template) et tu rédiges le contenu de tes pages séparément. Le générateur crée ensuite toutes les pages HTML en suivant le modèle.
- Poireaux
⋯
- Jambon
⋯
- Œufs
⋯
<html> <body> <h1>La cuisine de Marie</h1> <h2>{title}</h2> {content} </body> </html>
<html> <body> <h1>La cuisine de Marie</h1> <h2>La tarte aux poireaux</h2> <p>La tarte que faisait ma grand-mère le week-end.</p> <h3>Ingrédients</h3> <ul> <li>Crème</li> <li>Poireaux</li> </ul> </body> </html>
<html> <body> <h1>La cuisine de Marie</h1> <h2>Le croque-monsieur</h2> <p>Le sandwich préféré des français.</p> <h3>Ingrédients</h3> <ul> <li>Pain de mie</li> <li>Jambon</li> </ul> </body> </html>
<html> <body> <h1>La cuisine de Marie</h1> <h2>La quiche lorraine</h2> <p>La recette traditionnelle de la région.</p> <h3>Ingrédients</h3> <ul> <li>Lardons</li> <li>Œufs</li> </ul> </body> </html>
Si cela t’intéresse, tu peux essayer Astro, un générateur moderne et populaire pour créer des sites personnels. Le tutoriel officiel est traduit en français.
En apprendre plus
Pour en apprendre plus sur une fonctionnalité de HTML, CSS ou JS, va voir sa documentation sur MDN. Par exemple, si tu veux des exemples de la propriété CSS font-size, tu peux chercher « font size mdn » sur Internet. C’est le meilleur endroit pour obtenir des informations claires et complètes.
Si tu souhaites réaliser quelque chose de nouveau, sans savoir par où commencer, tu peux poser des questions à ChatGPT qui te fournira un panel de solutions à comparer. N’hésite pas à l’orienter en disant que tu débutes, et à lui demander d’approfondir ses explications si besoin.
Tu peux également décrire ton problème en quelques mots sur un moteur de recherche comme Google, de préférence en anglais. Tu tomberas le plus souvent sur le forum StackOverflow, où des humains ont probablement déjà eu le même problème que toi. Cependant, ne copie pas aveuglément le code que tu trouves sur les forums, car les solutions données peuvent être obsolètes. Si le message date de plus de 5 ans, il peut être intéressant de vérifier si une méthode plus récente et efficace existe.
Tu trouveras des solutions obsolètes assez fréquemment si tu apprends le JavaScript. Évite les solutions basées sur la librairie jQuery, car les mises à jour de JavaScript ont probablement apporté les fonctionnalités dont tu as besoin. Examine toutes les réponses avant de t’inspirer de celle qui te convient le mieux.
Utiliser un assistant IA
Si tu possèdes une adresse mail étudiante, tu peux obtenir un abonnement gratuit à GitHub Copilot, qui est basé sur GPT et s’intègre à VS Code pour t’assister. Il peut suggérer une suite à ton code, résoudre les erreurs et répondre à tes questions en se basant sur l’ensemble de tes fichiers. Bien sûr, les suggestions ne sont pas toujours idéales, mais cela peut accélérer les tâches simples et te donner de nouvelles idées.
J’ai eu une erreur !
Certains débutants en informatique peuvent se sentir paralysés à la vue d’un message d’erreur en rouge. En réalité, tu seras régulièrement confronté·e à des erreurs durant le développement, car personne n’écrit du code parfait du premier coup !
Cela t’es peut-être déjà arrivé de faire des erreurs d’inattention : mal fermer une balise HTML, oublier un point-virgule en CSS… Si une erreur claire te pointe le problème, tu perdras beaucoup moins de temps ! Loin d’être des sanctions, les messages d’erreur sont des outils pour t’aider. En utilisant des outils de développement plus avancés, comme TypeScript et Astro, tu obtiendras des messages d’erreur plus précis et qui te guideront mieux.
Il peut être utile de traduire les mots anglais inconnus pour comprendre les problèmes. Sur cette
image, l’erreur indique qu’il manque un : avant blue, car en anglais, « colon expected »
signifie « deux-points attendu ».
Un message d’erreur te paraît vraiment incompréhensible ? Copie-colle-le dans ChatGPT pour obtenir une explication plus accessible, dans GitHub Copilot pour comprendre le rapport avec ton propre code, ou bien sur Google pour vérifier s’il s’agit d’un bug commun.
Résoudre les problèmes de CSS
Le savais-tu ? Tous les navigateurs n’affichent pas le CSS de la même manière, surtout si tu utilises des fonctionnalités récentes. Il existe trois moteurs de rendu populaire : celui de Safari sur Mac et iOS, celui de Firefox, et celui de Chrome qui est également utilisé par d’autres navigateurs comme Microsoft Edge.
Pour t’assurer que ton CSS fonctionne bien, tu peux tester ton site avec un navigateur basé sur Chrome, puis Firefox et Safari, ou bien consulter le site Can I use. Ce site est particulièrement pratique pour connaître les problèmes de Safari si tu n’as pas accès à un Mac ou un iPhone. Bien sûr, tu n’auras pas besoin de faire tout ça dès le début, mais penses-y lorsque ton site devient plus complexe !