Loading repository data…
Christ-Moungabio / repository
Je présente mes projets en HTML5 sémantique
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Bienvenue dans votre mini-projet de la semaine 2 ! L'objectif de cette semaine est de maîtriser l'architecture d'une page web en utilisant exclusivement du HTML5 sémantique, d'apprendre à inspecter votre code et de garantir un web accessible. Ex: Page de profil personnel.
Ce dépôt sert de modèle de départ. Il contient déjà un fichier de style un peu particulier : semanstyle.css.
<main>, <article>, <nav>, <aside>, etc.).Pour ce projet, vous n'avez pas le droit d'écrire de CSS, ni d'utiliser l'attribut class ou id à des fins de style.
Le fichier semanstyle.css fourni est un fichier de style classless. Cela signifie qu'il applique un design moderne et professionnel uniquement si vous utilisez la bonne balise HTML au bon endroit.
<div> ou des <span> partout à la place des balises sémantiques, votre page restera plate, brute et sans mise en page.Votre code HTML doit parler de lui-même !
index.html à la racine du projet si ce n'est pas déjà fait.<head> de votre document avec la ligne suivante : <link rel="stylesheet" href="semanstyle.css">
Votre projet sera évalué sur la qualité de sa structure, et non sur le design (puisque le CSS est automatisé). Voici votre checklist de validation :
Structure Globale
Présence d'un <header> principal, d'un <main> pour le cœur de la page, et d'un <footer>.
Un menu de navigation propre encapsulé dans une balise <nav>.
Sémantique et Hiérarchie
Utilisation d'au moins un élément <article> (qui générera une carte visuelle) et d'un élément <aside> (pour vos notes ou informations secondaires).
Une hiérarchie stricte des titres : un seul <h1> par page, suivi logiquement de <h2>, puis <h3>. Aucun saut de niveau (interdit de passer d'un <h1> à un <h3> !).
Accessibilité du Formulaire
Utilisation de <fieldset> et <legend> pour regrouper les champs.
Chaque élément <input> ou <select> doit être rigoureusement lié à un <label> via l'attribut for correspondant à l' id de l'input.
Diagnostics (DevTools & W3C)
Zéro erreur sur le Validateur W3C.
En ouvrant les DevTools (F12) de votre navigateur, l'arborescence dans l'onglet Elements doit refléter des imbrications propres sans balises orphelines.
🚀 Bon code à tous ! Ouvrez vos DevTools, inspectez votre code en temps réel et découvrez la puissance d'un HTML bien pensé.
Selected from shared topics, language and repository description—not editorial ratings.
heli2805 /
Je vous présente mon portfolio. Un portfolio interactif que j'ai créé pour mettre en valeur mes compétences, mes projets et mon parcours. Il a été développé en utilisant des technologies simple telles que Html , CSS et JS , avec une mise en page fluide et une navigation facile.
40/100 healthClaveauAlex /
Bonjour et bienvenue sur mon repository. Je me présente je m'appelle Alexandre Claveau et je me suis lancé en tant que freelance depuis Septembre 2020. Je vous souhaite une bonne lecture et n'hésitez pas à participer ! :)
7/100 healthTRAFANOHARANTSOA /
Mon portfolio de Designer Web, dans lequel je présente mes projets développés dans le cadre de ma formation Access Code School.
34/100 healthIDUNU-OLUWA /
Je suis developpeuse web en apprentissage.Ce portfolio présente 2 projets que j'ai réalisés pour pratiquer. Mes pojets sont en HTML, CSS et JAVASCRIPT.
49/100 healthSAID051988 /
Je présente mes compétences, mes formations et mes projets dans ce document. J’y ajoute également mes liens LinkedIn et GitHub ainsi qu’un formulaire de contact. Le but est de tester mes compétences en HTML et CSS.
34/100 healthmgdigi /
Explorez mon portfolio interactif et découvrez mes créations dans le développement web. De la conception élégante aux fonctionnalités dynamiques, je présente mes compétences en HTML, CSS et JavaScript à travers une variété de projets.
27/100 health