Bootstrap 5 From Scratch | Build 5 Modern Websites
- Description
- Curriculum
- FAQ
- Reviews
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
-
7ContainersVideo lesson
-
8TypographyVideo lesson
-
9Display & PositionVideo lesson
-
10Background & Text ColorsVideo lesson
-
11SpacingVideo lesson
-
12Sizing, Borders & ShadowsVideo lesson
-
13BreakpointsVideo lesson
-
14ButtonsVideo lesson
-
15NavbarVideo lesson
-
16Dark Mode & VariablesVideo lesson
-
17Bootstrap Grid & ColumnsVideo lesson
-
18Flexbox ClassesVideo lesson
-
19CardsVideo lesson
-
20List Groups & BadgesVideo lesson
-
21Forms & InputVideo lesson
-
22Form Validation & DisplayVideo lesson
-
23Alerts & Progress BarsVideo lesson
-
24TablesVideo lesson
-
25Breadcrumbs & PaginationVideo lesson
-
26Other CSS UtilitiesVideo lesson
-
44Project IntroVideo lesson
-
45Project SetupVideo lesson
-
46Navigation & Sass VariablesVideo lesson
-
47Header/Hero SectionVideo lesson
-
48Icon SectionVideo lesson
-
49Navbar Scroll EffectVideo lesson
-
50Details Sections With ModalsVideo lesson
-
51Testimonials, Download Section & FooterVideo lesson
-
52Contact PageVideo lesson
-
53Deploy To VercelVideo lesson
-
54Formspree For Contact FormsVideo lesson
-
63Project IntroVideo lesson
-
64Project SetupVideo lesson
-
65Header With OverlayVideo lesson
-
66Typing Effect JavaScriptVideo lesson
-
67About & Skills SectionsVideo lesson
-
68Projects & LightboxVideo lesson
-
69StyleShout & ServicesVideo lesson
-
70Stats & FormsVideo lesson
-
71Deploy To NetlifyVideo lesson
-
72Project IntroVideo lesson
-
73Project SetupVideo lesson
-
74Navigation & HeaderVideo lesson
-
75Stats & JavaScript IncrementVideo lesson
-
76Intro, Details & ServicesVideo lesson
-
773 Middle SectionsVideo lesson
-
78Projects & TestimonialsVideo lesson
-
79Contact Form & FooterVideo lesson
-
80Back To Top ButtonVideo lesson
-
81Inner Article PageVideo lesson

External Links May Contain Affiliate Links read more