Faire murir ses compétences en intégration HTML CSS, javascript et wordpress

Disciplines enseignées en webdesign et Dev Front end

La veille fait partie de mon quotidien et je mets un point d’honneur à proposer un contenu d’actualité, mes contenus sont mûrs à point

J’accompagne vos stagiaires en reconversion vers la certification et leur donne les bases techniques précises et des méthodes performantes pour exercer leur futur nouveau métier

Les compétences du webdesigner et du Dev front end

Faites fleurir vos interfaces

Des compétences en webdesign et dev frontend qui permettront de faire fleurir les interfaces de vos stagiaires

Vos stagiaires se destinent au métier de concepteur designer web UI/UX ou de développeur web front end.

Puisez parmi mes domaines d’interventions les compétences qui leur permettront de compléter leur profil ou donnez leur accès à mon parcours complet s’ils partent de zéro.

Avec les compétences, les outils et les méthodes que je propose, ils seront à même, en tant que designer web de concevoir un parcours utilisateur efficace et de contrôler précisément leur surface d’écran et d’adapter leur CMS préféré à certains besoins spécifiques qu’ils n’auront pas su résoudre parmi les réglages des thèmes.

En tant que développeur web frontend ils sauront produire un code propre et maintenable et faire fleurir leurs interfaces pour leurs projets personnels ou leurs missions collaboratives en équipes

UI / UX Design

Créez des prototypes performants

Cycle de formation : UI UX Design - Figma et création de prototypes web

Objectifs de la formation

Identifier des règles de mise en page simples et concrètes qui permettent de produire un contenu attractif. Être en mesure de matérialiser un parcours utilisateur ou des versions responsives d’une application web en amont du code.

Description du cycle

Ce cycle en 2 phases aborde l’aspect théorique de l’UX et UI design, et la manipulation de Figma pour concevoir des interfaces graphiques.

La première partie donne des repères et guidelines pour proposer une expérience de navigation optimale. Tandis que la 2ème partie pratique permet de prendre en main Figma (logiciel de dessin vectoriel et prototypage) et de le maîtriser, afin de présenter à ses clients ou collaborateurs des wireframes fonctionnels, des mockups graphiques et des parcours de navigation interactifs.
Cette formation n’utilise que des outils gratuits, des pistes premium sont proposées afin d’aller plus loin au besoin

Points forts

Ce cycle est centré sur l’utilisateur et le content first, tout en donnant les clés d’une communication visuelle efficace.

Par ailleurs, il permet d’exploiter pleinement un outil de prototypage tel que Figma afin d’échanger avec ses collaborateurs ou clients et de préparer le travail de conception avant de se lancer dans le déploiement de l’application web a proprement parler.

Objectifs de la formation

Être autonome sur la diffusion de contenu sur le web sans aucun pré-requis technique.

A la fin de la formation le blog est en ligne et on peut commencer à rédiger ses articles et animer sa communauté

Description du cycle

Ce cycle de formation présente comment mettre en place un blog rapidement et être autonome sur la diffusion de ses contenus en ligne. On y découvre le fonctionnement du CMS (Content Management System) le plus utilisé dans le monde afin de le mettre au service de sa passion.

Au menu : ouvrir et créer un blog sous wordpress, personnaliser l’apparence du blog, gérer ses contenus fixes et les articles au quotidien, proposer des articles en avant, proposer un système de classement et de recherches croisées performants, gérer les liens vers ses partenaires

Points forts

Ici pas de technique ni de code, simplement l’ouverture d’un compte et la gestion de ses contenus en ligne, avec à la clé la promotion de son savoir faire

Cette formation n’utilise que des outils gratuits, des pistes premium sont proposées afin d’aller plus loin au besoin

Ce cycle est conçu comme un socle de compétences pour les divers autres cours autour de wordpress

WordPress "blogueur"

Publiez votre contenu en quelques clics

Cycle de formation wordpress : gerer un blog et diffuser son contenu sur le web

HTML5 / CSS3

Codez des interfaces responsives

HTML5 CSS3, coder ses interfaces responsive conformément aux standards et dans le respect des bonnes pratiques

Objectifs de la formation

Maîtriser dans leur globalité les langages HTML5 et CSS3 afin de produire des interfaces flexibles et conformes aux standards. Comprendre l’intérêt et maîtriser les outils de productivité du code afin de pouvoir travailler sereinement et en équipe en entretenant une étroite collaboration

Description du cycle

Ce cycle complet donne toutes les clés nécessaires à la réalisation d’interfaces flexibles, conformes aux standards, respectueuses des standards et compatibles avec tous les navigateurs, orientées motion design et responsives.

On y  apprend à utiliser les toutes dernières techniques de placement et positionnement qu’offre le CSS3 tel que gridsystem et flexbox. Le cycle montre comment optimiser son code en exploitant des outils de productivité tels qu’Emmet, Sass et la convention de nommage BEM.

On y aborde le motion design en intégrant des micro animations sur tous les éléments interactifs, mais surtout de nombreuses interfaces complètes corrigées en live mais a réaliser en autonomie permettront de mettre en situation de manière progressive chaque aspect de l’intégration HTML5/CSS3 …

Points forts

Ce cycle est orienté pratique et à l’issue de celui-ci pas moins de 5 interfaces complètes seront réalisées qui jalonnent les couches successives d’acquisition.

Chaque notion théorique est abordée sur des exercices isolés indépendamment des interfaces à réaliser ce qui permet à chacun de s’approprier les connaissances et de choisir comment les injecter dans le travail à accomplir, dans ce cours on ne se contente pas de reproduire mon code mais on met en pratique de manière autonome tout ce qu’on y a appris.

Objectifs de la formation

Etre autonome sur toutes les opérations de maintenance de wordpress telles que: mises à jour, sauvegardes, restaurations, installation, migration création d’un environnement de test.

Connaître et mettre en place les fondamentaux de sécurité sur une installation wordpress. Etre à l’aise pour travailler en local ou à distance sur son propre hébergeur web.

Description du cycle

Pré-requis : Maîtriser le fonctionnement général de wordpress

Ce cycle de formation technique sur wordpress permet de gérer son CMS préféré de A à Z en toute autonomie. 

De l’installation sur son propre serveur web en ligne ou sur un serveur web local, à la gestion des mises à jour, import export, sauvegarde, migration, on apprendra au fil de cette formation à déménager un site wordpress sous un nouveau nom de domaine, créer une version de test ou prévoir l’automatisation de ses copies d’archivage.

Dans ce cycle sont également abordées les notions fondamentales de sécurité à mettre en place pour chaque installation de WP.

Cette formation n’utilise que des outils gratuits, des pistes premium sont proposées afin d’aller plus loin au besoin

Points forts

Cette formation donne les clés technique de la mise à jour de wordpress, des manipulations à prévoir pour déménager un wordpress (changement de nom de domaine ou de prestataire) créer une copie locale du site pour réaliser des modifications dans un environnement de test et surtout protéger les contenus d’une éventuelle cyber attaque.

Dans ce  cycle on découvre les fonctionnalités communes qu’on est en droit d’attendre d’un hébergeur web avec une visite pas à pas d’un hébergeur type.

WordPress "maintenance"

Sécurisez, administrez, déménagez votre wordpress

Wordpress maintenance, gérer les mises a jours, sauvegarde et restauration ainsi que les migrations de son CMS préféré

Bootstrap

Exploitez le framewsork CSS le plus populaire du web

Bootstrap, le framework CSS apprenez a utiliser le plus polulaire du web

Objectifs de la formation

Savoir réaliser une interface responsive et interactive très rapidement sans coder directement en CSS ou Javascript. Savoir étendre les fonctionnalités de l’interface en intégrant des plugins ou snippets. Exploiter les thèmes graphiques tiers réalisés par des graphistes chevronnés

Description du cycle

Pré-requis : Maitrise de la syntaxe HTML

Ce cycle de formation présente le fonctionnement de bootstrap pour réaliser ses interfaces web. On y apprend comment Bootstrap propose une gestion originale du responsive très simple, ainsi qu’à identifier les nombreuses fonctionnalités qu’il offre. Sliders, burger menus, formulaires, galeries pré designés s’intégreront aux interfaces bootstrap avec très peu voire aucune intervention sur javascript ou CSS.

On y découvre les nombreux thèmes graphiques et snippets que propose la communauté Bootstrap à travers une librairie gigantesque. A la fin de ce cycle, on saura coder des interfaces élaborées avec très peu de javascript et de CSS afin de se concentrer sur l’essentiel: son contenu

Points forts

Cette formation permettra aux développeurs web de réaliser très rapidement des back offices bien structurés, des templates graphiques pour leurs applications web et web mobile ou encore la structure graphique d’un thème wordpress.

Objectifs de la formation

Être capable de produire pratiquement n’importe quelle mise en page responsive pour son site web avec des outils visuels exclusivement « Drag and Drop ».

Rationaliser son travail en exploitant les modèles et les thèmes graphiques ainsi qu’en mettant en place des styles généraux réutilisables entre toutes les pages du site

Description du cycle

Pré-requis : Maîtriser le fonctionnement général de wordpress

Ce cycle de formation graphique sur wordpress permet d’exploiter un outil de mise en page redoutable : Elementor qui vient se substituer à Gutenberg l’éditeur natif de wordpress.
On y apprend à gérer des mises en pages complexes en “Drag and Drop” basées sur un principe de sections et de colonnes

Cet outil dans sa version gratuite dispose d’un nombre impressionnant de modules graphiques et d’éléments de réglages.

A travers une visite guidée de ces fonctionnalités on apprendra à réaliser à peu près n’importe quelle composition graphique tant dans son aspect mobile que desktop.
On apprendra à utiliser les bibliothèques graphiques existantes ou créer ses propres modèles réutilisables.
Ainsi qu’a travailler de manière cohérente en enregistrant ses styles généraux de couleur et de typographie.

Points forts

Cette formation pourra intéresser autant un développeur web qui réalise entièrement à la main son thème mais souhaite bénéficier d’un outil de mise en page très performant au sein de ses templates qu’un graphiste web peu enclin au code et qui se sent frustré par le manque de possibilités que propose nativement Gutenberg sous wordpress.

WordPress "Designer"

Créez des mises en pages élaborées et responsive avec Elementor

Wordpress, se former à réaliser des mises en page élaborées grâce à Elementor

Javascript "Vanilla"

Ajoutez de l’interactivité à vos interfaces

Javascript vanilla: formation pour ajouter des interactions a ses interfaces web

Objectifs de la formation

Apprendre les bases du langage javascript, dans l’optique de maîtriser le contrôle des éléments de la page (leur apparition / disparition ou apparence) en exploitant les évènements de navigation (clic, scroll, touche de clavier, mouvements de souris, …)

Description du cycle

Pré-requis : Avoir des notions en HTML et CSS

Ce cycle de formation sur Javascript prend le parti de s’orienter vers l’interface, on y découvrira les composantes fondamentales de ce langage mais on s’orientera rapidement vers l’interactivité et le contrôle des éléments HTML. 

On codera en vanilla JS (javascript sans framework) afin de produire des scripts simples mais très rapides qui donneront un contrôle poussé sur les éléments de la page web.

On apprendra à faire des liens avec CSS ainsi que la gestion des évènements pour produire une expérience de navigation unique au gré des actions de l’utilisateur: mouvements de souris, clics ou scroll de la page.

Points forts

Maîtriser suffisamment le Javascript pour contrôler l’interactivité de son interface en sélectionnant n’importe quel élément HTML et en modifiant son apparence, son emplacement, sa dimension en fonction des clics de l’utilisateur, des déplacements de sa souris, des touches du clavier ou du scroll de la page.

Après cette formation vous pourrez créer des effets parallaxes poussés, des menus accordéons et menus burgers, des indicateur de lectures, sticky boxes, etc ….

Objectifs de la formation

Savoir personnaliser l’administration de wordpress afin de proposer une interface d’administration adaptée aux besoins et accréditation des administrateurs du site. Être en mesure d’accorder des droits personnalisés aux différents administrateurs d’un wordpress. Contrôler l’affichage et l’apparence des menus de l’administration ainsi que l’affichage de tous les éléments faisant référence à wordpress afin d’offrir à ses clients un outil web en marque blanche.

Description du cycle

Pré-requis : Maîtriser le fonctionnement général de wordpress

Ce cycle de formation technique sur wordpress permet d’exploiter plusieurs plugins dédiés à la personnalisation du back office comme l’url de connexion, le logo affiché sur la page de connection, les divers menus que verra ou ne verra pas le client final.

Dans ce cycle on comprendra en détail le fonctionnement des utilisateurs, de leurs rôles et capacités dans la version native de wordpress. Puis, on apprendra à pousser la gestion des utilisateurs en créant des rôles personnalisés et en choisissant quelles accréditations leur sont octroyées sur le backoffice .

Cette formation place le focus sur la personnalisation de l’administration de wordpress, afin de gérer une hiérarchie parmi les éditeurs/ rédacteurs du CMS, ainsi que moduler l’apparence de l’administration afin de la rendre plus intuitive à utiliser pour l’utilisateur final.

Points forts

Cette formation n’utilise que des plug ins gratuits même si certaines pistes premium sont évoquées, elle ne nécessite aucun pré-requis en code et permet de transformer son wordpress en un outil de communication web en marque blanche

WordPress "White card"

Personnalisez l'admin de vos clients et offrez leur un backoffice à l'image de leur societé

WOrdpress marque blanche, personnalisez le back office de vos clients

HTML5 / CSS3 "Senseï"

Réalisez des interfaces animées et jouez avec votre surface d’écran

HTML5 CSS3 pour les senseï repoussez les limites de l'écran

Objectifs de la formation

Repousser les limites de l’écran et exploiter CSS pour “sortir du cadre”. Inclure à ses interfaces des composants graphiques réactifs et animés provoquant une réaction émotive positive. Gérer la sortie du flux et animer ses éléments dans un espace 3D au gré des interactions utilisateurs. Combiner javascript et CSS afin de produire des interactions poussées.

Description du cycle

Pré-requis : Avoir suivi le module HTML5 / CSS3 et Javascript « Vanilla » ou avoir de solides bases

Ce cycle est une suite aux fondamentaux HTML5 et CSS3; on y apprendra à repousser les limites de la surface d’écran (viewport)  et à maîtriser tous les effets qui dynamisent les interfaces contemporaines.

On y abordera toutes les propriétés CSS apportant une plus value notable sur la gestion de l’espace d’écran ainsi que celles, à l’instar des effets de survol, qui traduisent des “succès” aux utilisateurs de l’interface.

Au fil de la formation, les sortie du flux, les positionnements absolus et relatifs, la mise en page par rapport au viewport du périphérique, la gestion de tailles caractères relatives, les animations CSS et les transformations dans un espace 3D révéleront tous leurs secrets.

On y découvrira les unités particulières  (vh, vw, em et rem), les filtres CSS, les transformations,animations et les placements hors du flux avec gestion de la profondeur.

A travers ce cycle, on expérimentera les différents sets de propriétés CSS sur des exercices isolés afin d’acquérir les connaissances pour réaliser en autonomie une interface complète conçue en full screen et contenant de nombreuses interactions javascript.

Points forts

Cette formation met l’accent sur la pratique avec de nombreux exercices isolés et une interface complète de synthèse à réaliser en autonomie mais corrigée en live.

Après cette formation, vos interfaces HTML5/CSS3 vont gagner une nouvelle profondeur dynamique

Objectifs de la formation

Apprendre les fondamentaux de PHP et mySQL comprendre le fonctionnement d’affichage de contenu dynamique. Identifier les fichiers du thèmes et templates afin de réaliser la partie frontend d’un thème WordPress.

Description du cycle

Pré-requis : Maîtriser l’intégration HTML5 / CSS3, connaître l’utilisation de wordpress

Ce cycle de formation nous plonge dans la compréhension des fichiers d’un thème wordpress. Il se déroule en 2 étapes: fondamentaux du langage PHP et fonctionnement de l’affichage dynamique provenant d’une base de données, puis découverte du fonctionnement d’un thème wordpress. 

Dans la première partie traitant PHP et mySQL, on comprendra le principe des requêtes et l’appel de contenu dynamique via une base de donnée en réalisant de toute pièce un site dynamique simplifié qui s’inspire de la structure d’un thème wordpress. 

Dans un second temps on découvrira les templates,  templates tags et fonctions natives de wordpress écritent en PHP qui nous permettront d’installer le coeur de wordpress et sa batterie de plug-ins personnalisables, au sein même de notre interface réalisée avec Bootstrap ou codée “from scratch” en HTML5/CSS3

Points forts

Cette formation très opérationnelle permettra à ceux qui maîtrisent le code HTML et CSS (nativement ou via un framework) de réaliser de toute pièce un thème wordpress et d’acquerir une liberté totale sur l’apparence de leur site web, tout en bénéficiant des nombreuses options natives au CMS ainsi que de la batterie de plugins que sa communauté propose.

WordPress "La voie du thémeur"

Réalisez votre propre thème wordpress “from scratch”

wordpress thémeur: créer un thème wordpress via PHP et HTML ou Bootstrap