Intégrateur Web HTML5 CSS3

Transcription

1 Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou un site d e commerce en utilisant des outils (CMS). Aucun prérequis en programmation n est nécessaire pour intégrer la 3W Academy : la formation est concentrée sur ce qui est uniquement nécessaire et sur les bonnes pratiques pour obtenir des résultats de qualité et ainsi devenir un intégrateur web opérationnel. Les technologies enseignées pour notre formation d intégrateur sont toutes celles indispensables aujourd hui : HTML 5, CSS 3, JQuery, Bootstrap, LESS, WordPress. Elles sont utilisées sur presque 100% des sites internet, nous avons choisi les langages de l intégration (HTML, CSS) mais aussi les outils / bibliothèques (JQuery, LESS, Bootstrap, WordPress) les plus utilisés et les plus demandés dans ce milieu. Notre programme en cours du soir vous permettra d être capable de réaliser n importe quel design de site internet. Vous y découvrirez énormément de bonnes pratiques pour gagner du temps, et être productif, car nous savons qu une grande partie de nos étudiants finissent par se bâtir une carrière Freelance. Page 1 / 10

2 Information sur le cours Nom d u programme : Intégrateur Web Durée de la formation : 2 mois Nombre d heures de cours : 112 heures Horaires en semaine : mardi, mercredi, jeudi de 5:30 PM à 8:30 PM Horaires en fin de semaine : 5 samedis, de 9:00 AM à 6:00 AM Localisation : 440 place Jacques Cartier, H2Y 3B3, Montréal, Québec Capacité : 15 étudiants Dates des sessions : janvier, mars, mai, juillet, septembre, novembre Prix : 2.000$ CAD Page 2 / 10

3 Plan du cours Semaine 1 Découverte des langages HTML et CSS. Première balises HTML Sémantique web Bonnes pratiques d accessibilité Nos premiers styles CSS (font *, text *) Modèle de boite (block, inline, margin, padding). Utiliser un environnement de travail (PHPStorm) Utiliser les bons outils d un intégrateur : générateur de contenu, compression Comprendre les différents langages web HTML / CSS / PHP / JS Compétences en Dactylographie Utilisation d un Système d Exploitation Connaissances des principaux raccourcis clavier Cette première partie nous permet de démarrer sur de bonnes bases. Notre cours vous permettra de vous remettre à niveau pour bien comprendre HTML5. De nombreuses choses ont changé, et il est préférable d y aller pas à pas Page 3 / 10

4 Semaine 2 Approfondir la sémantique et commencer à positionner nos éléments. Nouvelles balises HTML5 pour la structure d un site Utilisation des pseudo sélecteurs (hover, target, focus ) Positionnement en CSS (fixed, float ) Découper une maquette pour en faire un site internet Mettre en pratique toutes les techniques apprises Sémantique HTML Utilisation et règles simples en CSS Bonnes pratiques de l intégrateur Cette seconde partie nous permet d approfondir nos connaissances HTML et CSS. L utilisation de bonnes pratiques (comme la syntaxe Emmet dans PHPStorm), vous permettra de sauver beaucoup de temps. Page 4 / 10

5 Semaine 3 Réaliser des sites internet concrets à partir de maquette. Positionnement flottant Effets de transition Comment bien séparer son code CSS (bonne organisation, création de thèmes) Intégration de contenu différent en gardant un design homogène Pseudo sélecteurs Positionnement flottant Nous souhaitons rentrer rapidement dans le métier d intégrateur. Nos exercices sont basés sur des vrais demandes de client. Page 5 / 10

6 Semaine 4 Apprendre à réfléchir sur la structure d un site. Quelles sont les limites du CSS? Les dégradés en CSS3 Création de logo en HTML Les pseudo sélecteurs d enfant (:last child, :first child ) Les positionnements «relative» et «absolute«utilisation des displays (inline, block, inline block.) Les sélecteurs :before et :after Les transformations CSS Utiliser ses propres polices / font Pseudo sélecteurs Positionnement flottant Afin de pouvoir évoluer de manière autonome après la formation, les étudiants ont besoin de connaitre les limites des langages HTML et CSS. Attention à toujours garder à l esprit la sémantique et non l affichage d un site. Page 6 / 10

7 Semaine 5 Utiliser efficacement les formulaires et les tableaux en HTML. Créer des formulaires efficaces et réutilisables Utiliser pleinement les capacités des tableaux Identifier des éléments CSS via ses attributs Améliorer son design en utilisant le CSS3 (ombre, transition, transparence ) Projet : créer un menu déroulant entièrement en CSS sur plusieurs niveaux. Excellente utilisation des displays Positionnement absolut et relatif Nous allons étudier les tableaux de la façon qu ils devraient toujours être utilisés. En jouant avec toutes les compétences acquises, nos étudiants peuvent déjà faire des petites animations! Page 7 / 10

8 Semaine 6 Comprendre et utiliser des systèmes de grille pour obtenir un site responsive. Créer un système de grille à 4 colonnes Intégration complète d une maquette en Flat Design Utiliser des plugins JQuery Très bonne maîtrise de toutes les techniques de positionnement Syntaxe emmet Cette semaine vise à réaliser un autre projet concret en utilisant les techniques d aujourd hui : le responsive web design, le design Flat, les plugins JQuery Page 8 / 10

9 Semaine 7 Découvrir et utiliser efficacement Bootstrap. Le langage LESS. Le système de grille à 12 colonnes Gérer un design responsive facilement avec Bootstrap Les Glyphicons et styles de bases Utiliser et modifier des composants (onglet, barre de navigation, popover, collapse ) Reproduire un site avec Bootstrap Le langage LESS (variables, mixins, imbrication de CSS, calculs ) Très bonne maîtrise de toutes les techniques de positionnement Syntaxe emmet Bootstrap est aujourd hui une référence en matière d intégration, il convient de bien comprendre son fonctionnement. D un autre côté, le langage LESS permet de sauver beaucoup de temps lorsque nous faisons le CSS d un site, c est donc un point important de notre formation. Page 9 / 10

10 Semaine 8 Apprenez à vous servir de WordPress! Création d un blog WordPress Utilisation de thèmes et plugins supplémentaires Création d un thème sur mesure : plusieurs pages, templates sur mesure Administration de son thème via le backoffice WP Tout ce que nous avons vu avant Utilisation de Bootstrap WordPress est incontournable aujourd hui. Il faut savoir réaliser des sites internet avec ce CMS. Nous allons approfondir son utilisation et réaliser un thème complet sur mesure et administrable. Page 10 / 10