anais0210 / projet1_openClassRooms

Intégrez la maquette du site d'une agence web

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

#Projet 1 Formation openClassRooms Septembre 2018


##Intégrez la maquette du site d'une agence web


###énoncé :

Vous venez d'être embauché(e) par une agence Web première mission : vous occuper de la refonte du site de l'agence.

Le site doit tenir sur une page avec un menu qui reste visible, en haut de la page, meme lorsque l'on se déplace dans la page. Les différentes sections attendues sont :

Un premier écran d'accueil de bienvenue, très visuel

La liste des services offerts par l'agence

Des exemples de projets déjà réalisés

Une carte avec un formulaire de contact (on ne vous demande pas de faire marcher le formulaire, juste de l'afficher).

Le site sera réalisé en HTML et CSS (sans framework tel que Bootstrap).

###Définir le contenu d'une page web à partir d'une maquette

  • L'ensemble du contenu défini par la maquette est présent
  • Le contenu texte est pertinent et grammaticalement correct
  • L'aspect visuel correspond à la maquette sur écran d'ordinateur
  • La maquette est adaptée de manière pertinente sur un terminal mobile
  • Les sliders et onglets ne sont pas nécessairement fonctionnels. JavaScript n'est pas requis pour ce projet.

###Coder la structure d'une page web en HTML

  • La page HTML passe la validation w3c HTML sans erreur
  • Les balises HTML sont définies avec la sémantique HTML 5 pertinente
  • Les icônes sont crées avec un outil pertinent, type font-awesome

###Coder la présentation d'une page web en

  • Le code CSS passe la validation w3c CSS
  • Le code CSS est écrit dans un ou plusieurs fichier CSS
  • Aucun code CSS n'est appliqué via un attribut style dans une balise HTML
  • La zone avec le menu reste visible, en haut de la page, même lorsque l'on se déplace dans la page

###Gérer la responsivité avec les Media Queries

  • Le viewport est configuré dans l'en-tête de la page HTML
  • (Au moins) Un breakpoint pertinent est défini
  • Des règles CSS @media et/ou des feuilles de styles dédiées identifiées par un attribut mediasont utilisées
  • Aucun Framework (type Bootstrap) n'est utilisé pour ce projet

###Présenter une réalisation de manière professionnelle

  • La soutenance est préparée
  • La tenue et l'attitude sont appropriées
  • Le support de présentation est soigné, respecte la structure imposée et le temps imparti
  • Le temps de présentation est respecté
  • Les réponses aux questions sont pertinentes

###Compétences à valider

  • Gérer la responsivité avec les Media Queries
  • Coder la présentation d'une page web en CSS
  • Présenter une réalisation de manière professionnelle
  • Définir le contenu d'une page web à partir d'une maquette
  • Coder la structure d'une page web en HTML

About

Intégrez la maquette du site d'une agence web


Languages

Language:HTML 55.0%Language:CSS 45.0%