課程資料
報名日期
全年招生
課程級別
學習模式
修業期
13 小時 17 分鐘
教學語言
英語
授課導師
Brad Traversy
評分
1次瀏覽
課程簡介
Learn to customize and build modern websites from scratch using Bootstrap 5
This course is for anyone that wants to learn how to build modern websites and UIs using the Bootstrap CSS framework. This course is very beginner friendly, but is also for anyone that wants to build some cool projects.
The course is broken up into a few parts...
The Bootstrap Sandbox
We will start off by learning all of the important Bootstrap classes, utilities, helpers, etc by using the Bootstrap sandbox. This is a collection of files that are categorized for certain components and areas such as buttons, typography, grid columns, flex, etc. You will have a starter version without the classes and we will go through and add the classes and talk about them and in some cases examine the CSS. We will use the sandbox for all of the CSS components as well as the JavaScript widgets such as the carousel, accordion, toast notifications and so on.
Mini-Project Challenges
There will be a couple mini-projects that I will ask you to complete yourself, based on what you learned in the sandbox sections. This includes a pricing grid, ratings component and a user list. I may add more to this section as well.
Starter Template / Boilerplate
We will be creating a template and environment to build our main projects. This will include using NPM (Node Package Manager) to install Bootstrap and Sass. We will customize Bootstrap by changing Sass variables and then compiling a custom bootstrap.css file. If you don't know NPM or Sass, that is fine. I explain everything as I go.
5 Main Websites
Next, we will use the starter template to create 5 great looking websites. In these websites, we will use Bootstrap componenrs, JavaScript widgets as well as some custom JavaScript and 3rd part libraries to give us a little more functionality.
The websites are as follows:
- Ebook Website - Website that offers a free ebook about starting a blog
- Corso Website - Website that offers training courses and seminars
- Portfolio Website - Modern looking portfolio for developers
- Yavin Website - A business that creates custom office spaces
- Vera Website - Software solutions website
課程章節
- 10 個章節
- 93 堂課
- 第 1 章 Getting Started
- 第 2 章 Bootstrap Fundamentals - Part 1
- 第 3 章 Bootstrap Fundamentals - Part Two
- 第 4 章 Dynamic JavaScript Components
- 第 5 章 Mini-Project Challenges
- 第 6 章 Custom Sass Workflow & Starter Template
- 第 7 章 Website 1 - Ebook Website
- 第 8 章 Website 2 - Corso Training Website
- 第 9 章 Website 3 - Portfolio Website
- 第 10 章 Website 4 - Yavin Office Design
課程內容
- Create 5 high quality websites from scratch
- Create an enviroment boilerplate to compile Sass & customize Bootstrap
- 3 mini-project challenges
- Learn & examine Bootstrap classes & utilities using sandbox files
- Learn semantic HTML5 & CSS techniques
評價
-
AAlexander Gonzales
Extremely detailed, gave an great rundown on the fundamentals of utilizing Bootstrap. Overall, fantastic!
-
JJoonas Helde
I would love to write a positive review, because Brad is such a nice guy, but objectively, I can't recommend this course (at this point). Most of the content is the instructor writing code with very little explanation, and that code is freely available in his Github repository. What could be improved? Instead of 5 projects, this course could have just 2 or 3 "different" projects, with more time taken to explain Bootstrap classes usage and how they relate to CSS in those projects.
-
TThomas Mühlbauer
Der Kurs hat zu einem guten Grundverständnis von Bootstrap beigetragen. Durch die vielen Vorlagen werde ich mir eine persönliche Homepage bauen können, die professionell aussieht. - Das war für mich der Grund, den Kurs zu belegen. Das Wissen von Brad ist wirklich beeindruckend. Auch seine Vortragsweise gefällt mir.
-
PPAMELA CARSON
Really easy to follow along. Not too fast or slow. Brad explains things in a very logical way.
