PowerPoint Slide 1
Great Video Series for learning bootstrap

Remember what Jake Wilson said about Bootstrap. Even though it is extremely helpful and can save time, you MUST understand what is going on behind the scenes. Be careful not to become reliant on its capabilities.

PowerPoint Slide 2

I know in class we mainly talked about Bootstrap as a framework, but there are also lots of php Frameworks like cakephp which makes writing dynamic and reusable php very easy much like Bootstrap does for html.

In Chrome, you are able to see what your website looks like on a mobile device by going into the developer console (ctrl + shift + j), and clicking the phone/tablet icon in the upper lefthand corner. Here is a tutorial on how to do this.

PowerPoint Slide 4
A great example website illustrating the responsive nav bar and columns: Topo Designs
PowerPoint Slide 5

There is another great reference for bootstrapping tutorials here.

Material Design Lite that was spoken about in class here. Examples here.

Link to the w3schools bootstrap site shown above: here. Link to getbootstrap site here.

One cool fact is that the Bootstrap framework was created by Twitter.

PowerPoint Slide 6

 

PowerPoint Slide 7
Here is a ton of good info for grids. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
PowerPoint Slide 8
Explain about the hierarchy: When we define the grid construction of "md"(like in a row: col-md-7 and col-md-5 ) and don't define it under "sm" or "xs" circumstance, if the size of device shrinks to the "sm" or "xs" extent, it will not keep the way you want them to show, but, for example, show in layers. However, if we define the way we want the widgets to show under the "xs" circumstance, when the size of device magnifies to "sm", "md", or "lg", it will still keep the way you want those components to show as defined under "xs" circumstance.
PowerPoint Slide 9
The link to get the Bootstrap large grid tutorial is here.
PowerPoint Slide 10

Link to getbootstrap navbar example here.

PowerPoint Slide 11
link to the Bootstrap Navigation Bar example on w3schools page here
PowerPoint Slide 12
Be careful if you are using .inc files for common nav/headers/footers. This Stack Overflow thread has some useful information about the use of .inc files in place of .php files.
PowerPoint Slide 13
A brief history of the hamburger icon can be found here. A video of a funny, yet creepy, British cooking show star can be found here.
PowerPoint Slide 14

 

PowerPoint Slide 16
The link to get the Bootstrap theme example is here. Also if you are interested in seeing a compilation of adorable kittens, click here.
PowerPoint Slide 17
Our guest lecturer Jake Wilson on the last Wednesday of class suggested learning Sass which can be obtained here . He also recommended a similar tool but for PHP called Laravel.

As discussed in class, most websites have the following goals in mind:

  • Establish a Web Presence.
  • Provide Information.
  • Market Your Business Online.
  • Generate Leads.
  • Generate Sales.