What you’ll learn
- Learn to create beautiful, responsive websites quickly and painlessly
-
Use the latest in HTML5, CSS3, and Flexbox alongside Bootstrap 4
-
Master every single Bootstrap component
- Use the Bootstrap 4 Grid system to create complex, fluid layouts
- Compile your own SASS to customize Bootstrap
- Dig into the crazy Bootstrap source files
- Learn the ins and outs of the new Bootstrap 4 utility classes
Course Curriculum
| 1. Introduction | |||
| 1. Course Welcome and Introduction | 00:00:00 | ||
| 2. Intro To Bootstrap | 00:00:00 | ||
| 3. Do Bootstrap Sites All Look The Same! | 00:00:00 | ||
| 4. Comparing Bootstrap 3 and 4 | 00:00:00 | ||
| 2. Environment Setup | |||
| 1. Intro to My Editor VSCode | 00:00:00 | ||
| 1.1 VS Code | 00:00:00 | ||
| 2. Using Emmet | 00:00:00 | ||
| 2.1 Emmet Documentation | 00:00:00 | ||
| 3. Quick Emmet Quiz (Optional) | 00:00:00 | ||
| 4. The Live Server Extension | 00:00:00 | ||
| 5. Optional My Theme and Colors | 00:00:00 | ||
| 5.1 my_theme.json | 00:00:00 | ||
| 3. Getting Started With Bootstrap 4 | |||
| 1. GET THE CODE FOR THIS COURSE! | 00:00:00 | ||
| 2. The Bootstrap 4 Documentation | 00:00:00 | ||
| 2.1 Bootstrap Website | 00:00:00 | ||
| 3. Including Bootstrap 4 | 00:00:00 | ||
| 4. Your First Exercise Intro | 00:00:00 | ||
| 5. Your First Exercise Solution | 00:00:00 | ||
| 4. Bootstrap 4 Basics | |||
| 1. Colors | 00:00:00 | ||
| 2. Buttons | 00:00:00 | ||
| 3. Colors and Buttons Quiz | 00:00:00 | ||
| 4. Typography | 00:00:00 | ||
| 5. Jumbotrons | 00:00:00 | ||
| 6. Exercise Intro | 00:00:00 | ||
| 7. Exercise Solution | 00:00:00 | ||
| 5. Super Useful Utilities | |||
| 1. Bootstrap 4 Breakpoints | 00:00:00 | ||
| 2. The Display Utility | 00:00:00 | ||
| 3. Borders and Shadows | 00:00:00 | ||
| 4. Margin and Padding | 00:00:00 | ||
| 5. Exercise Intro | 00:00:00 | ||
| 6. Forms | |||
| 1. Form Controls | 00:00:00 | ||
| 2. CheckboxesForm Checks | 00:00:00 | ||
| 3. Custom Inputs | 00:00:00 | ||
| 4. Input Groups and Icons | 00:00:00 | ||
| 5. Inline Forms | 00:00:00 | ||
| 6. Exercise Intro | 00:00:00 | ||
| 7. Exercise Solution | 00:00:00 | ||
| 7. Navbars and Flexbox! | |||
| 1. The Nav Component | 00:00:00 | ||
| 2. Flexbox and Navs | 00:00:00 | ||
| 3. OPTIONAL Flexbox Review | 00:00:00 | ||
| 4. Navbars | 00:00:00 | ||
| 5. More About Navbars | 00:00:00 | ||
| 6. Even More About Navbars | 00:00:00 | ||
| 7. Exercise Intro | 00:00:00 | ||
| 8. Exercise Solution | 00:00:00 | ||
| 8. The Magical Grid System | |||
| 1. Intro To The Grid | 00:00:00 | ||
| 2. The Responsive Grid | 00:00:00 | ||
| 3. Grid Alignment | 00:00:00 | ||
| 4. Offsets and Nesting | 00:00:00 | ||
| 5. Forms And The Grid | 00:00:00 | ||
| 6. Exercise Intro | 00:00:00 | ||
| 7. Exercise Solution | 00:00:00 | ||
| 9. Cards and List Groups | |||
| 1. List Groups | 00:00:00 | ||
| 2. Cards Basics | 00:00:00 | ||
| 3. Cards With Images | 00:00:00 | ||
| 4. Cards Layout | 00:00:00 | ||
| 10. Other Components | |||
| 1. Badges | 00:00:00 | ||
| 2. Breadcrumbs | 00:00:00 | ||
| 3. Button Groups | 00:00:00 | ||
| 4. Pagination | 00:00:00 | ||
| 5. Progress Bars | 00:00:00 | ||
| 11. JavaScript Components | |||
| 1. Alerts | 00:00:00 | ||
| 2. Tooltips | 00:00:00 | ||
| 3. Popovers | 00:00:00 | ||
| 4. Dropdowns | 00:00:00 | ||
| 5. Collapse and Accordions | 00:00:00 | ||
| 6. Modals | 00:00:00 | ||
| 7. Scrollspy | 00:00:00 | ||
| 8. Carousels | 00:00:00 | ||
| 10. Exercise Solution | 00:00:00 | ||
| 12. Customizing Bootstrap w SASS | |||
| 1. Intro to SASS and Koala | 00:00:00 | ||
| 1.1 Koala Website | 00:00:00 | ||
| 2. Meet the Bootstrap Source Files | 00:00:00 | ||
| 3. Customizing Colors | 00:00:00 | ||
| 13. Building Aurora Grove | |||
| 1. Intro to Aurora Grove | 00:00:00 | ||
| 2. SASS Setup | 00:00:00 | ||
| 3. Adding the Navbar | 00:00:00 | ||
| 4. Building the Showcase | 00:00:00 | ||
| 5. Adding an Overlay | 00:00:00 | ||
| 6. The Icons and About Section | 00:00:00 | ||
| 7. ExploreExperience | 00:00:00 | ||
| 8. Adding in Quotes | 00:00:00 | ||
| 9. Image Carousel | 00:00:00 | ||
| 10. Social Media Gallery | 00:00:00 | ||
| 11. Footer and Contact Form | 00:00:00 | ||
| 12. The Booking Modal | 00:00:00 | ||
| 14. BONUS PROJECT Museum of Candy | |||
| 1. A Note About This Project | 00:00:00 | ||
| 2. Museum of Candy Part 1 | 00:00:00 | ||
| 3. Museum of Candy Part 2 | 00:00:00 | ||
| 4. Museum of Candy Part 3 | 00:00:00 | ||
| 5. Museum of Candy Part 4 | 00:00:00 | ||
| 6. Museum of Candy Part 5 | 00:00:00 | ||
2 STUDENTS ENROLLED
