/Workshop-HTML

Workshop HTML - Présentation

Primary LanguageHTML

README.md

WORKSHOP HTML

Workshop réalisé lors de la formation BeCode.org, Team Johnson II.

Date: 11 Juin 2018.

Durée: 3heures.

Contenu

Workshop sur les structures d'HTML5.

  • Introduction
  • Structure – Rappel
  • Templates & boilerplates
  • Quizz
  • Rendre son HTML plus structuré/performant
  • Exercices

Exercices

  • Exercice 1 - Structurer un texte brut
    Objectif: structurer un document HTML sur base d'un texte brut (Une brève histoire du web) en utilisant les balises nécessaires.
    Texte: Une brève histoire du web

    1. Structure le texte brut et ajoute les images et liens fournis (utiliser les balises HTML5 tels que header, section, article, aside, nav, figure, h1)
    2. Créer un header avec comme titre Design, Tech & Fun
    3. Créer un aside avec un champ de recherche, un champ 'articles récents', un champ 'thématiques', et un champ 'anciens articles'
    4. Créer un formulaire de contact avec un bouton animé (ex: un carré devient un rond).
    5. Créer un footer avec un copyright
    6. Pas de règles CSS mais rends l'article épuré et agréable à lire et n'hésite pas à ajouter des petites animations CSS pour t'entrainer.

    À n'utiliser qu'en cas de panne d'inspiration! Lien du modèle

  • Exercice 2 - Sticky Notes
    Objectif: réaliser une page de sticky notes animées.
    Utilisation d'HTML5 et CSS3.
    Conseil: Suivre les étapes (1 à 5).

  • Bonus
    L'utilisation de la balise canvas avec JS peut faire des petites merveilles.

Sources