Lessons 67, 68 & 69 – Complete 2020 Web Development Bootcamp

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.

The third way to install Bootstrap is to download the CSS and Javascript source code and include it in your website. The source code can be found on the download page. The downside of this method is that users of your site will have to download these files whenever they visit your site which can make your site a bit slower than if you use the Bootstrap CDN.

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.