Skip to content
Intégrez la maquette du site d'une agence web.
CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
font
fontawesome
images
README.md
index.html
style.css

README.md

OpenClassrooms_P1_WebAgency

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

Énoncé

Vous venez d'être embauché(e) par une agence Web, la WebAgency, qui réalise des sites web pour différents clients. Cependant, ils reconnaissent eux-mêmes que leur site actuel est vieillissant car ils ont peu de temps pour travailler dessus. Certes, il paraît que les cordonniers sont les plus mal chaussés, mais tout de même...

On vous propose donc, pour votre première mission, de vous occuper de la refonte du site de l'agence.

Le site doit tenir sur une page avec un menu qui suit la navigation. 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). Vous devrez intégrer au moins un effet d'animation CSS sur le site (celui que vous souhaitez).

A quoi doit ressembler le site ? J'ai une bonne et une mauvaise nouvelle.

La mauvaise, c'est qu'on vous "fait confiance" pour rédiger le texte de présentation de WebAgency. Il va donc falloir rédiger un peu. 😉

La bonne, c'est que vous ne partez pas de rien : le graphiste vous a déjà concocté une petite maquette, ce qui va grandement vous aider ! Voici les différentes sections :

  • L'en-tête du site
  • Nos services
  • Nos projets
  • Formulaire de contact

Encore mieux : le graphiste a effectué un premier découpage des fichiers de la maquette pour vous ! Vous n'avez plus qu'à réaliser l'intégration.

N'oubliez toutefois pas d'adapter le rendu pour vos visiteurs utilisant des terminaux mobiles.

Livrables attendus

Code source complet du projet (HTML/CSS et autres fichiers nécessaires, zippés).

Soutenance

  • La présentation de votre projet : 15-20 minutes.
  • Un moment questions/réponses avec le mentor : 10 minutes.

Votre soutenance pourra, si votre mentor le décide, prendre la forme d’un jeu de rôle où le mentor incarnera votre directeur technique lors d’un débriefing afin de faire le point sur les travaux réalisés.

Compétences à valider

  • Traduire les différentes zones en langage web.
  • Assembler et structurer les différentes zones.
  • Transcrire les effets graphiques en langage web.
  • Mettre en page les contenus.
  • Découper chaque zone à partir des maquettes réalisées par les graphistes.
  • Intégrer les contenus directement dans le code HTML5.
You can’t perform that action at this time.