Coder votre propre site Web

Avez-vous déjà voulu apprendre à concevoir des pages Web ou à créer un site en ligne? Aujourd’hui, nous allons vous montrer comment créer votre propre site web personnel! Regardez la vidéo du didacticiel pour voir Maya, instructrice de Juni, vous guider à chaque étape du processus.

Lisez la suite pour plus d’informations sur l’importance de l’apprentissage du développement Web, un guide étape par étape pour accompagner la vidéo et pour en savoir plus sur les outils que vous pouvez utiliser pour améliorer encore votre expérience de développement Web.

RAPPELEZ-VOUS:

  • Le site Web de ce tutoriel n’est qu’un exemple de projet à des fins d’enseignement. Avant de commencer, gardez à l’esprit que les mineurs ne doivent pas publier d’informations personnelles en ligne comme votre nom complet, votre adresse ou votre numéro de téléphone! Soyez également prudent lorsque vous téléchargez des photos personnelles en ligne.
  • Si vous ne savez pas ce qui peut être téléchargé, vérifiez toujours auprès d’un adulte.

Pour qui est-ce?

 Les résultats d'apprentissage du projet de codage HTML / CSS pour débutants Site Web personnel.
Ce résumé des informations sur le projet et des résultats d’apprentissage vous aidera à décider si ce projet de codage HTML/CSS vous convient.

Ce projet relève de notre classe de codage JavaScript de niveau 1 pour les enfants. Ce tutoriel HTML / CSS pour débutants est destiné aux étudiants qui souhaitent un projet de défi moyen, d’environ 121 lignes de code. Il sera utile d’avoir une compréhension de base du fonctionnement du HTML et du CSS au préalable, mais si vous êtes complètement nouveau, nous expliquons également plus de bases dans cette vidéo!

Ce tutoriel est idéal pour les débutants en codage, en particulier ceux qui s’intéressent au design ou à l’art. Nous recommandons que les étudiants soient âgés de 12 ans ou plus pour suivre.

Pour les résultats d’apprentissage, vous aurez beaucoup de pratique avec div, listes, liens, position, affichage, texte (h1 / h2 / p), polices et CSS général. On estime que ce projet vous prendra environ 40 minutes ou plus, selon votre créativité, mais vous devriez aller plus vite ou plus lentement à votre rythme!

Pourquoi Apprendre le Développement Web ?

De nos jours, vous n’avez pas besoin de connaître le développement web ou le codage pour créer un site Web. Vers la fin de cet article, nous vous montrerons quelques créateurs de sites Web par glisser-déposer qui rendront le processus incroyablement facile à faire. Alors pourquoi devriez-vous apprendre le développement web? C’est une excellente question.

Personnalisation illimitée

Tous les outils de création de sites Web faciles sont en fait limités. Ils vous offrent un ensemble de thèmes et de plugins très faciles à utiliser pour les débutants – tant que vous n’avez pas besoin de les modifier.

Lorsque vous avez besoin de modifier un thème ou de faire quelque chose de plus personnalisé avec votre site Web, cependant, vous aurez besoin d’au moins une compréhension de base du code de développement Web. Par exemple, avec un peu de connaissances en Javascript, vous pouvez intégrer presque tous les flux de médias sociaux dans votre site Web!

Carrières en codage & Fondations

Si vous avez déjà envisagé une carrière en codage, les connaissances en conception Web et en développement Web vous donneront également une longueur d’avance. Le développement Web aide les enfants et les nouveaux codeurs intéressés par l’art et le design à explorer leur passion tout en apprenant les bases du codage. Outre la carrière, l’apprentissage du codage pour les enfants présente également d’innombrables avantages en termes de compétences de vie.

Applicable à de nombreux domaines

Enfin, pouvoir créer son propre site Web est une compétence précieuse à l’ère numérique d’aujourd’hui. Les blogueurs veulent que les développeurs en fassent des blogs personnalisés. Les entreprises Internet recherchent des développeurs pour créer des sites de commerce électronique au lieu de simplement publier des articles sur Amazon.

C’est un âge d’or pour la conception et le développement de sites Web, et un bon moment pour apprendre à construire votre propre site!

Commençons!

Nous allons utiliser HTML et CSS de base pour apprendre à créer un site Web personnel simple.

Démo du projet

Avant de commencer à écrire du code, voyez comment fonctionne notre projet fini pour référence. Regardez la vidéo pour découvrir toutes les fonctionnalités du site Web de notre projet.

Vous pouvez également voir notre code de solution de projet si vous êtes bloqué.

Ce qu’il faut garder à l’esprit avant de commencer:

  • Il y a un en-tête d’image avec du texte dessus. Le texte est de différentes tailles et utilise deux polices différentes. Il a également un contour blanc.
  • La section blanche en dessous comporte deux parties côte à côte.
  • Nous avons une liste d’hyperliens, qui renvoient vers une autre page. Lorsque vous les survolez, ils deviennent bleus.
  • Il y a aussi une section À propos de moi avec du texte.
  • En dessous, il y a une section expérience avec un arrière-plan de couleur différente.

Étapes pour coder le Projet

Pour construire notre site Web, nous suivrons cet ordre d’étapes. Regardez le tutoriel pour voir comment l’instructeur Maya code chaque partie et suivez les explications ci-dessous.

  1. Ajoutez l’en-tête de l’image & le texte qui s’y trouve.
  2. Créez la liste des liens que vous souhaitez partager.
  3. Créez la section À propos de moi.
  4. Créez la section Expérience.

Tutoriel étape par étape

Étape 1: Ajoutez l’en-tête de l’image & le texte qui s’y trouve.

  • Créez un div avec un positionnement relatif pour contenir l’image et le texte.
  • Créez un div pour contenir le texte et utilisez le positionnement absolu pour le placer sur l’image.
  • Utilisez <h1> et <h3> pour ajouter le texte.
  • Utilisez CSS pour modifier la police du texte.
  • Utilisez CSS pour supprimer le remplissage de marge supplémentaire & autour de l’image.

Étape 2: Créez la liste des liens que vous souhaitez partager.

  • Créez un div avec un positionnement relatif pour contenir la section liens et À propos de moi.
  • Ajouter un remplissage à la div.
  • Créez un div avec affichage en bloc en ligne pour contenir la liste des liens.
  • Utilisez <ul> pour créer une liste.
  • Utilisez <li> et <a> pour créer les liens.
  • Utilisez <i> et un lien font-awesome pour ajouter des icônes.
  • Modifiez le CSS pour qu’il ressemble à l’original.

Étape 3: Créez la section À propos de moi.

  • Créez un div avec un affichage en bloc en ligne pour contenir la section À propos de moi.
  • Utilisez <h3> et <p> pour ajouter du texte.

Étape 4: Créez la section Expérience.

  • Créez un div avec un positionnement relatif pour contenir la section Expérience.
  • Créez un div pour la première expérience et utilisez <h4> et <p> pour ajouter du texte.
  • Ajoutez plus de divs d’expérience!

Prochaines étapes

Excellent travail! Maintenant, n’hésitez pas à ajouter d’autres sections à votre site Web. Certaines idées peuvent inclure une section pour les projets sur lesquels vous avez travaillé ou les clubs dans lesquels vous vous trouvez. Vous pouvez également télécharger votre nouveau site Web sur le Web en utilisant les pages Github et Github.

Outils de création de pages Web

 plusieurs personnes utilisent un outil de création de pages Web pour créer un site Web

Comme nous l’avons mentionné précédemment, il existe plusieurs créateurs de sites Web. La plupart des meilleurs créateurs de sites Web sont conçus pour rationaliser le processus en vous fournissant des modèles, des interfaces de glisser-déposer et toutes les autres fonctionnalités dont vous avez besoin pour créer un site Web personnel gratuit.

Ce n’est pas parce que vous avez une compréhension de base du développement Web que vous devez oublier ces outils. Ils peuvent vous aider à héberger votre nouveau site Web, à trouver un domaine personnalisé (le nom et l’adresse de votre site Web) et à vous proposer des modèles, des thèmes et des plugins qui accéléreront votre processus de conception Web.

En prenant soin des bases, ces outils vous donnent l’occasion de concentrer vos nouvelles compétences en codage sur la personnalisation de votre site Web à la perfection! Ou – même si vous voulez tout construire à partir de zéro — ces outils peuvent vous donner d’excellentes idées sur ce qu’il faut construire et comment le construire.

Voici quelques-uns des outils les plus populaires pour la création de pages Web:

  • Wix

Wix est l’un des constructeurs de sites Web les plus faciles à utiliser. Leur plan gratuit est suffisamment complet pour en faire une excellente option pour le constructeur de sites Web pour enfants, tant que vous êtes d’accord avec le fait que votre URL soit un sous-domaine de Wix (sitename.wixsite.com ). Ils ont des plans payants avec des prix raisonnables si vous dépassez le niveau gratuit.

  • Accueil

Bien que les gens le connaissent comme un créateur de site Web gratuit, ce que WordPress est vraiment un système de gestion de contenu (CMS). En un sens simple, la différence est qu’un créateur de site Web est plus facile à utiliser, mais un CMS offre plus de possibilités de personnalisation. Bien que WordPress lui-même soit gratuit, vous devrez peut-être payer pour certains thèmes et plugins ou pour l’hébergement si vous voulez votre propre nom de domaine.

  • Bonbon

Weebly est un constructeur de sites Web, un peu comme Wix. La principale différence est que Weebly offre beaucoup moins de personnalisation, ce qui en fait une option conviviale idéale pour coder pour les enfants, mais moins susceptible de grandir avec vous à mesure que vos compétences en création de sites Web s’améliorent.Continuez à apprendre: Cours de développement Web pour les enfantscongratulations, vous avez maintenant votre propre site web! C’est une étape passionnante pour laquelle vous devriez vous sentir incroyablement fier. L’apprentissage ne doit pas s’arrêter là non plus.

Continuez à apprendre: Cours de développement Web pour les enfants

Juni Learning propose des cours de programmation Web pour les enfants qui vous donneront les compétences dont vous avez besoin pour dynamiser votre nouveau site, ou même pour créer des applications et des portefeuilles Web. En dehors du développement Web, nous enseignons également des cours de codage pour les enfants de 8 à 18 ans dans une variété de langages tels que Scratch, Python, Java, C ++, etc.

Consultez nos cours en ligne pour enfants ou contactez notre équipe de conseillers Juni pour savoir quel cours convient le mieux à votre élève!

Articles

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.