Project Bootstrap

A collection of websites built as a learning exercise based on a course in Udemy. The purpose of the course was to learn Bootstrap basics.

Reference information

Listed below are the sites where various artifacts can be found that are used in the projects listed. For each project noted, the bulleted lists indicate the bootstrap elements that are explored. Note that these projects only represent the front-end side. There is no backend included.

SITES:

• (Google Fonts)[https://fonts.google.com/]
• (Lorem Ipsum)[http://www.lipsum.com/]
• (Bootstrap)[http://getbootstrap.com/]
• (Font Awesome)[http://fontawesome.io/]
• (Animate CSS)[https://daneden.github.io/animate.css/]
• (WOW.js)[http://mynameismatthieu.com/WOW/]
• (SASS)[http://sass-lang.com/]
• (less)[http://lesscss.org/]

Proj 1 - App Sales Website

path: app_salespage/index.html

• Bootstrap Navbar
• Jumbotron showcase
• Accordion Menu
• 12 Col Grid
• Image Styling
• Bootstrap Icons
• Bootstrap Forms
• Media Queries

Proj 2 - Portfolio Resume Page

path: resume-page/index.html

• Sass / .scss files
• Using Variables
• List Groups
• 12 Col Grid
• Image Styling
• Progress Bar
• Media Objects
• Alerts

Proj 3 - Social Network

path: dobble/index.html

• Nested Grid & Elements
• Button Groups
• Image Classes
• Login Form
• Image Modal w Gallery Plugin
• Tooltips
• Media Queries

Proj 4 - Agency Landing Page Using LESS

path: digital_agency/index.html

• LESS CSS Pre-processor
• Jumbotron showcase
• Scroll down effect
• Navbar effect
• Font-awesome effects
• Media Queries

Proj 5 - Photo Gallery

path: photoshak/index.html

• Photo Grid
• Tabbed Categories
• Image Carousel
• Photo Lightbox Script
• Tooltips

Proj 6 - CMS Admin Template

path: alpha_cms/index.html

• Bootswatch Tools
• Login Page
• Breadcrumbs & Pagination
• Table Sorter Script
• Search Filter Input
• Post Pages

Proj 7 - Web Hosting Website

path: edx_hosting/index.html

• Bootswatch Tools
• Content Carousel
• Stacked Icons
• Login Modal
• Pricing Tables
• Form Styling

Proj 8 - Ecommerce Template

path: ecommerce/index.html

• LESS setup
• Custom Header
• Product Grid
• Customized Tabbed Widget
• Product Detail Pages

Proj 9 - Business Bootstrap Theme

path: business_theme/index.html

• Animate.css
• WOW Scroll Animation
• Custom Navbar w/Subtext
• Inner Pages
• Mobile Optimization

Proj 10 - Blog Website

path: the_blog/index.html

• Custom Tab Widget
• Widget Thumbnails
• Blog Posts
• Single Page Posts
• Inner Pages
• Mobile Optimization

Boilerplate stuff

path: bootstrap-starter

• Contains basic artifacts for starting a new project