Bootstrap Résumé – using Git GitHub & GitHub Pages – Tools

View Github Repository Open presentation in a new window

theWhiteFox

See all presentation from theWhiteFox

Bootstrap Résumé – using Git GitHub & GitHub Pages – Tools

0 1

git-github-bootstrap-tut

A Git, GitHub and Bootstrap tut :octocat:

On Github theWhiteFox / git-github-bootstrap-tut

Bootstrap Résumé

using Git GitHub & GitHub Pages

Stephen O'Connor theWhiteFox.ninja

Introduction

  • Tools to be a Programmer / Web UI Developer
  • Learning to Programme & Problem Solve
  • Git commands + Languages: HTML CSS & JS
  • Hosting with GitHub Pages

Goals

  • Install and learn the difference between Git & GitHub
  • Create a repo, update & learn some basic Git commands
  • Use GitHub Pages to host a online-CV HTML CSS JS
  • Crate a CV & learn to problem solve using the web & GitHub

Tools

Intall / learn about by clicking the links below

  • GitHub a website where you can upload a copy of your repository (repo)
  • Git a version control application - Windows git-scm.com/download/win
  • GitHub Pages are public webpages hosted and published through GitHub
  • A code editor
  • Bootstrap using a CDN

Free Code Editiors

  • Notepad++ is a free (as in "free speech" and also as in "free beer") source code editor
  • Visual Studio Code a windows cross platform code editor

What is the difference between GitHub & Git?

GitHub is a web-based Git repository hosting service Git is a Version control system that records changes to a file or set of files over time so that you can recall specific versions later

Example of GitHub Repo - Bootstrap

Bootstrap the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap is the second most-starred project on GitHub, with over 93K stars and more than 40K forks.

Why use Git and GitHub?

a social network that has completely changed the way we work.

  • GitHub is the largest online storage space of collaborative works that exists
  • brush elbows with the likes of Google and Facebook
  • GitHub accounts, free to download, study, and build upon
?

Why use Git and GitHub?

  • Show off code to future employers, friends and family
  • It keeps “snapshots” of every point in time in the project’s history, so you can never lose or overwrite it
  • multiple people work on a project at the same time without Git getting them confused
?

How to Install Git and GitHub

Sign Up for GitHub to create your first repository Install Git Windows. This page auto downloads Git for Windows Set Up Git, launch Powershell or command prompt 
git config --global user.name "Your Name Here"
git config --global user.email "your_email@youremail.com"

Troubleshotting Solutions

  • Restart Powershell or command prompt
  • Git and Proxy Servers
  • Windows start control panel
  • Chose Internet Options
  • Connections tab
  • Lan settings button, copy and paste address (http://127.0.0.1) and Port (:8080) into cli
  • git config --global http.proxy http://host:port

Create Your First Repository

click Repositories (repo) tab and then the "New" button on the top right of your account page Choose a simple repo name (spaces and special characters will cause problems), enter discription, choose public (default) and add Initialize repo with a README file - optional

Setting up Github Pages

On repo page, select Branch master, create new branch "gh-pages" Select Settings tab (top right) and go to options menu on left and select Branches (Settings page GitHub Pages URL) Under Default branch heading selecting master drop down and then select gh-pages go back to main page and create a HTML file "index.html" using the New File button

Working with local repo

Start PowerShell or command prompt Navigate to development folder type 
git clone 'https://github.com/theWhiteFox/cv-demo.git'
and copy / paste HTTPS of your repo and click enter Test git 
git status
cd name of folder and open folder with text / code editor

How to use Git

git add . git commit git push

adds all stages new and modified files in the current directory

  • check the status of your files with 
    git status

Basically git commit "records changes to the local repository"

git commit -m "Commit message"

"updates remote refs along with associated objects" used to interact with a remote repository

git push
enter Username: & enter Password:

What is Bootstrap?

javascript front-end framework

  • Developed by Mark Otto and Jacob Thornton at Twitter
  • Bootstrap is a free and open-source collection of tools for creating websites and web applications
  • Languages HTML CSS JavaScript

Using Bootstrap depends on what you are building. Firstly Bootstrap is front end for dynamic web applications or static websites, it is mobile responsive, so it serves the best of both: web on a monitor and web on a mobile. Secondly if you are building a traditional three tier application, you can use it with Java, C#, Ruby, PHP (Middleware) used for reading and writing data from the front end to the back end and visa versa. Lastly in a three tier dynamic app you would have a back end, like MySql, SQL Sever databases. An example of a traditional three tier application WordPress a Content Management System (CMS) uses mainly Bootstrap, PHP and MySQL. Building an Android or iPhone app (native apps) you would not use Bootstrap.

How to use BootStrap

There a several ways to install BootStrap

  • Clone Bootstrap
  • Using Node Package Manager NPM
  • Bower - package manager for Javascript libraries
  • BootstrapCDN is a free and public content delivery network. Users of BootstrapCDN can load CSS, JavaScript and images remotely, from its servers. Bootstrap uses MaxCDN's global content delivery network, which makes websites using its service resilient to unexpected surges in web traffic. 
                            https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
                        
                            https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

What is a package manager?

  • A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer's operating system in a consistent manner.

Create CV

Summary

  • GitHub & Git
  • GitHub Pages
  • Bootstrap
  • On-line CV

Thanks!

Questions & Answers

Bootstrap Résumé using Git GitHub & GitHub Pages Stephen O'Connor theWhiteFox.ninja