Cas d'utilisation Peppubuild : créer votre premier site Web (1)

Peppubuild est une plateforme no-code qui vous permet de créer votre site Web sans écrire de code. Créer un site Web peut être intimidant, surtout si vous débutez dans le codage ou la conception de sites Web. Peppubuild simplifie ce parcours en fournissant une plate-forme conviviale qui vous permet de développer des sites Web tout en maîtrisant les concepts fondamentaux du développement Web. Considérez-le comme un mélange de créativité et de technologie, où l'éducation rencontre l'innovation.

Pourquoi créer un site Web avec Peppubuild ?

Peppubuild offre une entrée sans barrières dans le développement Web. Ses fonctionnalités incluent :

• Modèles prédéfinis : démarrez rapidement avec des mises en page de sites Web personnalisables.
• Édition visuelle : consultez vos modifications en temps réel sans plonger profondément dans le code.
• Vue Code : pour ceux qui souhaitent apprendre le HTML, CSS et JavaScript, un éditeur de code est intégré pour favoriser l'apprentissage pratique.
• Tutoriels interactifs : des guides étape par étape garantissent que vous n'êtes jamais bloqué.

Démarrer avec votre premier site Web

Pour démarrer un projet, vous devez d'abord vous authentifier. Suivez le lien ci-dessus si vous n'êtes pas encore authentifié. Ensuite, cliquez sur le bouton Nouveau projet comme indiqué ci-dessous.

Cliquez sur Projet vide et suivez les instructions pour nommer votre projet. Ensuite, vous serez redirigé vers l’espace de travail du projet.

Barre d'outils de Peppubuild

Tout d'abord, nous allons explorer l'interface de Peppubuild. Voilà à quoi devrait ressembler votre éditeur. J'ai numéroté les icônes de la barre d'outils de gauche à droite.

Icône 1 : C'est l'icône de bloc. Les Blocs sont des composants prédéfinis que vous pouvez faire glisser dans l'éditeur pour former des parties de votre site Web. Par exemple, il existe des blocs de texte et de liens que vous pouvez faire glisser dans l'éditeur. Lorsque vous cliquez sur le bouton, les différents blocs disponibles s'ouvrent dans le panneau latéral droit.

Icône 2 : Cette icône est déjà active, il s'agit du Style Manager. L'éditeur étant vide, vous disposez uniquement d'un texte vous invitant à sélectionner d'abord un élément. Depuis le gestionnaire de styles, vous pouvez ajouter de la couleur, agrandir les textes et effectuer d'autres actions.

Icône 3 : L'icône Règle est utile pour les experts qui ne se soucient pas de la réactivité du Web car ils peuvent faire glisser des blocs dans n'importe quelle position dans l'éditeur. Cela affecte les éléments et l’alignement des pages. Par conséquent, vous ne devez l'utiliser que si vous êtes un développeur technique et pouvez réaligner la page.

Icône 4 : L'icône Supprimer vous permet de tout supprimer sur la page. Si vous souhaitez uniquement supprimer des composants individuels de la page, cliquez dessus et utilisez le bouton Supprimer qui apparaît autour du composant.

Icône 5 : Il s'agit de l'Icône Annuler, bien que vous puissiez annuler les modifications avec CTRL Z, vous pouvez également utiliser le bouton Annuler. Puisque nous n'avons pas de bouton Rétablir, vous pouvez utiliser CTRL Y.

Icône 6 : Il s'agit de l'icône Code Block, qui vous permet de visualiser le code de votre page au format HTML et CSS. Lorsque vous accédez à une nouvelle page, le code de chaque page change pour correspondre au contenu de la page.

Icône 7 : Il s'agit de l'icône Plein écran, qui vous permet d'étendre l'éditeur en pleine page.

Icône 8 : L'icône Aperçu permet de visualiser le contenu de l'éditeur, sans les panneaux latéraux.

Icône 9 : Il s'agit de l'icône Afficher le composant. Lorsqu'il est actif, il affiche la ligne pointillée de guidage autour de chaque composant.

Icône 10 : L'icône Pages s'ouvre dans la barre latérale droite. Il contient différents boutons permettant de gérer les pages et de publier le projet. De Ajouter des pages, à Ajouter un titre Web, à Publier le projet.

Chaque projet possède une page d'index, qui est la page d'accueil. Veuillez ne pas supprimer ou modifier le nom de cette page. Vous pouvez ajouter de nouvelles pages avec le bouton Ajouter une page.

Icône 11 : L'icône Appareil est utile pour vérifier votre projet sur différents appareils, du bureau aux appareils mobiles.

Icône 12 : L'icône Couches affiche une arborescence de tous les composants dans l'éditeur et les éléments qu'ils contiennent.

Icône 13 : Le Logo permet d'accéder au tableau de bord, au lieu d'utiliser le bouton Précédent du navigateur.

Icône 14 : L'onglet Propriétés affiche les propriétés de chaque élément. Lorsque vous faites glisser un bloc dans l'éditeur, vous pouvez vérifier et définir les propriétés dans l'onglet Propriétés. Par exemple, les liens ont une propriété Href, qui accepte et définit l'URL du lien.

Icône 15 : Le bouton Ajouter des données est destiné aux applications Web. Cela vous permet d'ajouter des données externes.

Le bloc de Peppubuild

Peppubuild propose de nombreux blocs utiles pour créer votre page, classés en différentes catégories.

• Barre de navigation : elle contient la navigation supérieure et inférieure ainsi qu'une barre latérale.

• Pages : Ceci contient des blocs pour un modèle de page prêt à l'emploi. Vous devriez commencer par ce bloc si vous avez besoin d'aide pour configurer votre site Web.

• Orientation : Blocs qui modifient l'orientation et la disposition de la page, comme le centre flexible pour organiser le contenu au centre de la page.

• Section : Contient des blocs comme la section héros qui occupe toute une section de la page.

• Éléments : Les éléments qui composent le site internet se retrouvent dans la section éléments.

• Formulaires : Les blocs permettant de créer un formulaire complet se trouvent ici. Le formulaire bootstrap est votre meilleure chance si vous débutez dans le développement Web.

• Animations : Les carrousels et autres animations pour votre site Web se trouvent dans la section animations.

• Basique : Le bloc de base contient des éléments de base pour votre site comme des images, des liens et des textes.

Conclusion : quelle est la prochaine étape ?

Dans la prochaine partie de cette série, nous approfondirons le style de votre site Web, l'intégration de l'interactivité de base avec JavaScript et la publication de votre site à la vue du monde entier !

Avec Peppubuild, créer votre premier site Web n'est plus un défi : c'est un voyage passionnant dans le monde numérique. Commencez à construire dès aujourd'hui !

Donnez-nous une étoile sur Github si vous aimez notre travail. Envoyez également un message à contact@peppubuild.com si vous souhaitez configurer Peppubuild pour votre agence. Nous serons ravis d'avoir de vos nouvelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!