Descendant Selectors

Descendant selectors create a more specific groups of styled content.

    div p{
        color:#ff0000;
    }

Any paragraph inside of a div will have red text.

Example 1

See the Pen UA-ITR-Descendant Selectors by Jon (@Middaugh) on CodePen.

Combined Selectors

You can make your selectors more specific by using multiple selectors joined together

div.class {}

.class1.class2 {}

Example

See the Pen UA-ITR-Combined Selectors by Jon (@Middaugh) on CodePen.

Example

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

Example

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

Example

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

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.

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 an element with a defined width.

Values

• normal - Default value
• nowrap - prevents text from wrapping

text-overflow

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

Values

• clip
• ellipsis

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.

Examples

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

Absolute Positioning

There are five kinds of positioning

• static - this is the default
• relative
• fixed
• absolute
• sticky

Absolute Positioning Cont.

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

HTML5 Semantic Tags

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

What do semantic tags look like?

    
Page Title
    

        
Home
        
Contact
        
FAQ
    


    

    
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

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

Links Page

Exercise 7 - Fork This Pen

Exercise 7 is going to open up the opportunity to develop your own CSS style. Do your best to create the image on the next page. Add classes to the HTML as you see fit.

All hyperlinks should be underlined when you hover over them.

Also

The JS panel has some commented out questions. Answer them using your dev tools.

Exercise 8 - Fork This Pen

Replace HTML tags with appropriate HTML5 tags.

Example

Tidy up the CSS by replacing classes with tag names