Gad Lab travaille depuis plus de 30 ans dans la communication web.
Profitez de son immense expérience et de tous son savoir-faire, au travers de ses formations · En savoir plus sur le formateur.
POUR QUI ?
- Webdesigners professionnels et étudiants
- Concepteurs en applications web
- Médiamaticiens professionnels et étudiants
PRÉ-REQUIS
- Maîtrise des outils de bureautique de type traitement de texte, tableur, et format d’export (csv, xml, json).
- Notion de base des langages HTML, CSS et javascript.
- Notion de base en image digitale et leurs formats numériques.
Pourquoi utiliser Bootstrap dans un projet web ?
Tous simplement pour ses nombreux avantages!
Bootstrap est un framework CSS gratuit et open-source qui facilite la création de sites web «responsive». Il s’appuie sur le principe du «Mobile First», un fondamental incontournable en web design .
Utiliser un framework et un environnement de développement permet de gagner un temps de considérable, grâce à ses composants prêts à l’emploi. Il est facile à utiliser même pour les débutants et offre un système de grille responsive. Il est entièrement personnalisable et compatible avec tous les navigateurs moderne. Son utilisation nous assure la cohérence de nos projets, grâce à un grand nombre de ressources en ligne et sa vaste communauté d’utilisateurs actifs dans le monde.
- Gain de temps : Bootstrap propose des blocs de code prêts à l’emploi, ce qui permet de ne pas partir de zéro et d’accélérer le processus de développement. Des thèmes et modèles prêts à l’emploi sont également disponibles.
- Facilité d’utilisation : Même les débutants peuvent installer et utiliser Bootstrap facilement grâce à sa documentation détaillée et à son intégration simple avec HTML, CSS et JavaScript.
- Système de grille responsive : Conçu pour être « mobile-first », Bootstrap utilise un système de grille qui divise l’écran en 12 colonnes, rendant les sites web adaptatifs et compatibles avec les appareils mobiles.
- Personnalisation : Bootstrap permet de modifier ses fichiers CSS pour créer un design unique, et de combiner ses propres styles avec ceux de Bootstrap.
- Compatibilité multi-navigateurs : Le framework est compatible avec tous les navigateurs modernes, assurant ainsi une expérience utilisateur cohérente.
- Cohérence : En utilisant Bootstrap, les développeurs peuvent maintenir une uniformité de style et de structure à travers différents projets, ce qui est particulièrement utile pour les équipes travaillant sur de grands projets.
- Ressources et communauté : Une abondance de ressources, de documentation et de support communautaire est disponible, facilitant l’apprentissage et la résolution des problèmes.
- Plugins et extensions : Bootstrap offre une vaste gamme de plugins JavaScript pour ajouter des fonctionnalités interactives sans avoir à écrire beaucoup de code supplémentaire.
Formation à l’utilisation de Bootstrap
L’objectif de ce courts est de comprendre l’infrastructure de développement offert par Bootstrap et ses nombreuses composantes selon le principe du «Mobile First».
- Public visé : Frontend developers et Webdesigners
- Chaque module peut être ajusté en fonction des besoins et du rythme d’apprentissage propre à chaque participant.
Points-clés
- Ce cours offre une progression structurée de débutant à expert en design frontend.
- Les modules couvrent les domaines de la conception, de l’infrastructure du code et de la thematisation graphique de l’interface utilisateur.
- Des objectifs pratiques sur un projet final concret permettent de mettre en pratique les compétences acquises.
Module 1 • Conception ( Wireframing )
// Introduction au « Wireframe »
- Qu’est-ce qu’un wireframe ?
- Importance du wireframing dans le processus de design
- Outils de wireframing (Sketch, Figma, Adobe XD, etc.)
// Exercices Débutants
- Exercice 1 : Création d’un wireframe pour une landing page
- Exercice 2 : infrastructure d’une page web
// Exercices Intermédiaires
- Exercice 1 : Conception d’un wireframe pour une application mobile
- Exercice 2 : Ajout d’interactions basiques (liens, boutons)
// Exercices Avancés
- Exercice 1 : Création d’un prototype interactif complet d’un site web
- Exercice 2 : Test utilisateur et itération du wireframe en fonction des retours
Session 2 · L’administration de votre site
4 leçons de 2 heures
- Connectez-vous à votre tablaeu de bord (dashboard) pour créez vos articles et vos pages
- Paramétrez les options de votre installation WordPress
- Mettez en place la page d’accueil et gérez votre menu de navigation
- Personnalisez l’apparence graphique de votre site
