CREATION D;UN SITE WEB DE A a Z

Introduction Créer un site web de A à Z est une excellente manière de tester ses compétences en développement web. Récemment, j’ai entrepris un projet personnel : créer mon propre portfolio en ligne. Voici une explication détaillée de comment j’ai procédé, les technologies que j'ai utilisées, et surtout, les étapes de création et le code derrière chaque balise HTML et CSS. Voici comment il faut créer un projet web personnel : Choisir l’objectif et le design* : J'ai d'abord réfléchi à l'objectif du projet : créer un site web simple qui présente mon travail de développeur. J'ai esquissé un design de base, en m'inspirant de sites modernes et épurés. Écrire le code HTML* : J'ai commencé par rédiger la structure de base avec les balises HTML nécessaires. Ajouter le style avec CSS* : Ensuite, j'ai créé le fichier CSS pour personnaliser l'apparence du site en fonction de mon design. Interactivité avec JavaScript : Pour certaines interactions (comme les boutons cliquables), j'ai intégré un peu de JavaScript. Utilisation de Git & GitHub pour la gestion de version* : J'ai versionné mon projet avec Git pour garder une trace de mes modifications. Une fois terminé, j'ai déployé mon projet sur GitHub Pages* pour qu’il soit accessible en ligne. Explication du code: HTML : La structure du site* html Mon Portfolio Bienvenue sur mon portfolio Je suis un développeur web, passionné par le code et la technologie.

Apr 19, 2025 - 07:46

Introduction

Créer un site web de A à Z est une excellente manière de tester ses compétences en développement web. Récemment, j’ai entrepris un projet personnel : créer mon propre portfolio en ligne. Voici une explication détaillée de comment j’ai procédé, les technologies que j'ai utilisées, et surtout, les étapes de création et le code derrière chaque balise HTML et CSS.

Voici comment il faut créer un projet web personnel :

Choisir l’objectif et le design* : J'ai d'abord réfléchi à l'objectif du projet : créer un site web simple qui présente mon travail de développeur. J'ai esquissé un design de base, en m'inspirant de sites modernes et épurés.
Écrire le code HTML* : J'ai commencé par rédiger la structure de base avec les balises HTML nécessaires.
Ajouter le style avec CSS* : Ensuite, j'ai créé le fichier CSS pour personnaliser l'apparence du site en fonction de mon design.
1. Interactivité avec JavaScript : Pour certaines interactions (comme les boutons cliquables), j'ai intégré un peu de JavaScript.
Utilisation de Git & GitHub pour la gestion de version* : J'ai versionné mon projet avec Git pour garder une trace de mes modifications. Une fois terminé, j'ai déployé mon projet sur GitHub Pages* pour qu’il soit accessible en ligne.

Explication du code:

HTML : La structure du site*

html

Mon Portfolio

Bienvenue sur mon portfolio

Je suis un développeur web, passionné par le code et la technologie.

: La balise commence le document et le lang="fr" indique que le contenu est en français.

: Contient les métadonnées du site, comme le titre et les liens vers les fichiers externes (comme le CSS).

: Contient le contenu visible du site, comme le texte, les titres et les liens.

: Définit l'en-tête du site avec le titre et une courte description.

: Permet de structurer le contenu, ici pour afficher les projets réalisés.

: Contient des informations de contact, comme un lien mailto.

CSS : Le style du site

css
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: white;
padding: 2


…
- h1 et h2 : J’ai défini différentes tailles pour les titres afin de créer une hiérarchie visuelle.
- ul : J'ai retiré les puces (list-style-type: none) pour rendre les listes plus propres.
- footer : Le pied de page a un fond sombre pour rester cohérent avec l’en-tête et offre un bon contraste avec le texte.



Les difficultés rencontrées

Tout projet a ses défis. Voici quelques difficultés que j’ai rencontrées pendant le développement :
1. Adapter le design à différents écrans : La gestion du *responsive design a été un peu complexe, mais j'ai utilisé les *media queries pour m'assurer que le site s'adapte aux téléphones et tablettes.
2. Intégrer Git et GitHub : Bien que j’aie une bonne maîtrise de Git, la création de branches et la gestion des commits ont dem…
Utiliser Git efficacement* : Gérer les versions de mon code a rendu le processus beaucoup plus fluide et structuré.
- Le déploiement sur GitHub Pages* : Une méthode rapide et gratuite pour mettre mon site en ligne.




Créer ce projet m’a permis d'appliquer mes connaissances théoriques et d'enrichir mon portfolio personnel. Je me sens plus confiant dans mes compétences de développeur web et je suis motivé à continuer à apprendre et à explorer de nouvelles technologies.