3/8/2018



What is version control?

Collaboration

Allows you and your team to work together on the same project.

The project doesn't have to be a program. You can use a version control system to write a book with other people.

Change Tracking

Version control create a history of all the changes you want to be saved.

It allows you to revert or go back in time if you happen and undo any mistakes that may have been made.

Types of Version Control Systems

Centralized

Centralized version control has one main server that saves the content.

  • Advantages: Easy to learn & tracks history well.
  • Disadvantages: Slow & doesn't work well with larger teams.

Distributed Version Control

Each user has a fully copy of the history of the project locally and they selectively push updates to the main repository location

  • Advantages: Fast and popular
  • Disadvantages: Challenging to learn

Terms

Git Repository

A location of files and information about all the previous versions of those files.

Clone

git clone copies an existing repository to a local folder.


git clone https://github.com/jquery/jquery.git

Pull

git pull pulls down any changes from the source repository into your local repository.


cd jquery
git pull

Add

You use the git add to tell git to track specific files.


#Add a specific file
git add Readme.md

#Add a whole everything
git add .

Stage

Staging changes informs git about what is about to be changed

Commit

git commit takes all of the staged changes and creates a historical bookmark of what changes were made, who made them, and a message that is a brief description of the changes.


git commit -m "Adding a new page"

#Auto stage modified files
git commit -a -m "Adding another new page"

Push

git push sends the most recent commits to the remote source repository. You must have the latest version of the remote repository for a push to be accepted.

    
#first time push only
git push -u origin master

git push
    
        

Merge

A merge occurs whenever there are new commits in the source repository and you have commits that have not yet been pushed to the source repository.

Merges happen behind the scenes and are frequently not noticed unless changes conflict with each other.

Merge Conflict

Merge conflicts occur when changes are made to the same file and git cannot determine which changes should be used.

Fork

A fork of a repository is a user's personal copy of another user's repository. The user can make changes as they want and continue to pull updates from the source repository.

Pull Request

A request to take the changes from your repository to be merged into the source repository.

This is how you would contribute to open source software on GitHub

GUI Options

SourceTree - Mac and Windows

Tortoise Git - Windows Only

overflow

overflow controls what happens when your content is forced outside of its declared size.

You've set the height of a div to 150px in height and have several paragraphs inside of it

Values

  • visible - default value content continues outside of its box
  • hidden - hides content that overflows
  • scroll - Adds scroll bars to content even if it doesn't overflow.
  • auto - Adds scroll bars, but only if the content overflows the box.
Overflow's overflowing overview

Examples

See the Pen UA-ITR-CSS-Overflow by Jon (@Middaugh) on CodePen.

Examples

See the Pen UA-ITR-CSS-Overflow by Jon (@Middaugh) on CodePen.

Two variations

overflow-x

overflow-y

white-space

white-space controls how text operates in a an element with a defined width.

Values

  • normal - Default value
  • nowrap - prevents text from wrapping
White Space Overview

Example

See the Pen UA-ITR-CSS-TextWrap by Jon (@Middaugh) on CodePen.

text-overflow

text-overflow is used with white-space and overflow to add cut offs to text

Values

  • clip
  • ellipsis
Text Overflow Overview

Example

See the Pen UA-ITR-CSS-TextWrap by Jon (@Middaugh) on CodePen.

text-shadow

The text-shadow is made up of 4 values

  • x-coordinate - pixel value
  • y-coordinate - pixel value
  • blur radius - pixel value
  • color of the shadow - color

You can add multiple shadows by separating them with a comma.

Awesome Examples
Overview

Examples

See the Pen UA-ITR-CSS-TextShadow by Jon (@Middaugh) on CodePen.



HTML5 Semantic Tags

Semantic HTML adds readability to your HTML tags. There aren't strict rules around

Basic Overview

What do semantic tags look like?


Page Title


Page Title

section

A section declares a basic grouping of similar content.

  • Base Tag <section></section>
  • Display type block
  • Examples:
    • Grouping of images
    • About an author
    • Group of blog categories

article

Use of the article tag represents a block of content that can be read independently from the rest of the site.

  • Base Tag <article></article>
  • Display type block
  • Examples:
    • News Article
    • User submitted comment
    • Twitter Post

aside

Aside contains content related to the surrounding content.

  • Base Tag <aside></aside>
  • Display type block
  • Examples:
    • Sidebar
    • Notes

header

The header element identifies basic information about the following content.

  • Base Tag <header></header>
  • Display type block
  • Cannot be placed within a footer or another header
  • Examples:
    • Site header
    • Header of an article

footer

The footer element identifies basic information about the following content.

  • Base Tag <footer></footer>
  • Display type block
  • Examples:
    • article author information
    • article related documents
    • Website footer links.

nav

The nav element is used to define a list of major navigation links.

  • Base Tag <nav></nav>
  • Display type block
  • Examples:
    • Main site navigation
    • List of reference articles in an article


JavaScript

Adding JavaScript to your page

You add JavaScript in a similar way that you add CSS to your page.

  • JavaScript can be placed anywhere in your HTML document
  • JavaScript is consumed and executed when the browser consumes it.

Inside a script tag


Fork This Pen

Replace HTML tags with appropriate HTML5 tags.

Example


            

    

    

Tidy up the CSS by replacing classes with tag names

>