Curriculum
- Section overview (1:02)
- Accordion (11:20)
- Alerts (7:15)
- Badges & Breadcrumbs (12:39)
- Buttons & Button Groups (16:06)
- Cards (18:58)
- Carousel (14:04)
- Close Button & Collapse (8:23)
- Dropdown (10:50)
- List & List Groups (9:36)
- Model (3:49)
- Navs, Tabs & Navigations (8:53)
- Popovers (8:55)
- Offcanvas (9:39)
- Pagination (4:48)
- Progresbars (6:55)
- Scrollspy (5:43)
- Spinners (6:02)
- Tooltips (5:32)
- Project introduction (4:15)
- Project setup (5:25)
- Webpage Navigation section (11:42)
- Header subsection Profile & Email button groups (5:05)
- Header subsection Dropdown Content for About and Contact (10:57)
- Profile img (2:57)
- Portfolio offcanvas content (10:47)
- Mail offcanvas content (10:30)
- Webpage Footer section (7:17)
- Project introduction (4:40)
- Project setup (3:56)
- Website Said Navigation (11:11)
- Website Header (6:07)
- Website Main section (5:11)
- Website About section (14:29)
- Website Services section (6:37)
- Web development service (15:34)
- SEO service (4:38)
- Data base service (8:05)
- Data security service (7:41)
- Website Contact section (4:56)
- Website footer and conclusion (3:41)
- Project introduction (4:59)
- Project setup (5:31)
- Website navigation (6:29)
- Website header section (13:38)
- Header contact form (19:12)
- Contact form terms of services (5:50)
- Website main section (7:27)
- Portrait photo gallery (20:18)
- Travel photo gallery (14:05)
- Wedding photo gallery (8:52)
- Nature photo gallery (3:32)
- Portfolio section (14:40)
- Footer section and conclusion (5:54)
- Project overview (11:34)
- Implement Bootstrap 5 in to the website (5:48)
- Sass setup (5:41)
- index.html setup (8:00)
- Sass Assets: Configuration, Variables & Utilities (15:23)
- Top info bar - support (11:46)
- Top info bar - carousel (4:48)
- Top info bar - Language & Currency (7:52)
- Top info bar - Cart button (4:24)
- Top info bar - Cart content (20:51)
- Header Navigation (12:47)
- Header Carousel (18:21)
- Categories & technologies (29:31)
- Products section (17:42)
- Products section - First product (11:37)
- Products section - Product content (24:44)
- Customer reviews section (28:25)
- Collaborate section (11:44)
- Footer & Contact section (26:09)
About this course
This course will take you from beginner Bootstrap to Master of Bootstrap 5 by learning all of the utilities, components, widgets and grids and building real world themes and websites. You do NOT need to know Bootstrap 3 or 4 for this course.
Custom Bootstrap Sandbox
I have created a completely custom HTML learning environment for the first few sections of this course. Each lecture has an html page associated with it and has a start state. As we move along through the lectures, you will code along with me learn all that Bootstrap 5 offers including NEW icons, helpers/utilities, components, widgets, flexbox, grid, offcanvas and more.
5 Real Projects/Themes
We will create 5 real world themes. These projects are completely open source and you are free to use them anywhere. All files can be downloaded.
- Project - Bio website theme
- Project - Business Directory website themes
- Project - Resume website themes
- Project - Photo website theme
- Project - eCommerce website using Bootstrap 5 locally + SASS
Who this course is for:
- Beginner front end developers who want to learn there very first front-end framework.
- Junior web developers who never used Bootstrap and want to learn it from scratch.
- Back-end developers who wish to create quick ready to go prototypes.
- JavaScript Web developers.
- Wordpress developers who want to create high quality Wordpress templates using a front end framework.