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é :
- 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
- 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
- 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é :
- 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.