HTML :

• Créer une page "Typo" qui regroupe les différents types de balises de base :
  • niveaux de titres
  • texte et mise en forme
  • listes
  • tableaux
  • liens
• Créer une page "Accueil (Home)" : avec 1 bloc principal et 2 blocs secondaires
• Créer une page "Contenus" : modèle pour l’affichage des "articles", avec un bloc latéral "Table des matières"
• Créer une page "Médias" : avec affichage en blocs "vignettes" pour photos/vidéos
• Créer une page "Données" : avec affichage d’un (gros) tableau de données en lignes
• Créer une page "Inscription" : avec un formulaire demandant des informations de tout type et envoyé par mail
• Créer une page "Whaou !" : avec un bloc unique centré et une image en background "étiré"
• Créer un "Header" (barre de navigation) et un "Footer" (mentions légales, plan compact...) sur la page "Typo", l’intégrer dans toutes les pages

CSS :

• Styler la page "Typo" en ciblant les balises, passer ces styles sur toutes les pages
• Créer 2 ou 3 layouts pour la page "Sommaire" sur la base d’un HTML commun : disposition fixe/fluide
  • pour les layout de la page "Sommaire" positionner les blocs pour 3 largeurs d’écran (ordi / tablette / smartphone)
  • choisir un layout et le passer sur toutes les pages
• Créer un affichage en liste pour la page "Médias" (sans toucher au HTML)
• Récupérer deux polices sur un site de polices libres et les intégrer dans toutes les pages

Bootstrap :

• Créer une page "Accueil" alternative en Bootstrap 4 avec les caractéristiques suivantes :
  • barre de navigation au sommet de la page (sans être "fixed"), faisant toute la largeur (= fluide), qui se compacte pour donner un "hamburger" dépliable au clic en vue téléphone
  • 1 bloc principal et 1 bloc secondaire, rapport de largeur 2/3 1/3, qui se superposent en vue téléphone (dans l’ordre : principal > secondaire)
  • titre de la page + slogan en "jumbotron" (= gros bloc) centré
  • trouver les modifications permettant d’avoir un layout fluide pour l’ensemble de la page
  • dans la barre de navigation, ajouter un sous menu dépliable
  • faire un menu en accordéon dans le bloc secondaire
  • dans le jumbotron ajouter un bouton qui lance une "modal box" (= boite popin) qui affiche un formulaire d’inscription à la newsletter. Sur le bouton, ajouter un "tooltip" (= bulle d’aide) qui incite à ouvrir la modale et s’incrire
• Sur ce modèle créer une page alternative pour la page "Médias" avec :
  • 6 blocs utilisant les "Cards" chacun ayant un bandeau de titre et un lien en bouton. Leur disposition sera "harmonieuse" sur la largeur
  • sous le titre de page un slider (= carrousel) de 3 images avec titre et descriptif + indicateur de position
• Sur ce modèle créer une page alternative pour la page "Données" avec :
  • l’en-tête du tableau en blanc sur fond noir
  • les lignes paires et impaires alternativement grisées/blanches

Javascript / jQuery :

• Créer une bascule d’affichage entre liste/vignette pour la page "Médias"
• Faire défiler l’image background de la page "Whaou" pour faire un effet de slider
• Gérer le "retour" de la page "Inscription" en interceptant la validation : afficher la synthèse des infos et créer des interactions différentes en fonction des réponses
• Générer la table des matières automatiquement (y compris les ancres) dans la page "Contenus"
• Créer un script qui importe en ajax "Header" et "Footer" dans n’importe quelle page
• Créer un formulaire qui permet de saisir une liste de termes, à la validation le traiter pour :
  • générer un Json utilisable dans auto-complete
  • l’enregistrer en "local storage" (en remplaçant l’existant si besoin)
  • édition de l’existant : si il existe déja une liste stockée, au chargement du formulaire la récupérer pour l’intégrer dans le champ de saisie
• Créer un calculateur de droits des fichiers Unix/Linux : explications et cahier des charges

jQuery UI et autres plugins / widgets

Utiliser les jQuery UI et widgets pour réaliser les éléments suivants :

• page "Inscription" :
  • ajouter 4 blocs ayant chacun un mot à l’intérieur + 1 cadre vide (plus grand que les blocs). Créer le javascript permettant de :
    • faire un drag’n drop d’un bloc-mot dans le cadre vide
    • récupérer le mot du bloc choisi et le stocker dans un champ "hidden" du formulaire
    • ajouter un bouton pour vider le cadre
    • si le cadre contient déja un bloc-mot le supprimer lorsqu’un nouveau bloc est glissé dedans
  • ajouter un sélecteur de couleur et un sélecteur de date
  • ajouter une auto-complétion dans un champ texte à partir d’une liste pré-établie de mots
• page "Contenus" :
  • découper la page "Contenus" en onglets correspondant aux différentes parties
  • passer la table des matières en menu accordéon
• page "Données" :
• Intégrer le plugin DataTable dans la page "Données"