List Style

Changes the default styling of UL and OL lists

• list-style-type - changes the icon/value used in the list
• list-style-position - changes the position of the list. Accepts inside and outside
• list-style-img - changes bullets to image. Accepts none or a valid URL
• Short handlist-style: type position img

Example

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

What are psuedo-classes?

A pseudo-class is used to define a special state of an element

Link psuedo-classes

	/* unvisited link */
	a:link {
		color: green;
	}

	/* visited link */
	a:visited {
		color: red;
	}

More Resources

More psuedo-classes

Common button pseudo-classes:

• focus
• active

CSS 3

CSS3 is the largest batch of changes to CSS.

• Rounded Corners
• Gradients
• Animations
• Advanced Selectors

Vendor Prefixes

Vendor prefixes are considered 'experimental' properties and should be used with caution.

   div{
        /* Safari 3-4, iOS 1-3.2, Android 1.6- */
        -webkit-border-radius: 12px;
        /* Firefox 1-3.6 */
        -moz-border-radius: 12px;
        /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
        border-radius: 12px;
    }

Rounded Corners

Rounded Corners will probably the most commonly used CSS3 property.

    .round {
        border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */
    }
    .round {
        border-radius: 50%; /*Creates a circle if length equals height*/
    }

Rounded Corners for Buttons

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

Rounded Images

See the Pen eyamLw by Jon (@Middaugh) on CodePen.

Colors and Opacity

CSS3 opened up more possibilities for colors and opacity in our CSS

RGBA Colors

Red, Green, Blue, and Alpha

    p{
        background-color:rgba(255, 0, 0, 0.5); /*Red with 50% opacity*/
    }
    a{
        color:rgba(255, 0, 0, 0.5); /*Text will be red with 50% opacity */
    }

Element Opacity

You can change the full element opacity by using the opacity property.

    p{
        /*Red with 50% opacity*/
        background-color:#ff0000;
        opacity:0.5;
    }

In Action

See the Pen MrdYBx by Jon (@Middaugh) on CodePen.

Gradients

CSS gradients allow you to display a transition from one color to another. Gradients are one of the most vendor prefix heavy CSS properties we will use.

    .button{
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100 */
        background: #1e5799; /* Old browsers */
        background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    }

Gradients

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

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.

Example 2

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

Your Brand Color

Start thinking about a primary color you like and want to use in your future websites.

You can use a tool like this to generate a color scheme. Color Calculator

Floating Vs Inline-Block

• There are some gotchas with spacing inside inline-block: Why is there whitespace?
• 4 items at 100px
• Inline Block - Wraps
• Float - doesn't
• Result

Beautifying Code

Command Line

The Super Basics

Per Platform

Mac: Terminal

Win: GitBash

Pro Tip

Use tab to auto complete commands and paths. It will save you a lot of time.

Listing a directory

ls or dir

MAC

$ ls

front-end-development-course-info/docs

Windows

$ dir

front-end-development-course-info\docs

Changing a Directory Mac

cd

#list directory
$ ls

front-end-development-course-info/docs
#change directory into docs
$ cd docs/
$ ls

index.html
sessions
....

Changing a Directory Windows

cd

#list directory
$ dir

front-end-development-course-info/docs
#change directory into docs
$ cd docs/
$ dir

index.html
sessions
....

Directory Shortcuts in Windows

• .. - Parent Directory
• / - Root

Displaying your current path Mac

Got lost in your console? Use the print working directory command to get a full path of your current location

pwd

$ pwd
c/users/jisajmb
        

Displaying your current path Windows

Got lost in your console? Use the print working directory command to get a full path of your current location

cd

$ cd 
c/users/jisajmb
        

Creating a directory/folder

You can create a new folder by using the make directory command. Same for Mac and Windows.

mkdir

#list directory
$ cd

front-end-development-course-info\docs

$ mkdir my-work 
$ cd

front-end-development-course-info\docs\my-work

Make a file via command line Mac

touch

#list directory
$ ls

front-end-development-course-info/docs

$ touch index.html
$ ls

index.html

Make a file via command line Windows

echo > index.html

#list directory
$ dir

front-end-development-course-info\docs


$ echo > index.html
$ dir

index.html

The Clear Command

You can clear the console by simply typing clear (Mac) or cls (Windows) and hitting enter.

Tutorials

Windows CMD Tutorial

Mac Terminal Tutorial

What is Blockchain?

...not something you need to know for assessment 1

...but it is something you need to know as a member of the IT community

Links from today's slides:

Exercise

Assignment 1