Travail à réaliser : Projet de site Web statique

Avant de vous lancer !

étape 1 : maquetter une application

étape 2 : maquetter et mettre en forme

Durée : 1/2 journée
Etapes :
- Maquetter vos pages (Utiliser Pencil ou faites le sur papier)
- Elaborer la cinématique de votre site (liens entre les pages)
- Définir la forme des pages de votre site avec un fichier CSS
- Ecrire vos pages en HTML (sous Notepad++, VSC, Eclipse ou autre)

Compétences

Maquetter une application.
Réaliser une interface utilisateur web statique et adaptable.

Cahier des charges : Site web statique

Avec les notions de base en HTML5 et CSS3 que vous venez d’acquérir récemment, vous allez pouvoir réaliser un site web statique de 6 à 7 pages (maximum) pour présenter :

une de vos passions en différentes rubriques (sur plusieurs pages HTML)
Votre CV avec les infos détaillées sur votre parcours professionnel
Liste des compétences que vous allez acquérir chez Simplon

Vous pouvez aussi choisr un autre sujet (locations appartements, sport, gastronomie,…)

Vos pages HTML seront toutes construites de la même façon :

Fichier CSS externe lié par la balise <link> dans le <head> de vos pages HTML.
Entête pour afficher un bandeau graphique ou textuel (<header>)
Menu <nav> avec les balises <ul>, <li> et <a>
Contenu structuré avec un titre de niveau 1 <h1> obligatoire pour chaque page.
Sections avec les balises <section>, <article> ainsi des titres de niveau 2 <h2> ou 3 <h3> si besoin.
Textes dans des paragraphes avec la balise <p></p>
Pied de page avec la balise <footer> pour afficher le copyright &copy

Organiser vos différentes pages

Bandeau en haut
Menu horizontal sous le bandeau ou vertical à gauche (au choix)
Partie correspondant au contenu à droite du menu vertical gauche ou bien sous le menu horizontal
Pied de page en tant que dernière section

Vous êtes libre pour le choix des couleurs, des polices et des tailles de la largeur de vos pages HTML. Pour toutes questions sur la réalisation de ce travail, vous pouvez vous adresser à vos camarades ou bien à vos formateurs.

étape 3 : Rendez votre site responsive, utilisez le CSS Materialize

CSS Materialize

Responsive

Bon courage !