---
title: Welcome on Instagram évaluation niveau 1
tags: evaluation, html, css
robots: noindex, nofollow
author: Julien Noyer
---

# Welcome on Instagram évaluation niveau 1

Vous devez réaliser la page de connexion du site Instagram au format HTML, CSS et Javascript. L’intégration doit être faite par étapes, chacune d’entre elles doit bien être validée avant de passer à l’étape suivante. Ce document de présentation à pour but de vous décrire la totalité des tâches que vous devrez réaliser pour mener à bien votre évaluation, prenez le temps de lire ce document avant de commencer à travailler.


> Télécharger les sources en [cliquant ici](https://drive.google.com/file/d/1W9l9OvmMuhBmjB6oNcfPBKjgfFH_W_KP/view?usp=sharing)

# Etapes à suivre

## 1) Intégration du contenu HTML

Créez votre fichier HTML est ajoutez y toutes les balises dont vous avez besoin pour la création de la page. Il vous est conseillé de n’utiliser que des balises sémantiques HTML5 mais ne perdez pas trop de temps à hésiter si vous doutez et utilisez celle qui vous conviendra.

> __NB :__ si vous pensez à vos sélecteurs en même temps, votre intégration du CSS sera plus rapide.

## 2) Intégration du design CSS

Une fois votre DOM prêt, ajoutez votre feuille de style pour créer le design de la page. Vous pouvez utiliser le mode de sélection de balises qui vous convient le mieux mais soyez très vigilant au nommage de vos class ou de vos id.

Ne faites pas l’impasse sur le mobile first et si vous avez besoin d'un rappel pour mettre en placxe les requêtes média, voiçi un petit rappel :

@media (min-width: 1250px) { 
    body{
        color: red;
    }
}

> Et pour la documentation, voir le [site de MDN](https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries)

# Présentation du projet

Le design de la page est faite sur deux breackpoints différents : la largeur maximale du site est de 950px, et vous devez travailler sur le principe du « mobile first ». Vous avez à votre disposition tous les éléments de la page, vous devez les utiliser et les intégrer correctement en vous assurant de la bonne nomenclature du dossier.

## Version mobile

La version mobile est d'une taille maximal de 600 pixels de large, et n’affiche que le formulaire de connexion


## Version desktop

La version desktop du site affiche en plus du formulaire, une image d’illustration à gauche.


# Critères dévaluation

Un travail bien fait sera toujours valorisé face à un travail vite fait, les critères d'évaluations sont les suivants :

* __5pts :__ Indentation, commentaire, nommage des sélecteurs, nomenclature du dossier de rendu
* __5pts :__ Intégration HTML, sémantique, organisation
* __5pts :__ Intégration CSS, organisation, gestion du code
* __5pts :__ Gestion du Responsive Design

# Dossier de rendu

Vous devez envoyer votre dossier au format __.ZIP obligatoirement__ via Teams.