Scribd Logo
Importer

Bienvenue sur Scribd !

  • 169 vues

    Projet - HTML-css - Portfolio

    Transféré par

    sambabdou2004

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    Projet - HTML-css - Portfolio

    Transféré par

    sambabdou2004
    169 vues3 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    169 vues3 pages

    Projet - HTML-css - Portfolio

    Transféré par

    sambabdou2004

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    Vous êtes sur la page 1sur 3

    HTML / CSS

    CRÉATION D'UN SITE WEB

    PORTFOLIO
    CRÉATION D’UN SITE WEB STATIQUE

    INTRODUCTION
    Vous venez d'apprendre les bases des langages HTML et CSS et à présente vous souhaitez
    mettre ces compétences à profit afin de réaliser votre portfolio. Penser à bien respecter les
    règles d'ergonomie d’un site web (cf. Ressources).

    LOGO, NUANCIER ET TYPOGRAPHIE


    Définir un logo, vous pouvez l'IA si nécéssaire.
    Définir un nuancier de deux couleurs avec un contraste fort pour une question de lisibilité.
    Définir une à deux polices d'écriture que vous utiliserez pour le contenu de votre site.

    BARRE DE NAVIGATION
    La barre de navigation doit contenir un lien vers l'accueil du site qui sera le logo.
    La barre de navigation doit contenir les liens suivants :
    - Accueil
    - Projets
    - Contact
    - S'inscrire
    - Se connecter
    © Sylent 2024

    Bonus : La barre de navigation doit être responsive.

    PIED DE PAGE
    Le pied de page doit contenir l'auteur du site et son année de construction.
    Le pied de page doit contenir les liens suivant s’ouvrant dans un nouvel onglet :
    - Contact
    - Mentions légales

    www.sylent.art
    HTML / CSS

    index.html
    La page d'accueil doit contenir les éléments suivants :
    - Une image / photo de couverture
    - Deux paragraphes de présentation
    - Un bouton “En savoir plus” qui est un lien pointant vers la page “Projets”

    projects.html
    La page “Projets” doit contenir les informations de deux projets informatiques que vous avez
    pu réalisé durant votre parcours. Si vous n'en avez pas, alors il faudra les inventer.

    contact.html
    La page “Contact” doit contenir un paragraphe expliquant pourquoi il peut être intéressant
    de vous contacter.
    La page “Contact” doit contenir un formulaire comprenant les éléments suivants :
    - Un champ de saisie pour l’email de l'émétteur
    - Une zone de saisie non redimensionnable pour le corps du message
    Utiliser les “placeholders” sur chacun des éléments du formulaire pour améliorer l'expérienए
    ce utilisateur (UX) de votre site web.

    register.html
    La page d'inscription doit contenir un formulaire comprenant les éléments suivants :
    - Une liste déroulante pour choisir la civilité
    - Un champ de saisie pour le nom d'utilisateur
    - Un champ de saisie pour l'adresse email
    - Un champ de saisie pour le mot de passe
    - Un champ de saisie pour la confirmation du mot de passe
    - Un lien “Déjà un compte” qui pointe vers la page de connexion
    - Un bouton pour finaliser l'inscription
    © Sylent 2024

    login.html
    La page de connexion doit contenir un formulaire comprenant les éléments suivants :
    - Un champ de saisie pour l'adresse email
    - Un champ de saisie pour le mot de passe
    - Un case à cocher “Rester connecté.e”
    - Un lien “Pas encore de compte” qui pointe vers la page d'inscription
    - Un bouton pour finaliser la connexion

    www.sylent.art
    HTML / CSS

    BONUS
    Réaliser la page des mentions légales.
    Réaliser un composant JS demandant à l'internaute d’accepter l'uilisation de cookies.

    FORMAT DE LA SOUTENANCE - 20 à 25 minutes


    5 à 10 minutes de présentation - Nécéssite la préparation d'un diaporama
    - Se présenter
    - Décrire le projet portfolio
    - Gestion de projet
    - Quelles sont les grandes phases du projet ?
    - Comment avez vous gérer votre temps ?
    - Quelle méthodologie avez-vous appliqué ?
    - Analyse des écarts, s'il y en a...
    - Axes d'amélioration
    - Bilan et conclusion

    5 à 10 minutes de démonstration
    - Préparer un scénario de présentation du portfolio
    - Présenter et expliquer un extrait de code HTML et CSS

    5 minutes pour la phase de questions/réponses

    RESSOURCES ET INSPIRATIONS
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    https://www.keacrea.com/les-regles-indispensables-de-l-ergonomie-d-un-bon-site-web
    https://dribbble.com/search/portofolio
    https://www.behance.net/search/projects
    https://www.blogduwebdesign.com/
    © Sylent 2024

    LIVRABLES ATTENDUS
    Votre projet dans un dossier compressé respectant la nomenclature suivante :
    nom-prenom-website.zip.

    Exemple : doe-john-website.zip

    www.sylent.art

    Vous aimerez peut-être aussi