découvrir les modèles HTML5 UP

Il y a des années, créer un site Web était une tâche très compliquée qui nécessitait des connaissances en programmation, et le louer auprès d'une entreprise coûtait assez cher. Aujourd’hui, cela a changé et grâce à des modèles comme HTML5 UP, vous pouvez créer votre propre site Web personnalisé 100 % gratuit en quelques minutes. Et le meilleur de tout : sans écrire une seule ligne de code.

Qu'est-ce que HTML5 UP

HTML5 UP est un site Web qui démontre principalement que avoir votre propre site web Ce n'est plus un luxe ou une tâche réservée aux experts. Ce site Web nous propose une série de conceptions Web entièrement gratuites et de haute qualité, afin que nous puissions les télécharger et les modifier avec notre contenu sans avoir à programmer. De cette façon, à partir d’un modèle prédéfini, nous pouvons rendre notre site Web opérationnel sur Internet en quelques minutes.

Le principales caractéristiques que nous proposent les modèles HTML5 UP sont :

• Développé en HTML 5 et CSS3, ce qui garantit une compatibilité avec les standards en vigueur et une expérience visuelle attractive.
• Ils sont 100 % réactifs, ils seront donc parfaits sur un ordinateur, un téléphone portable, une tablette, etc.
• Ils ont un design moderne, avec une esthétique épurée, professionnelle et minimaliste.
• Le code source des sites Internet est propre et très bien structuré, ce qui facilite grandement sa modification ou peut être utilisé pour apprendre la programmation.
• Ils disposent d'une licence Creative Commons, ce qui nous permet de les utiliser librement, même dans des projets commerciaux.
• Nous proposons une grande variété de styles différents, des portfolios aux sites Web de photos, en passant par les pages personnelles, les pages de destination et les sites Web d'entreprise.

Comment créer un site Web avec ces modèles

La première chose que nous devons faire si nous voulons utiliser un modèle HTML5 UP pour notre site Web personnel est entrez sur leur site Web principal, sur ce lienet parcourez tous les modèles qu'il nous propose. Chacun d'eux dispose d'une « démo », afin que nous puissions l'essayer en ligne avant de la télécharger. Bien que nous puissions télécharger et adapter celui que nous voulons, certains des plus utilisés, selon l'objectif que nous poursuivons, sont :

• Massivement, idéal pour les blogs visuels.
• Dimension, parfait pour les portefeuilles personnels.
• Éditorial, axé sur le contenu écrit.
• Prologue, largement utilisé pour les présentations personnelles ou les CV en ligne.

Une fois que nous avons choisi le modèle que nous souhaitons utiliser, nous le téléchargeons. Et une fois téléchargé, la prochaine étape sera de le décompresser. Au sein de chaque projet, nous trouverons principalement deux éléments : le dossier « actifs »où nous devons copier les images, les styles, les scripts et le reste du contenu que nous allons utiliser, et le Fichier « index.html »qui sera le site Web lui-même.

Vient maintenant la partie « compliquée », l’édition du site Web. Le plus rapide et le plus simple est d'ouvrir le fichier index.html avec un éditeur de texte, tel que Visual Studio Code, ou tout autre éditeur HTML, et de là, de modifier les textes fournis dans le modèle avec les nôtres. Il faut également modifier les liens vers les réseaux sociaux, les images (pour celles que nous avons préalablement copiées dans le dossier des ressources), etc. Nous pouvons également personnaliser le design et le style en éditant le fichier CSS, ce qui nous permettra d'ajuster les couleurs, les polices ou les tailles.

Une fois tout cela fait, il ne reste plus qu'à tester le site Web dans le navigateur. Nous ouvrons le fichier « index.html » dans Chrome, Edge ou notre navigateur Web de confiance et nous verrons à quoi ressemble le site Web final. Si quelque chose ne nous convainc pas, il suffit de retourner dans l'éditeur, de modifier, de sauvegarder, et en appuyant sur F5, les modifications seront reflétées instantanément.