Formateur: Philippe Vincent

administrateur + développeur + formateur

= artisan numérique

Support de formation sous Copyleft

Licence Art Libre

Présentez-vous !

• Prénom - NOM

• Quel est votre niveau en développement Web ?

  • Pouvez-vous citer :
    • quelques outils, …
    • des noms de technologies, …

• Que souhaitez-vous apprendre aujourd’hui ?

Frontend Development (in english)

Différence Frontend / Backend

• Développement Front => tout ce qui est visible, généralement page web dynamique

• Développement Back => tout ce qui tourne côté serveur, généralement des processus et/ou stockage de données

Frameworks

• rapide définition => outil et bonnes pratiques à la fois côté Front et Back, parfois les 2 en même temps

HTML / CSS / JavaScript

• Le tryptique
  • HTML5
  • CSS3
  • JavaScript (langage de programmation)
    • diffférentes variantes
      • ECMAScript
      • TypeScript
      • …

Apprentissage complexe

• plein de choix technologiques
• changement rapide
• historique cahotique
• sophistication Vs minimalisme
  • pur HTML5/CSS3/Vanilla JS
  • utilisation de frameworks
    • préférer licence libres
      • histoire de licence privatrice => Flash, … => MORT!
    • Enterprise Vs Communautaire

Feuille de style CSS

• Utile pour distinguer la forme du fond
  • notion de sélecteur .class #id element
• en place avec la balise <style></style>
• séparé dans un fichier distinct avec <link rel="stylesheet" />

Manipuler le CSS

• avoir quelques rudiments de HTML5 et CSS3

  • balise
  • sélecteur
  • notions de flex
    • flexfroggy

• outil Web Developer (F12)

Framework CSS

• pour faciliter la gestion
  • SASS / SCSS / LESS
• pour avoir un design prêt à l’emploi
  • BOOSTRAP / BULMA
• un entre-deux utilitaire et des bonnes pratiques
  • TAILWIND
    • Warning: freemium components

Typographie utilitaire

• Police de caractère (libre de préférence)
• Emoji 🏀 🎀
• FontAwesome
  • ForkAwesome
  • Fontello

Framework Javascript

• quelques frameworks reconnus
  • JQuery (vieillissant)
  • Angular
  • React
  • VueJs (communautaire)
  • Svelte
  • WebAssembly (Rust, …)

Outil Web Developer

• préférence pour GNU/Linux

• Firefox + WebDeveloper (F12), or Chromium

• IDE Codium

  • différence entre VS Code et Codium
  • ajout d’extensions
    • vérificateur d’orthographe
    • aide à la programmation

• sinon outil en ligne…

Codium / NodeJs / Tailwind

• installer NodeJs

  • npm --version
  • npm install -D tailwindcss
  • npx tailwindcss init

• ouvrir project

• show recommended extensions

  • install all recommended extensions

TAILWIND

• référence au vent
• revient sur l’idée de séparation contenu et style
  • orienté composants

outil de développement

• Codium, extension Tailwind + Prettier
• Autrement: https://play.tailwindcss.com

CheatSheet

https://tailwindcomponents.com/cheatsheet/

AlpineJS

• https://alpinejs.dev/start-here

  • https://playcode.io/ # ouvrir avec Chrome/Chromium de préférence

• x-data

• x-model

• x-show