|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/bootstrap5master/
课程评论:没有评论
本课程是专为 **Bootstrap 5 初学者** 设计的“最强指南”。 **课程目标**:解决您在网站设计中遇到的所有问题,即使没有设计经验,也能制作出专业级、响应式的网站。 **课程特色**: * **实践为王**:在学习基础知识的同时,强调动手实践,确保您能真正掌握并将 Bootstrap 5 应用到实际工作中。 * **内容全面**:涵盖 Bootstrap 5 的方方面面,从环境准备、基础用法到各种组件和常用类,直至实际项目制作。 * **零基础友好**:虽然会涉及 HTML 和 CSS,但课程设计已尽量减少手动输入,让初学者也能轻松跟上。 **主讲人介绍**: * 拥有超过18年的 IT 从业经验,曾教授超过1792名学员。 * 在线课程评价高达4.92/5.0,出版过18本以上畅销书籍。 * 拥有3000+ 服务、系统、网站的开发经验。 **课程大纲**: 1. **Bootstrap 准备**:了解所需工具,安装和设置 VSCode,以及浏览器和 Web 服务器的配置。 2. **Bootstrap 基础**:学习 Bootstrap 的基本概念和安装方法,以及其核心用法。 3. **Bootstrap 图标**:掌握 Bootstrap 内置图标的安装和使用。 4. **文字、表格与布局**:学习颜色、断点、容器、网格系统、排版、图片和表格的运用。 5. **表单**:深入学习各种表单元素、控件、布局及验证。 6. **组件**:全面掌握 Bootstrap 提供的各种 UI 组件,如按钮、卡片、导航栏、模态框等。 7. **常用设计类**:学习颜色、边框、显示、卡片、阴影、尺寸和间距等类别的实用技巧。 8. **Bootstrap 实战**:通过实际案例,快速设计网站并完成项目制作。 **重要提示**: * 本课程假定学习者具备 **HTML 和 CSS 的基础知识**。虽然课程已尽量简化,但了解这些基础将有助于更顺畅地学习。 * 课程将提供所有示例使用的 **HTML 和图片资源** 供免费下载。 通过本课程的学习,您将能够熟练运用 Bootstrap 5,自信地制作出专业水准的网站。
あなたは以下のことで悩んでないだろうか?「Bootstrapを覚えたい」「最速でWEBサイトを作りたい」「デザインの知識がなくてもプロ並みのデザインをしたい」「きれいなサイトを初心者でも作りたい」「スマホ、タブレット、パソコンと自動で画面が切り替わるサイトを作りたい」もし、これらのことで悩んでいるなら、あなたのお役に立てます。最初に断言しますこの講座は Bootstrap5 の初心者に向けた「最強バイブル」です。この講座の目的はたった1つ。あなたのデザインの悩みを「解決」させることです。世の中にはたくさんのBootstrap5の書籍やデザイン講座がありますがほとんど、どれも同じ内容です。しかし、多くの初心者にとって「どうやったら自分で使える様になり解決できるか」「どうやったら実際の現場でも取り入れて使える様になるか」これらを知ることが1番重要です。ですので、この講座では基礎を学習しつつ、実際に手を動かして体験する実践的な内容になっています。完全に保証しますこの講座の内容を、あなたがしっかり実践することで、Bootstrap5を使うためのスキルが身につく様になります。いま講座をしているあなたは誰ですか?この講座をする上であなたは誰だ?と思っている人もいると思いますので1分だけ自己紹介をさせてください。こんにちは!18年以上ITエンジニアとして活動してきたよこやま良平です。4歳~85歳まで、年間1,792人名以上の方にパソコンやプログラミング講座を行ってきました。オンライン講座では100件以上のレビューを頂いており評価は4.92/5.0と高い評価を得ています。また18冊以上の書籍を出版しており、連続で1位を獲得しました。その他これまでに3000以上のサービス・システム・サイトを作成。これまでの経験を通じて、多くの人々が情報化社会に追いつくことができるよう支援しています。パソコンやプログラミングを学ぶことは、将来のキャリアや個人の成長にとって非常に重要なことです。その観点から初心者へわかりやすく解説をしています。◆目次1.ステップ1 Bootstrapの準備1.今回使うツール2.VSCodeのインストール3.VSCodeの簡単なセットアップと使い方4.ブラウザのインストール5.WEBサーバーで確認したい場合2.ステップ2 Bootstrapの基礎1.Bootstrapとは2.Bootstrapのインストール3.Bootstrapの基本的な使い方3.ステップ3 Bootstrapのアイコン1.Bootstrapアイコンのインストール2.Bootstrapアイコンの使い方4.ステップ4 文字・テーブル・カラム1.カラー2.ブレイクポイント3.コンテナ4.グリッド5.カラム6.タイポグラフィ7.イメージ8.テーブル5.ステップ5 フォーム1.フォーム2.フォームコントロール3.セレクト4.チェックボックス・ラジオ5.レンジ6.インプットグループ7.フローティングラベル8.レイアウト9.バリデーション6.ステップ6 コンポーネント1.アコーディオン2.アラート3.バッジ4.パンくずリスト5.ボタン6.ボタングループ7.カード8.カーセル9.クローズボタン10.コラプス11.ドロップダウン12.リストグループ13.モーダル14.ナビゲーションバー15.オフキャンバス(隠しサイドバー)16.ページネーション17.ポップオーバー18.スクロールスパイ19.スピナー20.トースト(アラートメッセージ)7.ステップ7 デザインでよく使うクラス1.カラー・背景色2.ボーダー3.ディスプレイ4.カラム・フォーム5.カード6.オパシティ―・シャドー7.オブジェクトフィット・サイズ・スペース8.ステップ8 Bootstrapの実践1.サンプルを使った爆速デザイン制作2.実際にサイトを作成するこの講座で使ったHTMLや画像の無料ダウンロード◆この講座の注意点この講座はBootstrapの初心者に向けた講座です。HTMLやCSSを使いますが、初心者でも達成できる様になるべく入力する必要のない講座にしました。ですが、講座を受講する上で最低限「HTML」「CSS」の基礎や意味がわかるとよりスムーズです。この講座ではBootstrapで使うClassの説明はしますがHTML、CSSの基礎的な解説は行いませんのでご注意ください。最後に講座で使ったテンプレートをダウンロードプレゼント致しますので活用してください。頑張って一緒に学習してきましょう!