---
title: Evaluation html, css, js and php
tags: cours, html, javascript
robots: noindex, nofollow
author: Giuseppe Militello
---

# Evaluation html, css, js and php

Réalisez la page proposée ci-dessous dans les règles du W3C


1. Structurez en html5
2. Validez la structure html
3. Testez l’accessibilité avec AXE et LigthHouse
4. Validez le code html au w3c validator
5. Structurez le thème css en commençant par le reset
6. Pour le rendu final séparer chaque section de la page en différents fichier indépendant php (header,section, footer) et rassemblez les dans une page d'index.php

## Partie Javascript
Le javascript doit être employé pour la mise en place un fil d'ariane sur les items du menu. A chaque clique l'item doit rester en sous-brillance pour nous indiquer la où nous sommes.
Exemples ci-dessous.


Le fichier js doit être appelé dans le fichier html. Ce fichier js se trouve dans un répertoire "js" à la racine du répertoire principale. Le fichier doit contenir avant les événemments une fonction principale:

document.addEventListener("DOMContentLoaded",()=>{
        //ici les événemments 
})

Cela permet de charger tout le document html avant les événements de script.

## Vérification de l'envoi de mail et commentaire dans le formulaire

Pour le contrôle du formulaire en php vous devez mettre en place une classe User. Cette classe doit comporter:
1. $user_mail, le commentaire est facultatif
2. Un constructeur pour cette propriété
3. Une méthode pour gérér l'affichage de l'envoi du message
4. Une instance pour l'envoi d'un nouvel utilisateur
5. Des conditions pour vérifier l'envoi des données
6. Une vérification supplémentaire pour savoir si la chaine envoyé est une adresse mail valide

Ci-dessous les trois étapes de vérification:

En dessous afficher le message avec une icone de validation

En dessous si aucun champ est remplie alors afficher un warning

Dans le cas ou l'utilisateur saisie des lettres au hasard, il faut afficher le message suivant:

Pour ce message il ne s'agit pas d'un pattern html5 mais d'une méthode de filtrage mail php

## Contenus à ajouter

1. menu : Home, Compétences, Parcours, Contact
2. Puisque c'est une Single page chaque liens mène à la section correpsondante.

## Police de caractères

1. Raleway (Voir sur google font)
2. Icones : FontAwesome.
Les icones doivent être intégré directement dans le html mais non visible pour les machines : voir les attributs ARIA.
3. Type d'icone dans la page:

//Cdn à intégrer
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

//icones pour le menu

<i class="fa fa-user"></i>

<i class="fa fa-envelope">

//icones pour la section compétence

<i class="fa fa-desktop"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-diamond"></i>
<i class="fa fa-cog></i>

//icones pour le contact

<i class="fa fa-map-marker"></i>
<i class="fa fa-phone"></i>
<i class="fa fa-envelope"></i>

## Technologies autorisées

1. html5
2. css3
3. ES6
4. Php
Aucun framwork est autorisé:
Bootstrap, Matérialize, jQuery
## Structure du répértoire racine

## source image

Image principale


Images galerie





1. Ajoutez un favicon de votre choix

## Critères d'avaluation

3 points : structure correcte au w3c
2 points : utilisation d’une structure sémantique
2 points : intégration des médias et code front modulaire
1 point : approche mobile-first ou responsive
3 point: javascript
4 point: php
2 points : structure du répertoire racine
3 points : structure d’origine « css » et cohérence avec le fichier HTML

Cette exercice est évalué : note /20
Envoyer les rendu zippé avec votre nom, prénom sans espace à l’adresse suivante :
[e-mail]