Maquette de site professionnel en HTML / CSS

Projets en HTML et CSS pour apprendre à créer des interfaces graphiques pour le web, sites non dynamiques version mobile.

Ci-dessous extrait de l'énoncé :

Spécifications fonctionnelles:

• Présence d’un header avec un titre, d’un menu de navigation et d’un footer avec les mentions légales sur l’ensemble des pages
• Accès à une sélection de 3 produits sur la page d’accueil sous forme de cartes avec les informations essentielles du produit (image, nom, prix et courte description)
• Possibilité de visualiser le détail d’un produit en cliquant sur sa fiche, l’utilisateur arrive alors sur une page dédiée au produit
• Présentation de l’entreprise sur une page dédiée à l’entreprise

Spécifications techniques:

• Structure du site en HTML5 -Usage d’un BoilerPlate -HTML sémantique
• Présence de commentaires en anglais pour faciliter la lecture du code
• Définition d’une charte graphique cohérente (3 couleurs maximum)
• Design moderne et élégant avec un CSS maintenable
• Respect du principe DRY
• Présence d’un favicon
• Code HTML et CSS passés au validateur•Site mis en ligne via une GH-page
• Projet géré via un outil de type Kanban

Pour aller plus loin :

• Intégrer des icônes via la librairie font-awesome pour faciliter la navigation et l’expérience utilisateur.
• Intégrer des fonts grâce à Google Fonts pour rendre les titres et le contenu plus accrocheurs

Maquette de site professionnel en HTML / CSS et de façon Responsive

Projets en HTML et CSS pour apprendre à créer des interfaces graphiques pour le web de maniere responsives.

Ci-dessous extrait de l'énoncé :

Spécifications fonctionnelles:

• Les pages de l’application sont accessibles, cohérentes et utilisables quelque soit le support de navigation (smartphone, tablette, ordinateur)
• Possibilité de contacter l’entreprise via une page dédiée avec un formulaire
• Le formulaire demande les informations suivantes: nom et prénom, numéro de téléphone, email, âge, objet du contact sous forme de dropdown, message. Les objets de contact sont: information, réclamation, partenariat, autre
• Les vérifications de sécurité suivantes sont effectuées: les champs nom, email, objet et message sont obligatoires. Il faudra vérifier que l’utilisateur entre un numéro de téléphone etun email valides. Le nom et le prénom font entre 2 et 40 caractères.
• Sur la page dédiée à l’entreprise une vidéo intégrée avant ou à coté du texte de l’entreprise présente l’entreprise (choisissez simplement une vidéo youtube sur une entreprise)
• Sur une page prestations, un tableau liste les prestations réalisées par l’entreprise avec leur tarif et le nom de la personne en charge.•Voici la liste des prestations: réparation de smartphone phone, réparation de tablette, réparation d’ordinateur, commande spéciale, impression 3D.
• Sur le site l’utilisateur trouve des icônes et des polices chargées par des librairies externes

 Vous trouverez dans la branche Master le projet de base fonctionnel.