3h 28m – Intermediate
Generate your own interactive website from scratch with Bootstrap, the mobile-friendly framework from Twitter, in this start-to-finish course with developer and author Ray Villalobos. First, you’ll plan and prototype the interface with MindMaps and Balsamiq Mockups. Next, download Bootstrap and dive into organizing your site structure with its scaffolding feature—adding PHP includes to break your code into reusable modules and building in the core navigation. Ray then shows you how to build interactive carousels, modal features, and forms, and control these features with JavaScript. Finally, learn to style it all with LESS and prepare to publish the results online.
Topics include:
Prototyping the site
Working with a local web server
Creating a baseline template with Git
Scaffolding the main columns
Making the site modular with PHP includes
Adding basic navigation
Adding a carousel
Working with buttons
Creating and activating tabs
Adding page and structure LESS styles
Introduction – 2m 25s
Introduction – 53s
What you should know – 50s
Using the exercise files – 42s
1. Planning and Setting Up – 1h 11m
Planning your site with mind maps – 10m 6s
Prototyping your site using mockups – 14m 55s
Getting and setting up a Heroku app – 7m 15s
Working with a local web server – 2m 34s
Downloading components and organizing files – 4m 33s
Processing LESS files with CodeKit – 5m 53s
Combining and minifying JavaScript files – 5m 37s
PC Bootstrap Setup – 8m 13s
Creating a baseline template branch with Git – 7m 25s
Adding our assets – 4m 54s
2. Scaffolding – 31m 7s
Scaffolding our main columns – 6m 33s
Using PHP includes to modularize our site – 4m 4s
Adding basic navigation – 3m 27s
Creating a dropdown – 4m 19s
Automating dropdowns with jQuery – 3m 36s
Activating menu items automatically – 3m 25s
Adding footer breadcrumbs – 5m 43s
3. Building Main Content – 22m 9s
Adding a carousel – 4m 36s
Building responsive components – 4m 35s
Working with buttons – 3m 16s
Adding a photo grid with tooltips – 6m 28s
Creating media components – 3m 14s
4. Expanding Our Content – 20m 45s
Adding the registration info promo – 2m 5s
Using modal photos – 9m 25s
Creating an accordion – 5m 23s
Reusing our photo component – 3m 52s
5. Additional Pages – 25m 50s
Creating and activating tabs – 10m 5s
Using a ScrollSpy component – 9m 47s
Enhancing responsive form layouts – 5m 58s
6. Finishing Our Application – 33m 25s
Editing Bootstrap LESS variables – 5m 52s
Adding page and structure LESS styles – 8m 48s
Customizing other components with LESS – 3m 52s
Styling your ScrollSpy component – 6m 32s
Finishing your websites – 8m 21s
Conclusion – 1m 42s
Next steps – 1m 42s