Lesson 67 – Installing Bootstrap
Go to the Bootstrap download page and copy the Bootstrap CDN and past it in the <head> section of index.html beneath the <title> section.
Another way to use Bootstrap is to simply copy their starter template which can be found here.
Lesson 68 – Web Design 101 – Wireframing
Wire frames are a low fidelity representation of the design of the website. They can be done with pencil and paper very quickly.
A mock up is a high fidelity representation of the website’s design.
Usual workflow is to start by looking at other websites for ideas and then looking at UI patterns on sites like uipatterns.io and looking at their design patterns.
The next step is to sketch a simple wireframe for planning the layout of the site.
Optionally, you can then create a mock up using the Sketch app or Photoshop Illustrator.
Finally, you can create a prototype which is an animated version of your website showing exactly what it will look like.
Dribbble.com is a good resource for getting inspiration on website design.
You can get templates for various devices (mobile, laptops, desktops) from Sneakpeekit and use them to sketch a wireframe of your design.
You can also use Balsamiq for wire framing.
Lesson 69 – Bootstrap Navigation Bar
The Bootstrap library contains a number of elements that you can use in your site.
One of these elements is the Bootstrap Nav Bar. To find the code for the Bootstrap Nav Bar, you first go to the Bootstrap documentation page and select ‘Components’ from the list in the side bar and then select ‘Navbar’ to get to the page containing the documentation and code for the nav bar.
To see the Nav Bar, I created using Bootstrap Nav Bar go here.