Week 6
Bootstrap and GitHub Pages

# Bootstrap common components

In addition to the detailed examples in the Bootstrap documentation, I highly recommend these two tutorials:

Bootstrap 4: Everything You Need to Know
A deep dive into solving common responsive web design problems

Bootstrap 4 Video Tutorial

• Code a Responsive Website (Part 1)
• Code a Responsive Website (Part 2)
• Code a Responsive Website (Part 3)

# Bootstrap Examples

After you have completed the tutorials, have a look at these starter templates for very common design use cases.

Pick one that closely matches your use case, and then copy the source code and begin experimenting and customizing.

To copy a template, choose the view source option from the view \ developer menu in Chrome.

# Bootstrap Themes

For more inspiration about what you can do with Bootstrap, have a look at the commercial themes gallery.

# Website Hosting with GitHub Pages

GitHub offers a free website hosting service for static content -- plain HTM, CSS and Javascript. It does not support dynamically generated content requiring server-side scripting (PHP or Node.js). Nor does it support hosting a database.

The main target of this service is to provide simple hosting for the documentation and tutorial examples for a given software project. For eample, this coursebook is hosted on GitHub Pages.

However, it is perfectly suitable for other purposes such as our course projects.

The following exercise will walk you through the setup process to use GitHub pages. Most of it is repetion of things that we have already practiced earlier in the course.

# EX 6-1: GitHub Pages

This exercise assumes that you have already initialized your local development project folder with git.

git init

And that you have created at least one local commit.

1. Create a new public repository in your GitHub Account with the naming pattern: mtm6330-midterm-username

Make sure you do not check the box to add a default README file.

2. Link your local development project folder to GitHub

git remote add origin https://...

Insert the correct URL for your repo above.

3. Sync local commits to GitHub.

git push -u origin master

4. Set the GitHub Pages branch

On GitHub select the settings tab for your repository and then scroll down to the GitHub Pages section.

Click the source dropdown menu and select master branch and then click the [save] button.

This will publish the content of your repo's master branch with GitHub Pages. You will be able to see your website at username.github.io/mtm6330-midterm-collegeusername/

Again, substitute your github and college user names appropriately. e.g. mine would be rlmckenney.github.io/mtm6330-midterm-mckennr

From this point forward, as you create new commits in your local development project and then sync (push) them up to GitHub, they will become publicly available at the URL above.