README.md
Workshop réalisé lors de la formation BeCode.org, Team Johnson II.
Date: 11 Juin 2018.
Durée: 3heures.
Workshop sur les structures d'HTML5.
- Introduction
- Structure – Rappel
- Templates & boilerplates
- Quizz
- Rendre son HTML plus structuré/performant
- 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- Structure le texte brut et ajoute les images et liens fournis (utiliser les balises HTML5 tels que header, section, article, aside, nav, figure, h1)
- Créer un header avec comme titre Design, Tech & Fun
- Créer un aside avec un champ de recherche, un champ 'articles récents', un champ 'thématiques', et un champ 'anciens articles'
- Créer un formulaire de contact avec un bouton animé (ex: un carré devient un rond).
- Créer un footer avec un copyright
- 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.