Skip to content

Instantly share code, notes, and snippets.

@tzi

tzi/plan.md

Last active August 27, 2018 13:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tzi/bf52551f2b0ba895f096227a71055fa5 to your computer and use it in GitHub Desktop.
Save tzi/bf52551f2b0ba895f096227a71055fa5 to your computer and use it in GitHub Desktop.
Download ZIP
Plan de formation
Raw
plan.md

Formation HTML/CSS débutants

3 jours pour apprendre les bases d'HTML et CSS, organisés en 12 portions de 2h dont au moins un TP de validation

Jour 1 : la recette de cuisine

  1. Web et Internet
    Mot-clés: Client/Serveur, Adresse IP, URL, Protocoles, Domaines, Phishing, w3c, navigateurs
    Exercice: Placer les mots-clés sur une carte
    TP: Créer un espace FTP, Ouvrir un fichier texte local avec son navigateur
  2. HTML Définition
    Mot-clés: Balises et Balises auto-fermantes (Textes, Titres, Liens, Images, Listes), Attributs, Commentaires, Block vs Inline, Hierarchie, Format (espaces)
    Exercice: Recréer un corps humain avec une liste de balises : head, body, eye, nose, hair, hand, finger (thumb attribute), fingergroup, foot,
    TP: Chercher dans la source des sites internets connus, Baliser une page de recette de cuisine textuelle, compléter pour rendre la page valide
  3. CSS Définition
    Mot-clés: Règles, Sélecteurs, Propriétés (mise en forme du texte), Valeurs
    Exercice: style le corps humain avec des sélecteurs et des propriétés
    TP: Mettre en forme la page de recette de cuisine en utilisant les sélecteurs d'élément uniquement, introduction des classes
  4. JS Définition
    Mot-clés: function, variable, tableaux, querySelector, Exercice: https://jgthms.com/javascript-in-14-minutes/
    TP: Ajouter des boutons de partage sur notre recette de cuisine

Jour 2 - CV

  1. CSS Sélecteurs
    Mot-clés: Sélecteurs (id, classe, attributs, pseudo-classes), Spécificité
    Exercice de groupe: http://davidshariff.com/quiz/ Exercice: Trouver le bon sélecteur (https://flukeout.github.io/) , la règle qui aura la priorité (http://css-fun.surge.sh/)
  2. CSS Box-model
  3. CSS Flexbox

Jour 3 - SocialFeed

  1. HTML Sémantique
    Mot-clés: Figures, Vidéos, Structures (Nav, Header, Footer, Main), Sémantique
  2. CSS Responsive
  3. CSS Outils
    Mot-clés: Sass, BEM

Jour 4 - App

  1. HTML interactif
    Mot-clés: Tables, Formulaires (https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-2/)
  2. JavaScript patterns
  3. CSS Positions et Flotants
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment