Bienvenue sur les cadres et outils d'interface utilisateur Web frontaux : Bootstrap 4.
Je suis heureux que vous ayez décidé de participer à ce cours pour en apprendre davantage
sur le Framework d'interface utilisateur Web frontale le plus populaire : Bootstrap.
Nous allons examiner divers aspects de Bootstrap.
À travers plusieurs exemples, vous apprendrez en faisant des exercices dans le cadre de ce cours.
Regardons quelques détails ensuite.
Avant de commencer ce cours,
assurez-vous que vous avez suffisamment de connaissances
pour réussir ce cours.
Vous devriez avoir une bonne connaissance du HTML, du
CSS et du JavaScript avant de commencer le cours.
De mon point de vue, la conception et le développement web se composent de deux aspects :
l'un est la conception du site web et la page web,
le second est la construction et le déploiement réels de la page web elle-même. Du point de
vue de la conception,
ce que je veux dire est la conception de l'interface utilisateur et de
l'expérience utilisateur, le design visuel, le prototypage, les
éléments de couleurs,
graphiques et animations qui pourraient être d'intérêt.
Dans cette spécialisation, nous ne regardons pas cet aspect du développement web.
Au lieu de cela, nous examinons ce deuxième aspect,
qui est le développement, la construction
et le déploiement de sites Web et de pages Web, en utilisant des technologies
comme les frameworks d'interface utilisateur web frontale comme Bootstrap,
peut-être un framework JavaScript comme Angular ou une bibliothèque comme React
et hybride mobile pour concevoir des
applications mobiles et aussi le développement côté serveur en utilisant Node,
Express, MongoDB, la pile principale plus en détail.
Si vous regardez la spécialisation,
pensez à l'aspect design du site Web,
alors vous pourriez vouloir repenser.
Cette spécialisation se concentre sur
le développement et le déploiement de sites Web et de pages Web,
une connaissance purement technique sur l'utilisation des
compétences basées sur HTML, CSS et Javascript pour le développement réel de sites Web.
Vous vous demandez probablement ce que l'on entend par développement web de pile complète.
Nous examinerons plus de détails sur le développement de la pile complète dans la prochaine leçon.
En particulier, si vous regardez comment ce cours est
positionné dans le contexte général du développement web de pile complète,
dans ce cours, nous traitons du développement de l'interface utilisateur web frontale.
En particulier, le bootstrap UI Framework 4.
Nous examinerons les aspects restants du
développement web de pile complète dans le reste de cette spécialisation.
Ce cours examine Bootstrap en détail.
Nous examinerons également la conception web réactive et comment Bootstrap prend en charge la
conception web réactive via le système Bootstrap Grid.
Nous allons examiner les composants basés sur CSS et Javascript dans Bootstrap et comment vous
pouvez les utiliser dans la création de votre site Web et de vos pages Web. En
cours de route, nous apprendrons ce développement web à l'aide de la ligne de commande.
Nous allons donc apprendre beaucoup d'outils Web qui sont
basés sur la ligne de commande et l'écosystème Node.js.
Nous allons brièvement passer en revue Git,
ajouter Node.js et regarder les outils basés sur Noje.js, y compris les coureurs de tâches comme Grunt et Gulp.
Ce cours, lui-même, est structuré en modules complets.
Chaque module correspond approximativement à une semaine de travail.
Dans le premier module,
nous allons obtenir la vue d'ensemble du développement web de pile complète,
puis vous obtiendrez une introduction rapide à Git et Node.js.
Ensuite, nous allons vous présenter le Bootstrap, puis passer en revue le système Bootstrap Grid.
Cela vous mènera à la première affectation de ce cours.
Le deuxième module traite des composants CSS Bootstrap.
Nous allons examiner la conception de la barre de navigation Bootstrap
et comment nous pouvons l'utiliser pour prendre en charge la navigation.
Nous examinerons les entrées des utilisateurs à travers
les boutons et les formulaires, puis nous examinerons comment nous pouvons afficher le contenu à l'aide de tableaux et de cartes.
Ensuite, nous examinerons comment nous pouvons inclure des images et des médias dans notre page Web à l'aide d'images, de
miniatures et d'objets multimédias.
Et puis, enfin, nous regardons comment nous alertons les utilisateurs à l'aide de balises, d'
alertes et de barres de progression.
Cela devrait vous mener à votre deuxième affectation.
Le troisième module traite des composants JavaScript Bootstrap.
Nous allons regarder la vue d'ensemble du
fonctionnement des composants JavaScript Bootstrap, nous allons examiner les onglets, les
pilules et la navigation par onglets,
puis nous allons examiner comment l'effondrement et l'accordéon peuvent être utilisés pour afficher et masquer le contenu.
Ensuite, nous examinerons l'utilisation des info-bulles,
popovers et modaux pour révéler le contenu à afficher dans votre page.
Ensuite, nous allons regarder le composant carrousel,
qui vous permet d'afficher des informations coulissantes sur votre page Web.
Cela devrait vous conduire à la troisième affectation de ce cours.
Le dernier module traite de Bootstrap et jQuery et divers outils de développement.
Nous allons, en particulier, examiner comment Bootstrap et jQuery interagissent et comment vous pouvez
écrire du code jQuery et JavaScript afin de contrôler votre composant JavaScript Bootstrap.
Nous examinons les différentes méthodes qui sont prises en charge par les composants JavaScript Bootstrap,
qui peuvent être utilisées pour écrire du
code JavaScript pour contrôler le comportement de ces composants.
Ensuite, nous allons examiner le langage de pré-traitement CSS est comme LESS et Sass.
Ensuite, enfin, nous examinerons comment nous pouvons construire et déployer notre site Web à
l'aide de scripts NPM ou de coureurs de tâches comme Grunt et Gulp.
Cela devrait vous mener jusqu'à la dernière affectation de ce cours.
J' espère que vous aurez beaucoup de plaisir à faire
les différentes parties de ce cours et que vous apprécierez également les exercices que vous
rencontrerez à chaque étape qui vous permettront de mieux
comprendre les différents aspects de l'interface utilisateur Web Bootstrap.