Approfondir le développement Web (niveau intermédiaire)

INF-306-TP

Description

Apprenez à concevoir, à ajouter du dynamisme à vos pages Web et à programmer des pages Web en utilisant les composantes qui en sont la base même : HTML, CSS et autres! Acquérez les compétences essentielles pour créer des sites Web interactifs et attrayants. Posez des bases solides pour évoluer vers des formations avancées en développement Web et transformez votre passion en carrière. Inscrivez-vous dès aujourd'hui et profitez des nombreuses opportunités offertes par le Web.

Objectifs

Créer et concevoir graphiquement une page Web simple
Implémenter des comportements dynamiques simples avec Javascript
Utiliser une bibliothèque CSS et Javascript pour accélérer le développement Front-End

Clientèle cible

Personnes désirant approfondir ses connaissances relatives au développement Web dans le but éventuel de s’orienter vers ce domaine ou d’ajouter des compétences à leur champs d’expertise (exemple : designer graphique).

Préalables

Avoir réussi le cours LE DÉVELOPPEMENT WEB POUR LES DÉBUTANTS (INF-206-TP)

Avoir acquis les compétences suivantes :

Comprendre le fonctionnement d’internet et les bases de la conception graphique
Comprendre comment une page Web est structurée et le rôle du HTML et du CSS
Être capable de rédiger et de faire la conception graphique d’une page Web simple

* Il n'est pas nécessaire d'avoir une formation de niveau collégial ou universitaire pour assister à cette formation de perfectionnement !

Matériel requis

Un ordinateur (Mac ou PC)
Une connexion internet
Une caméra Web
Un micro fonctionnel

Notes de cours et volume(s) suggéré(s)

La documentation développeur :

MDN (Mozilla Developper Network) : https://developer.mozilla.org/en-US/
W3 Schools : https://www.w3schools.com
Devdocs : https://devdocs.io

Quand on est bloqué :

google.com
stackoverflow

Pour tester et pratiquer :

codepen.io
freecodecamp.org
https://www.frontendmentor.io

Contenu

Approfondissons le HTML et le CSS

Balises HTML avancées (tables et forms)
CSS : les principales propriétés
CSS : les sélecteurs
CSS : Positionnement (flexbox)

Introduction à Boostrap

Les bibliothèques CSS
Pour comprendre Bootstrap
La barre de navigation
Présentation du projet
La disposition graphique et les boutons Bootstrap
Les containers

Programmation Javascript

Pourquoi Javascript ?
Les alertes : ajouter un comportement à notre page Web
Les types de données
Les variables
Les chaines de caractères
Les nombres et fonctions
Opérateurs logiques
Les boucles

Ajouter du dynamisme à nos pages Web

Introduction au DOM
Sélectionner des éléments HTML
Manipuler et changer le style des éléments HTML
Modifier le texte et le contenu des propriétés
Manipuler les attributs de éléments HTML

Introduction à jQuery

Les bibliothèques Javascript : pourquoi ?
Utiliser jQuery pour développer plus rapidement
Découvrir d’autres bibliothèques JS

*L'ordre des sujets abordés pourrait varier

FORMATEUR

Samuel GUSTAVE a étudié en France à l’ESTE (École Supérieure de Technologie Électronique – Ecole d’ingénieur) et a obtenu un baccalauréat en génie électrique. Il est ensuite venu à l’Université de Sherbrooke pour suivre les cours de la maîtrise en génie électrique.

En presque 20 ans d’expérience dans le domaine informatique, il a occupé plusieurs emplois dans la gestion de systèmes informatiques bancaires, la maintenance des systèmes et la programmation. Il a particulièrement développé une expertise dans les IDE Windev/Webdev (www.pcsoft.fr) avec lesquels il a eu l’occasion de concevoir et maintenir des applications Windows et Web dans les secteurs de la santé et de la foresterie.

À travers les années, il a pu intervenir dans des technologies aussi diverses que variées telles que : HTML, CSS, PHP, Javascript, Python, Java, C#, C++, et bien sûr Windev /Webdev.

Il est toujours enthousiaste à l’idée de transmettre sa passion du développement logiciel et d’aider ses étudiants à mettre en pratique leurs acquis par des méthodologies d’apprentissage dynamiques et innovatrices.

Horaire et coûts

Ceux qui ont consulté cette fiche ont également consulté :

eyJyZWxhdGVkX2VsZW1lbnQiOiJicmlvZWxlbWVudCIsInJlbGF0ZWRfaWQiOiIxMzYiLCJ0aXRsZSI6IkhvbWUgU3RhZ2luZyAxIC0gUG91ciB2ZW5kcmUgcmFwaWRlbWVudCBkZXMgclx1MDBlOXNpZGVuY2VzIHN1ciBsZSBtYXJjaFx1MDBlOSBkZSBsJ2ltbW9iaWxpZXIiLCJkZXNjcmlwdGlvbiI6Ikluc2NyaXB0aW9ucyBldCBjb3VycyBlbiBsaWduZSEgTm90aW9ucyBzdXIgbGUgSG9tZSBTdGFnaW5nIDogbGEgZFx1MDBlOWZpbml0aW9uLCBsZXMgaW5mb3JtYXRpb25zIHJlbGF0aXZlcyBhdSBidWRnZXQgZXQgcGx1cyBlbmNvcmUuIEF1Y3VuIHByXHUwMGU5YWxhYmxlLiBBdHRlc3RhdGlvbiBTT0ZFRFVDLlxuIiwidXJsIjoiaHR0cHM6XC9cL2ZjLmNlZ2VwZ2FybmVhdS5jYVwvaG9tZS1zdGFnaW5nLTEiLCJ0eXBlIjoicHJvZHVjdCIsImltYWdlX3VybCI6Imh0dHBzOlwvXC9mYy5jZWdlcGdhcm5lYXUuY2FcL2NvdXJzXC9pbWFnZVwvNjVcL2FsemRiYzYyNS5icmlvaW1hZ2UucG5nIiwiaW1hZ2VfdHlwZSI6ImltYWdlXC9wbmciLCJpbWFnZV93aWR0aCI6IjE5MjAiLCJpbWFnZV9oZWlnaHQiOiIxMDgwIn0=

eyJyZWxhdGVkX2VsZW1lbnQiOiJicmlvZWxlbWVudCIsInJlbGF0ZWRfaWQiOiIxMDkiLCJ0aXRsZSI6IkxlcyBcdTAwYzl0YXRzIGZpbmFuY2llcnMgOiBsZXMgY29tcHJlbmRyZSBldCBsZXMgYW5hbHlzZXIiLCJkZXNjcmlwdGlvbiI6IkwnZXNzZW50aWVsIHBvdXIgY29tcHJlbmRyZSBldCBhbmFseXNlciBsZXMgXHUwMGU5dGF0cyBmaW5hbmNpZXJzLiAxMiBoZXVyZXMgZGUgY291cnMgZW4gbGlnbmUuIFRlbXBzIHBhcnRpZWwuIEF0dGVzdGF0aW9uIFNPRkVEVUMuIEluc2NyaXB0aW9ucyBlbiBsaWduZS4gXG4iLCJ1cmwiOiJodHRwczpcL1wvZmMuY2VnZXBnYXJuZWF1LmNhXC9sZXMtZXRhdHMtZmluYW5jaWVycy1sZXMtY29tcHJlbmRyZS1ldC1sZXMtYW5hbHlzZXIiLCJ0eXBlIjoicHJvZHVjdCIsImltYWdlX3VybCI6Imh0dHBzOlwvXC9mYy5jZWdlcGdhcm5lYXUuY2FcL2NvdXJzXC9pbWFnZVwvMjMzXC9hdmhod3Q0NzcuYnJpb2ltYWdlLnBuZyIsImltYWdlX3R5cGUiOiJpbWFnZVwvcG5nIiwiaW1hZ2Vfd2lkdGgiOiIxOTIwIiwiaW1hZ2VfaGVpZ2h0IjoiMTA4MCJ9

eyJyZWxhdGVkX2VsZW1lbnQiOiJicmlvZWxlbWVudCIsInJlbGF0ZWRfaWQiOiI4MyIsInRpdGxlIjoiUGhvdG9zaG9wIENDIC0gQ3JcdTAwZTlhdGlvbiBldCB0cmFpdGVtZW50IGQnaW1hZ2VzIiwiZGVzY3JpcHRpb24iOiJDb3VycyBldCBpbnNjcmlwdGlvbnMgZW4gbGlnbmUuIE91dmVydCBcdTAwZTAgdG91cyEgUGhvdG9zaG9wIENDIChkXHUwMGU5YnV0YW50KS4gQ3JcdTAwZTlhdGlvbiBldCB0cmFpdGVtZW50IGQnaW1hZ2VzLiBBdHRlc3RhdGlvbiBTT0ZFRFVDLiBDb25zdWx0ZXogbGEgZmljaGUgY29tcGxcdTAwZTh0ZSBkdSBjb3Vycy4gXG4iLCJ1cmwiOiJodHRwczpcL1wvZmMuY2VnZXBnYXJuZWF1LmNhXC90cmFpdGVtZW50LWRpbWFnZXMtcGhvdG9zaG9wIiwidHlwZSI6InByb2R1Y3QiLCJpbWFnZV91cmwiOiJodHRwczpcL1wvZmMuY2VnZXBnYXJuZWF1LmNhXC9jb3Vyc1wvaW1hZ2VcLzEyNTc0XC9jaGZma3kxODAuYnJpb2ltYWdlLnBuZyIsImltYWdlX3R5cGUiOiJpbWFnZVwvcG5nIiwiaW1hZ2Vfd2lkdGgiOiIxOTIwIiwiaW1hZ2VfaGVpZ2h0IjoiMTA4MCJ9

eyJyZWxhdGVkX2VsZW1lbnQiOiJicmlvZWxlbWVudCIsInJlbGF0ZWRfaWQiOiI0MSIsInRpdGxlIjoiTGUgdHJhaXRlbWVudCBkZSBsYSBwYWllIiwiZGVzY3JpcHRpb24iOiJNYVx1MDBlZXRyaXNleiBsZSB0cmFpdGVtZW50IGRlIGxhIHBhaWUgZ3JcdTAwZTJjZSBcdTAwZTAgbm90cmUgY291cnMgZW4gbGlnbmUuIFRlbXBzIHBhcnRpZWwuIDM2IGhldXJlcyBkZSBjb3Vycy4gSWRcdTAwZTlhbCBwb3VyIGxlcyBwcm9mZXNzaW9ubmVscyBlbiBhZG1pbmlzdHJhdGlvbi4gXG4iLCJ1cmwiOiJodHRwczpcL1wvZmMuY2VnZXBnYXJuZWF1LmNhXC9sZS10cmFpdGVtZW50LWRlLWxhLXBhaWUiLCJ0eXBlIjoicHJvZHVjdCIsImltYWdlX3VybCI6Imh0dHBzOlwvXC9mYy5jZWdlcGdhcm5lYXUuY2FcL2NvdXJzXC9pbWFnZVwvMTI2ODFcL2FtYWhldDQzNC5icmlvaW1hZ2UucG5nIiwiaW1hZ2VfdHlwZSI6ImltYWdlXC9wbmciLCJpbWFnZV93aWR0aCI6IjE5MjAiLCJpbWFnZV9oZWlnaHQiOiIxMDgwIn0=

eyJyZWxhdGVkX2VsZW1lbnQiOiJicmlvZWxlbWVudCIsInJlbGF0ZWRfaWQiOiIxODciLCJ0aXRsZSI6Ikdlc3Rpb24gZGVzIHN0b2NrcyAoQUVDKSIsImRlc2NyaXB0aW9uIjoiVW5lIGNhcnJpXHUwMGU4cmUgdm91cyBhdHRlbmQgZW4gZ2VzdGlvbiBkZXMgc3RvY2tzISBJbnNjcmlwdGlvbnMgZXQgY291cnMgZW4gbGlnbmUuIERpdmVyc2VzIG9wcG9ydHVuaXRcdTAwZTlzIGQnZW1wbG9pLiBGb3JtdWxlIGRlIGNvdXJzIGh5YnJpZGUuIiwidXJsIjoiaHR0cHM6XC9cL2ZjLmNlZ2VwZ2FybmVhdS5jYVwvZ2VzdGlvbi1kZXMtc3RvY2tzIiwidHlwZSI6InByb2R1Y3QiLCJpbWFnZV91cmwiOiJodHRwczpcL1wvZmMuY2VnZXBnYXJuZWF1LmNhXC9jb3Vyc1wvaW1hZ2VcLzIxOTcxXC9jZ3FucWg5NDIuYnJpb2ltYWdlLmpwZyIsImltYWdlX3R5cGUiOiJpbWFnZVwvanBlZyIsImltYWdlX3dpZHRoIjoiMTkyMCIsImltYWdlX2hlaWdodCI6IjEwODAifQ==

eyJyZWxhdGVkX2VsZW1lbnQiOiJicmlvZWxlbWVudCIsInJlbGF0ZWRfaWQiOiIxMjEiLCJ0aXRsZSI6IlJcdTAwZTlkYWN0aW9uIFdlYiIsImRlc2NyaXB0aW9uIjoiSW5zY3JpcHRpb25zIGV0IGNvdXJzICgxOCBoZXVyZXMpIGVuIGxpZ25lLiBOb3Rpb25zIGVzc2VudGllbGxlcyBwb3VyIG1hXHUwMGVldHJpc2VyIGxhIFJcdTAwZTlkYWN0aW9uIFdlYiAobW90ZXVycyBkZSByZWNoZXJjaGUsIHB1YmxpYyBjaWJsZSwgZXRjLikuIEF0dGVzdGF0aW9uIFNPRkVEVUMuXG4iLCJ1cmwiOiJodHRwczpcL1wvZmMuY2VnZXBnYXJuZWF1LmNhXC9hdGVsaWVyLWRlLXJlZGFjdGlvbi13ZWIiLCJ0eXBlIjoicHJvZHVjdCIsImltYWdlX3VybCI6Imh0dHBzOlwvXC9mYy5jZWdlcGdhcm5lYXUuY2FcL2NvdXJzXC9pbWFnZVwvMjIwMjNcL2FtYXFpcjczNy5icmlvaW1hZ2UucG5nIiwiaW1hZ2VfdHlwZSI6ImltYWdlXC9wbmciLCJpbWFnZV93aWR0aCI6IjE5MjAiLCJpbWFnZV9oZWlnaHQiOiIxMDgwIn0=

eyJyZWxhdGVkX2VsZW1lbnQiOiJjb3VycyIsInJlbGF0ZWRfaWQiOiIyMjEzMSIsInRpdGxlIjoiQ291cnRhZ2UgaW1tb2JpbGllciBjb21tZXJjaWFsIiwiZGVzY3JpcHRpb24iOiJEXHUwMGU5Y291dnJleiBsZXMgb2JqZWN0aWZzIGRlIG5vdHJlIEFFQy4gU3RyYXRcdTAwZTlnaWVzIGRlIGdlc3Rpb24gYWRhcHRcdTAwZTllcy4gSW5zY3JpcHRpb24gZXQgY291cnMgZW4gbGlnbmUuIENvbnN1bHRleiBsYSBmaWNoZSBkdSBwcm9ncmFtbWUgaWNpLiIsInVybCI6Imh0dHBzOlwvXC9mYy5jZWdlcGdhcm5lYXUuY2FcL2NvdXJ0YWdlLWltbW9iaWxpZXItY29tbWVyY2lhbC0yIiwidHlwZSI6InByb2R1Y3QiLCJpbWFnZV91cmwiOiJodHRwczpcL1wvZmMuY2VnZXBnYXJuZWF1LmNhXC9jb3Vyc1wvaW1hZ2VcLzIyMTMxXC9uYXN0dWgtYWJvb3RhbGViaS0yODQ4ODItdW5zcGxhc2guanBnIiwiaW1hZ2VfdHlwZSI6ImltYWdlXC9qcGVnIiwiaW1hZ2Vfd2lkdGgiOiIyMzAxIiwiaW1hZ2VfaGVpZ2h0IjoiMTUzNiJ9

eyJyZWxhdGVkX2VsZW1lbnQiOiJicmlvZWxlbWVudCIsInJlbGF0ZWRfaWQiOiIzMjkiLCJ0aXRsZSI6IlN0cmF0XHUwMGU5Z2llIG51bVx1MDBlOXJpcXVlOiByYXlvbm5lciBzdXIgbGUgV2ViIGV0IGxlcyByXHUwMGU5c2VhdXggc29jaWF1eCIsImRlc2NyaXB0aW9uIjoiIiwidXJsIjoiaHR0cHM6XC9cL2ZjLmNlZ2VwZ2FybmVhdS5jYVwvc3RyYXRlZ2llLW51bWVyaXF1ZS1yYXlvbm5lci1zdXItbGUtd2ViLWV0LWxlcy1yZXNlYXV4LXNvY2lhdXgiLCJ0eXBlIjoicHJvZHVjdCIsImltYWdlX3VybCI6Imh0dHBzOlwvXC9mYy5jZWdlcGdhcm5lYXUuY2FcL2NvdXJzXC9pbWFnZVwvMjI0NDdcL2ZvZ25iaTQ1My5icmlvaW1hZ2UucG5nIiwiaW1hZ2VfdHlwZSI6ImltYWdlXC9wbmciLCJpbWFnZV93aWR0aCI6Ijk2MCIsImltYWdlX2hlaWdodCI6IjY2NSJ9

eyJyZWxhdGVkX2VsZW1lbnQiOiJicmlvZWxlbWVudCIsInJlbGF0ZWRfaWQiOiIzNTkiLCJ0aXRsZSI6IkxhIGJvXHUwMGVldGUgXHUwMGUwIG91dGlscyBkJ3VuIGFjaGV0ZXVyIChwcm9jZXNzdXMgZCdhcHByb3Zpc2lvbm5lbWVudCkiLCJkZXNjcmlwdGlvbiI6IkxlIGNvdXJzXHUwMGEwTGEgYm9cdTAwZWV0ZSBcdTAwZTAgb3V0aWxzIGQndW4gYWNoZXRldXJcdTAwYTBwclx1MDBlOXNlbnRlIGV0IGV4cGxpcXVlIGwnZW5zZW1ibGUgZGVzIFx1MDBlOXRhcGVzIGR1IHByb2Nlc3N1cyBkJ2FwcHJvdmlzaW9ubmVtZW50IHF1ZSBsJ2FjaGV0ZXVyIGRvaXQgclx1MDBlOWFsaXNlciBkYW5zIHVuIHByb2pldCBkJ2FjcXVpc2l0aW9uIGRlIGJpZW5zIG91IGRlIHNlcnZpY2VzLlx1MDBhMCBMZXMgZGl4IFx1MDBlOXRhcGVzIHN1aXZhbnRlcyBzb250Li4uIiwidXJsIjoiaHR0cHM6XC9cL2ZjLmNlZ2VwZ2FybmVhdS5jYVwvbGEtYm9pdGUtYS1vdXRpbHMtZHVuLWFjaGV0ZXVyIiwidHlwZSI6InByb2R1Y3QiLCJpbWFnZV91cmwiOiJodHRwczpcL1wvZmMuY2VnZXBnYXJuZWF1LmNhXC9jb3Vyc1wvaW1hZ2VcLzIyNDU4XC9ndnJqdHkzNjIuYnJpb2ltYWdlLnBuZyIsImltYWdlX3R5cGUiOiJpbWFnZVwvcG5nIiwiaW1hZ2Vfd2lkdGgiOiIzMTciLCJpbWFnZV9oZWlnaHQiOiIyMDUifQ==

eyJyZWxhdGVkX2VsZW1lbnQiOiJicmlvZWxlbWVudCIsInJlbGF0ZWRfaWQiOiI0NzAiLCJ0aXRsZSI6IkxlYW4gTWFuYWdlbWVudCA6IG91YmxpZXogbGVzIGNlaW50dXJlcyAgISAgRGluZXItY29uZlx1MDBlOXJlbmNlIiwiZGVzY3JpcHRpb24iOiIiLCJ1cmwiOiJodHRwczpcL1wvZmMuY2VnZXBnYXJuZWF1LmNhXC9sZWFuLW1hbmFnZW1lbnQtb3VibGllei1sZXMtY2VpbnR1cmVzLSIsInR5cGUiOiJwcm9kdWN0IiwiaW1hZ2VfdXJsIjoiaHR0cHM6XC9cL2ZjLmNlZ2VwZ2FybmVhdS5jYVwvY291cnNcL2ltYWdlXC8yMjUyM1wvbnhxaWR1MzQ5XzEuYnJpb2ltYWdlLnBuZyIsImltYWdlX3R5cGUiOiJpbWFnZVwvcG5nIiwiaW1hZ2Vfd2lkdGgiOiIxOTIwIiwiaW1hZ2VfaGVpZ2h0IjoiMTA4MCJ9