Introduction to

programming

CC-BY-NC-4.0 / Feb. 2021 / Loïc TRUCHOT

Featuring HTML/CSS/JavaScript

The perfect stack

for a 2020 web programmer

 

  • Node.js / PHP / Python / C# / Java
  • SQL / MongoDB
  • Wordpress / Drupal
  • Game: Unity / three.js / blender / zbrush
  • HTML
  • CSS (+ SASS)
  • JavaScript (+ React, Angular or Vue...)
  • Design: XD / Figma / Balsamic / Photoshop / Sketch

front-end

back-end

Pré-requis de l'apprenti

  • Accepter le rôle d'apprenti
  • Travail d'équipe, solidarité
  • Curiosité, autonomie
  • Anglais correct
  • Une grande rigueur
  • Ordinateur: souris, clavier, windows, création de dossiers/fichiers, navigateur (télécharger, installer nouveaux logiciels)
  • Maths: fonctions et logique booléenne
  • Aimer résoudre des problèmes, pragmatisme
  • Acharnement et endurance

Comment fonctionne le web

IP -> TCP -> HTTP -> HTML/CSS/JS

(part en cuisine) Server <--> Client (commande le plat)

plusieurs couches, comme des poupées russes

Workshop

  • S'assurer que les extensions de fichier sont visibles
  • Dans le dossier, créer des fichiers vides, avec les extensions «.html», «.css», «.js»
  • Dans un bloc note, coder une liste de 3 questions en HTML: <ul></ul> et <li></li>
  • Ouvrir ce fichier avec chrome, et l'inspecter dans l'outil de développement

html basics

  • Créer un nouveau dossier sur le bureau

Bonus: Ajouter une balise <strong> autour d'un mot clé important

L'outil le plus bête au monde

  • L'ordinateur est un boulier géant, fait de 0 et de 1
  • il est manichéen, absolutiste, inhumain
  • Il n'accepte aucune erreur, imprecision, vide
  • Chaque caractère compte, un seul « ; » manquant et 10 000 lignes de code ne marchent plus
  • HTML =/= HTLM
  • Adopter dès aujourd'hui une rigueur extrême

HyperText Markup Language

  • HTML est un langage de balises: 
    • Chaque balise s'ouvre et se ferme et contient du texte ou d'autres balises:
    • <button>clique ici !</button>
    • Les balises s'imbriquent les unes dans les autres et forment un arbre dont la racine est <html></html>
  • Les balises donnent du sens, mais n'influe pas beaucoup sur l'affichage
  • Chaque logiciel sait lire des formats/langages différents
  • Les navigateurs (browsers) lisent le HTML

Traitement de texte

VS

HTML / CSS

  • Quelle différence apparente entre un fichier Word et un fichier HTML ?
  • Séparer le fond et la forme
  • Séparer la sémantique de l'habillage
  • Séparer les données (data) de leur rendu (render)
  • Pourquoi ?

Workshop

  • la balise contenant tout est <html></html>

  • dans <html>, une balise <head> s'ouvre et se ferme.

    • elle contient une balise <title>

      • contenant le texte "BSE - Best Site Ever"

  • dans <html>, après <head></head>, une balise <body> s'ouvre et se ferme.

    • elle contient une balise <h1> 

      • contenant le texte "Mes questions"

    • <body> contient aussi votre liste <ul> 

  • ajouter  <!DOCTYPE html> tout en haut du document, au dessus de <html>

L'arbre HTML

  • Corriger le document HTML pour qu'il forme un "arbre" valide

Une tête <head>

  • tout ce qui est dans la fenêtre (window), mais pas dans le document
  • les "meta" informations (description, mot-clefs)
  • des paramètres de la pages (langue)
  • liens vers JS et CSS

Un corps <body>

  • Toutes les balises et contenus visibles dans le navigateur
  • Parfois du JS

Si le HTML n'est qu'un squelette, où est le reste du corps ?

Cascading Style Sheets

 

 

  • Cette balise est "autofermante". L'attribut href indique un chemin (path) vers un fichier
<link rel="stylesheet" type="text/css" href="index.css" />

La feuille de style donne une série de propriétés (properties) pour chaque balise

body {
  background-color: violet;
}
h1 {
  color: blue;
  text-transform: uppercase;
}
  • Un fichier « .css »
  • Le lien est fait dans dans la <head>

Workshop

Donner du styles a vos <ul> et vos <li> !

Si HTML + CSS ne forment qu'un squelette habillé, comment lui donner vie ?

2 choses suffisent à l'informatique

  • La data (donnée):
    • une information à propos d'un fait, d'un événement, d'un phénomène, d'une chose
  • La fonction:
    • un calcul ou une action à faire avec les data, ou pour pour produire des data, ou les deux
  • Exemple de data -> fonction -> data
    • allumer un ordinateur
    • appuyer sur les touches d'une calculatrice
    • envoyer un formulaire
    • faire bouger un personnage dans un univers virtuel

JavaScript

  • Donne vie aux pages web en les rendant dynamiques
    • Événements utilisateurs (clic, clavier, etc.)
    • Animations complexes
    • Réutilisations de contenu
    • Changement de la page en live
    • Requêtes vers d'autres sites ou vers le backend
  • Et tout ça grâce aux fonction (function) qui sont généralement basée sur des if/else
<button onclick="saluer()">dire coucou</button>
<script>
  function saluer() {
    alert("Coucou !");
    document.body.style.color = "green";
  }
</script>

Workshop

  • Faire une fonction qui change la couleur du background en noir, et du texte blanc 
  • Elle se déclenche si on clique sur un bouton "night mode"
  • Pour accéder a une propriété css d'un élément via JavaScript, on passe son nom en camelCase:
  • document.body.style.textTransform = "uppercase";

Bonus: le nightmode est "toggle": on peut revenir en daymode !

nightmode

Tooling time !

Elements et attributs

  • Chaque élément est sémantique
  • Elements en blocs:
    • <div>, <h1>, <p>, <ul>, <li>, <table>, <blockquote>, <pre>, <form>...
  • Elements en lignes:
    • <span>, <a>, <strong>, <em>, <img>, <br>, <input>, <abbr>...
  • Certaines balises sont auto-fermantes (<img />, <input />, <link />, <br />)
  • Chaque élément a ses attributs spécifiques, et des attributs communs
    • <img src="http://image.com" />
    • <input type="text" />
    • <div title="ceci est un élément html> </div>
    • <a title="ceci un autre" href="http://google.com"></a>

L'essence du web

  • sérendipité / hypertextualité
  • autrement dit: les liens
  • d'une balise à l'autre...
  • ... ou d'un site à l'autre
  • un savoir encyclopédique, mise en ligne du monde
  • une nouvelle norme semi-démocratique: le PageRank (©2007 Google
  • ...ou d'une page à l'autre...
<a href="#bas">go to footer</a>
<a name="bas" />
<a href="contact.html">contact me !</a>
<a href="https://fr.wikipedia.org/wiki/PageRank">En savoir plus</a>

Workshop

Créer les 3 types de liens sur votre page web:

  • un lien en bas de page, pour remonter en haut
  • créer une autre page HTML et un lien vers cette page
  • Dans une liste, créer 3 liens vers vos 3 sites préférés

Bonus 2: trouver une manière pour que le liens vers un site externe ouvre une nouvelle fenêtre

hyperliens

  • le titre du site est "portail de favoris"
  • il y a une paragraphe d'introduction qui explique que c'est un portail de liens
  • Il y a une image qui rappelle la notion lien
<img src="https://autocollant-sticker.com/flocon-neige.jpg" />

Bonus 1 : la taille de votre image est contrôlée grâce à CSS

Workshop

 

  • créer un paragraphe <p> proposant des choix 
    • choix = liens vers d'autres pages
    • ces autres pages ont d'autres <p>/<a>, etc
    • cela compose un aventure complète
    • on peut gagner, ou mourir en cours de route

Bonus 2: musique sur ce site, et images selon les moments de l'aventure

sérendipité des années 80

  • créer un livre interactif dont on est l'héroïne
  • le titre de la page d'accueil est "Louve Solitaire"
  • il y a un header qui explique le principe, et lance l'aventure
  • Il y a une image médiévale fantastique 
<img src="https://lone-wolf.com/warrior-girl.jpg" />

Bonus 1: taille et bordure des images contrôlée grâce à CSS

Comment avoir la class ?

  • Chaque éléments HTML n'a qu'un seul style dans le CSS
  • Pour que
    • deux <p>, ou deux <div> aient un style différent
    • un <p> et une <div> aient le même style
    • on utilise l'attribut class 
<p class="bg-blue">test</p>
<div class="bg-blue">test</div>
<div id="division-1">test</p>
.bg-blue {
  background-color: blue;
  color: white;
}
#division-1 {
  text-transform: uppercase;
}

...aucune id.

  • Pour cibler un élément du manière unique (CSS, JS) on utilise l'attribut id

Le . indique la class, le # indique l'id

Workshop

  • Donner une classe "impair" à une <li> sur deux de votre <ul>
  • Donner une classe "pair" au autres <li> qui n'en n'ont pas encore
  • Dans le CSS, donner une couleur de fond "gris clair" aux <li> pairs, et "bleu clair" aux <li> impairs
  • Bonus: trouver une solution (sur google) pour faire le même effet dans le CSS mais sans donner de class aux <li>

Workshop

  • Trouver le plus rapidemment possible la bonne combinaison de cartes
  • Ex: un titre avec une bordure bleue

Data structures

La variable

  • Est une boîte dont le contenu peut changer
  • Sert a faire des programmes qui marchent avec des données variables
  • Sert a remplacer des données qui se répètent
  • On choisit son nom en suivant ces règles:
    • Ne commence pas par un chiffre
    • Ne comprends pas de caractères confus (ex: -, ., #, é)
    • N'est pas un mot clef réservé
  • Elle se créer ainsi:
    • Déclaration: var x;
    • Assignation: x = "value";
    • Les deux d'un coup: var x = "value";
  • Certaines variables sont... constantes.

Workshop

  • Qu'est ce qui est "variable" sur ce site ?
  • Si on devait créer un univers virtuelle, avec nos lois physiques, qu'est-ce qui serait constant ?
<h1>Pizza YOLO</h1>
<h2>Hello Sonia !</h2>
<p>
    Today is friday: week-end is coming.<br />
    What about a delicious Pizza tonight, Sonia ?
</p>
<div>
    Try our classics :
    <ul>
        <li>Vegeteriana</li>
        <li>Il Diavolo</li>
        <li>Quattro Formagi</li>
    </ul>
    Or choose the daily chef choice:
    <strong>the Calzone</strong>
</div>
<p>
    <em>Pizza price: 10 € - See you soon Sonia.</em>
</p>

Workshop

  • En javascript, l'opérateur "+" permet de
    • additionner des numbers
    • concaténer des strings et/ou des numbers
  • En javascript, pour écrire dans la console, on utilise la fonction console.log
  • Créer 3 variables
    • Une variable stockant le prénom d'un/une ami
  • 2 variables contenant un nombre entre 1 et 10
  • Afficher dans la console "Salut x, je t'envoie y bisous via internet"
    • ou x et y sont respectivement le prénom et l'addition de vos nombres

variables

Bonus: vos nombres sont tirés aléatoirement entre 1 et 10

Structures de contrôle

Conditions logiques

  • if (boolean) { faitCeci( ); }
  • else { faitCela(); }
  • Operateurs:
    • &&, ||, <, <=, >, >=, ===, !==, !
  • else if pour les multiples possibilités
var nourritureChoisie = "une pizza";
var aFaim = true;

if (aFaim) {
  console.log("Je vais te cuisiner " + nourritureChoisie + " ?");
} else if (nourritureChoisie === "pizza") {
  console.log("Tu es sûr ? J'ai " + nourritureChoisie + " ?");
} else { 
  console.log("Avoue que tu n'aimes pas ma cuisine");
}

Text

Workshop session

  • offrir une réduction différentes 
    • 0€ -> rien
    • moins de 20€ -> rien
    • entre 20€ et 30€ -> 10%
    • entre 31€ et 50€ -> 20%
    • plus que 50€ -> 30%
  • doit marcher pour: 43€, 181€ et 5€.
  • doit marcher pour: tous les nombres entiers positifs

var && if

Bonus: afficher dans la console le prix final ayant subit la réduction

Bonus 2: C'est une fonction qui retourne le nouveau prix

Iterations

  • Une boucle est un if qui se répète
  • Une invention d'Ada Lovelace
  • Il existe plusieurs structures de contrôle pour faire des boucles:
    • while, for, for of...
  • La boucle for est la plus connues:
for (var i = 0; i < 10; i++) {
  console.log(i + " est inférieur à 10 !");
}
  • Malheureusement, elle est aussi très impérative (dure à lire...)

Workshop

Pizza YOLO

  • Notre pizzeria possède un écran indiquant le nombre de pâtes à pizza restantes, et le nombre de pizze déjà vendues
  • Ce soir, on a 20 pâtes, on veut vendre 20 pizze
  • Faire une boucle indiquant d'affilé chaque vente de pizza
  • À la dixième, cela écrit « déjà la moitié ! »

Bonus: l'algorithme marche avec d'autres nombres que 20

Bonus 2: 1 pizza nous coûte 2.50€, et nous la vendons 10€.

La console nous donne notre bénéfice total à chaque nouvelle vente

Bonus 3: singulier/pluriel de pizza/pizze est respecté dans la console

L'objet « window »

Workshop

Ecrivez du JS, sauvez, rechargez le navigateur (console ouverte) :

  • testez window.console.log(), window.console.error()
  • testez window.alert(), window.prompt(), window.confirm()

window, le couteau suisse

  • quelle est la valeur de "test", après ça ?
  • Demandez le password (via  prompt)
  • Si la personne écrit le password "t0t0t1t1", alors on log "bienvenue"; sinon "incorrect"
  • Supprimez "window." devant chaque fonction 
var test = window.prompt("blabla");

Bonus: prompt() demande l'âge avant le mot de passe: les mineurs sont refoulés via alert()

Bonus 2: on demande à l'user de s'enregistrer avec un password.
5sec plus tard, on lui re-demande ce même password pour rester

Workshop

  • Dans le HTML, créez
    • un header avec le mot "Bonjour"
    • un input texte pour entrer un nom, avec l'id "name"
    • un bouton permet de lancer une fonction
  • document.getElementById("name").value donne la valeur de l'input
  •  l'attribut onclick permet d’exécuter une fonction au clic sur un élément HTML, comme suit :

références

  • Arrangez vous pour que le nom change dans le header au click "Bonjour *nom* !".
function handleClick () {
  console.log("Quelqu'un a cliqué !");
};
<button onclick="handleClick()">Test</button>

Workshop

Ecrivez du JS, sauvez, rechargez le navigateur (console ouverte) :

  • Ecrivez un programme capable de poser 3 questions de quizz d'affilée à un utilisateur, et de l'alerter si il a bon ou faux.

window, le couteau suisse

var test = window.document.getElementById("item");

va chercher l'élément html dont l'id est "item" (<div id="item"> par exemple), et le met dans la variable "test"

test.innerText ="coucou";

                                écrit coucou dans cette div.

  • Arranger vous pour donner le score sur 3 à la fin à même le HTML

Les types

les valeurs, les références

Drôles de types

  • 3 types primitifs
    • boolean (true, false)
    • number (0, 1, -24, 12.7)
    • string ("test", 'test')
  • 3 type-valeurs vides
    • undefined
    • NaN
    • null
  • Un type composé
    • Object {}
    • et ses dérivés
      • Array []
      • Function () => ()
      • Regex /test/
      • etc.
      • vos combinaisons (collections ?)

Un language faiblement typé, aux types changeants

Pour ou contre un langage fortement typé ?

D'ailleurs c'est quoi au juste cette histoire de types ?

JavaScript VS Java

var chose = "string";
chose = 42; 
// pas d'erreur
var str: String = new String("string");
str = 42; 
// BOOM

Qui est le plus robuste ?

Qui est le plus léger ?

Le type "number"

  • Pas de guillemet autour: 
    • var x = 13 + 89.0;
  • Un ensemble allant de -Infinity à Infinity
    • avec les entiers (signed / unsigned integers)
  • Tous les nombres à virgule
    • avec les nombres à virgules (signed / unsigned floats)
  • Les opérations arithmétique de base
    • +, -, *, / 
  • Les opérations mathématique avancée
    • % (modulo), ++ (incrémentation), -- (décrémentation), - (changement de signe)

Workshop

  • Notre site montre des infos de films
  • Nous recevons leurs durées en minutes
    • Ex: 125 min, 190 min, 92 min
  • Nous souhaitons afficher cette durée en heure + minutes: 2h05,  3h00, 1h32

Jouer avec les nombres

Bonus: on peut aussi passer des durée en heures au programme, comme la chaîne "2h13" et si sait la convertir en minute

  • Utiliser vos connaissances sur les nombres pour faire un programme capable de faire ce calcul pour chaque film..

Jouer avec les types 

var empty = [undefined, null];
var primitives = ["Taille du rayon de la terre", 6371, true];
var objects = [{}, [], function() {}];
console.log(
  empty
    .concat(primitives)
    .concat(objects)
    .map(function(type) { return typeof type; })
    .join(",")
);
console.log("test".toUpperCase(), (6371).toFixed(2), true.toString());
  • [] sert à déclarer un nouvel Array (une liste), et ses élements
  • concat associe deux Array
  • map exécute une fonction sur chaque élément
  • join transforme l'Array en string
  • Commentez le code suivant:

La liste ou array

  • Déclaration:
  • peut tout contenir, même des fonctions
  • pointe vers référence en mémoire, pas copié,  partagé
    • var arr3 = arr1;
  • arr1.length pour connaitre sa taille
  • arr[0] pour le premier element
  • arr[1] pour le deuxième
  • etc.
var arr = [];
var arr1 = [true, "2", 3];

La liste ou array

 

  • A des méthodes très pratiques
    • arr1.push("toto") pour ajouter
    • arr1.concat(arr2) pour combiner
      • Les méthodes retournant un array
      • peuvent être chaînées
    • arr1.includes("toto") pour vérifier l'existence d'un élément
    • Plus dur:
      • arr1.forEach(function...) pour itérer
      • arr1.map(function...) pour transformer
      • arr1.filter(function...) pour filtrer
      • arr1.reduce(function...) pour "réduire"
    • Tout le reste, @voir

Workshop

  • Faites une petite listes de choses du même type  ex: ["la courgette", "l'aubergine", "le navet"])
  • Concaténer  avec une d'autres choses du même type (ex: ["la carotte", "la tomate"])
  • Avec une boucle for, trouver une manière d'exclure certains éléments de votre array selon un critère choisi (ex: éliminer les mots masculins)

 

 

méthodes de listes

  • Bonus 1: Utiliser la methode .filter() pour ce filtre
  • Bonus 2: Mappez la  liste pour la transformer en une liste de phrases annonçant la catégorie: ["la courgette est un légume", "l'aubergine est un légume", "la carotte est un légume", ...]

L'objet 

var obj = {};
var obj1 = { 
  key1: "val1", 
  key2: 2 
};
obj1.key3 = "toto";
console.log(obj.key2);
  • peut tout contenir, même des fonctions (méthodes)
  • ces méthodes peuvent utiliser "this" pour référencer cet objet
  • pointe vers référence en mémoire, pas copié,  partagé
    • var obj3 = obj1;

« this » dans une méthode d'objet

  • Exemple:
var chaton = {
  couleur: 'gris',
  cri: 'miaou',
  miauler() {
    console.log('le petit chat fait ' + this.cri);
  },
};
chaton.miauler();
  • Pratique pour utiliser une propriété dans une méthode
  • Vocabulaire de l'Orienté Objet
  • Attention, this ne correspond pas à la même chose hors d'un objet

Workshop session

this

  • Décrivez un animal, grâce à un objet. Il doit avoir
    • un nom (avec le déterminant, ex: "le crocodile")
    • un poids, une taille, une couleur
    • une méthode afficherDescription pour le décrire, grâce à des "this"

Bonus:

  • l'animal doit avoir une liste (array) de nourritures appréciées, ex: ["l'herbe", "les feuilles", "les fruits"]
  • Une méthode affiche ce qu'il aime. ex: "Le poney apprécie l'herbe, les feuilles et les fruits".
  • Envoyer le code de cet animal à l'enseignant

La "collection"

  • la « collection »: un array d'objects tous formatés de la même manière
var people = [
  { nom: "Loïc", age: 34 },
  { nom: "Sabrina", age: 41 },
  { nom: "Swann", age: 22 }
];

Structure la plus courante de l'informatique

Workshop

  • Générateur de haïku:
    • nom commun masculin / verbe d'état / adjectif... x3
    • 8 / 8 / 8

Bonus : féminins ? pluriels ?

Workshop

  • Générateur de formes:
    • Réfléchir à un objet "forme"
    • Prévoir 3 classes de formes en CSS
    • Prévoir un tableau contenant une liste de forme
    • Ces formes s'affichent aléatoirement dans une div
    • Prévoir des fonctions qui génèrent chaque forme
    • Prévoir 

Bonus : féminins ? pluriels ?

HTML

  • Qu'est-ce qu'une page HTML moderne ?
    • single page app / flat design  / icônes / original+lisible
      • https://www.foundationmedicine.com/
      • https://shoptalkshow.com/
      • https://theintercept.com/
  • Qu'est-ce qu'une page parfaite ?

Next level

<body>
  <header>
    <img src="logo.jpg" /><nav><a href="#">home</a><a href="#">contact</a></nav>
  </header>
  <main>
    <h1>mon site</h1>
    <section>
      <h2>ma section</h2>
    </section>
    <section>
      <h2>ma section</h2>
      <article>
        <h3>mon article</h3>
      </article>
      <article>
        <h3>mon article</h3>
      </article>
    </section>
  </main>
  <footer>
    <nav><a href="#">home</a><a href="#">contact</a></nav>
  </footer>
</body>

Principaux Blocks

  • div
  • h1...h6, p
  • header, main, footer, nav
  • ul, ol, table
    • li, tr, td
  • form
  • section, article
  • pre
  • audio, video

Principaux Inlines

  • span
  • a
  • strong, em
  • img
  • abbr, sub, sup
  • input, label, textarea
  • button
  • select
    • option

Le CSS associé

display: block;

display: inline;

display: inline-block;

width, height, margin, padding, border, background, text-align, position...
color, font, text-decoration, text-transform, line-height, letter-spacing...

flexboxes

  • Concerne un block parent d'élements de type "block"
  • Permet de controller l'alignement horizontal, vertical 
    • display: flex;

 

 

  • Permet aussi de controller les espaces séparants les éléments
    • justify-content: between;

 

  • Permet aussi de controller les espaces séparants les éléments
    • align-items: center;

 

un peu de souplesse

Workshop

  • présenter 3 haikus illustrés sous forme de cartes
  • ces cartes sont l'une à côté de l'autre 

haïku à la carte

Bonus 2: Le site est dans une structure classique, avec un joli design

Bonus : Les haïkus ont une forme images associée en entête

Une icône

du web

  • L'icône à la mano
    • non vectorielle
    • placement vertical difficile
    • effet de hover difficile
  • Les polices d'icônes
    • règles tous ces problèmes
    • font-awesome
    • icomoon
    • etc
<link
  rel="stylesheet"
  href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
  integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
  crossorigin="anonymous">

Workshop

  • Télécharger le kit de base de font-awesome
  • Faire une interface de lecture de musique
    • un input de type "range" pour simuler l'avancement de la musique
    • une barre d'icône en flex
      • un bouton "j'aime"
      • un bouton "aléatoire"
      • un bouton "repeat"
      • des boutons "suivant" / "precedent"
      • un bouton "play" 

Police d'icône

Bonus 1: lorsqu'on clique sur play, ça lance votre chanson préférée

Bonus 2: lorsqu'on clique sur le bouton "play", cela devient un bouton "pause" et vice versa

Bonus 3: lorsqu'on clique sur play, le range avance tout seul !

frameworks CSS

  • CSS = hautement réutilisable
    • de page en page, de site en site, et pourquoi pas plus ???
  • Charger une feuille de style externe, et utiliser ses classes
    • framework: ensemble de fonctionnalité suffisante pour couvrir tous les besoins CSS d'un site web !
  • Les plus importants:
    • bootstrap, foundation, tailwindcss (+ materialize, prime...)
  • Qualité:
    • Mobile first, POC, rapidité, toujours joli, petit goût de reviens-y
  • Défault:
    • Poids, identité visuelle cheap, petit goût de déjà-vu

Bootsrap components

Tout en un

Les components les plus utilisés sont souvent:

  • La carte (card): une présentation multimédia succincte
  • Le bouton (button)
  • Le badge (badge): utile pour le hashtags/filtres de recherche
  • Les éléments de formulaires (forms)
  • Les éléments de navigation (nav/navbar) 
  • La pagination
  • Les spinners (roues de chargement)

Les «utilities» sont les "one-liners" très utile pour des petites rectifications visuelles:

.rounded-circle, .d-flex, .shadow-sm, .p-0, .text-center...

Ressources

  • Base de l'informatique:

    • Les fondements de l'informatique - du bit au cloud, MP Spinette

    • Computer Science (en), Carrie Anne Philbin 

  • Références incontournables:
    • https://developer.mozilla.org/fr/
    • https://www.w3schools.com/
  • HTML/CSS​
  • JavaScript

THANKS EVERYONE
It's finally done !

 

 

 

 

 

 

Bon courage et bonne continuation

Tenez moi au courant:

teams / slack / loic.truchot.pro@gmail.com

Introduction to programming 2021 (js/fr)

By Loïc TRUCHOT

Made with Slides.com

Introduction to programming 2021 (js/fr)

Discovering computer science basis with some JS examples, in french

  • 652

More from Loïc TRUCHOT