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)
OU
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é :
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