CSS Resets

Browsers (in the past) have been incredibly inconsistent with the default styling of elements. To bring everything to zero and build up from there.

Reset usage

Resets must be the first thing in your CSS file. You can either create a separate reset.css file or include these styles at the very beginning of your CSS.

The Eric Meyer's Reset

Originated in 2007. It is still used today. It's purpose is to bring all default values to zero.

No Reset

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

With Reset

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

Normalize.css

Normalize is a more modern approach to a CSS reset. It is larger in size, but leaves a lot of the default styling.

Box Sizing

Box sizing tells the browser what to include in the overall height and width of an element.

.elm{ box-sizing: [value]}

• content-box - content is the only thing that is included in the height and width
• border-box - content, padding, and border are included. Not margin

Example with defaults

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

Changing the box sizing

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

Basic CSS Selectors

• universal
• tag
• class
• id
• descendant
• grouped
• chaining

The Universal CSS Selector

* { /*css rules*/ }

Applies CSS rules to every element on the page

Example

* { color : red}

The tag selector

h1 { /*css rules*/ }

Applies rules to all tags that match.

Example

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

The Descendant Selector

div p {/*css rules*/ }

.my-container p {/*css rules*/ }

.my-container p .highlight {
    /*css rules*/ 
}

Applies rules to any descendants that match the selector. It can be 1 or 10 levels deep.

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

Grouping Selectors

div, p {/*css rules*/ }

You can leverage grouping selectors to share styles between multiple selectors. This can be done by adding a comma between each selector.

Example

See the Pen UA-ITR-GroupingSelector 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-CombinedSelectors by Jon (@Middaugh) on CodePen.

jQuery

jQuery was introduced in late 2006. It is designed to help developers write consistent cross browser compatible JavaScript. It's used by roughly 65% of the top 10 million most popular websites on the internet. This is down due to rise of more complex libraries such as Angular and React.

jQuery Syntax

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.

jQuery is designed to be easily extended to create complex plugins that can be implemented quickly.

Example

Useful References

• jQuery API
• Learn jQuery
• jQuery Fundamentals
• You Might Not Need Jquery

Including jQuery

We need to include a reference to jQuery so that we can use it. We can do this several different ways.

• Locally Hosting It
• Using a CDN copy

Your jQuery reference needs to be the first JavaScript include at the bottom of the page.

The jQuery object

$(element)

$('selector')

We can do just about anything we want after this.

document.ready

The document.ready method allows you to setup code to not execute until the page is ready for manipulation.

            $(document).ready(function(){
                console.log('We are ready!');
            });
            

Selectors

Selectors provide an easy way to retrieve elements from the DOM

$('a')

$('input')

$('form .btn')

$('.list')

$('#btnSubmit')

jQuery Events

Wiring up events are pretty straight forward and are easier to read than raw JavaScript.

    document.getElementById('button').addEventListener('click', update);
            

    $('#button').on('click', update);
            

jQuery HTML

jQuery can make modifying HTML a lot easier.

Getting HTML

 
    var html = document.getElementById('div').innerHTML           

 
    var html = $('div').html()           

Setting HTML

 
    document.getElementById('div').innerHTML = "New HTML";           

 
     $('div').html('New HTML')           

jQuery Input Values

You can interact and modify input values a lot like you are used to html

Getting Values

 
    var value = document.getElementById('txtUserName').value           

 
    var value = $('txtUserName').val()           

Setting Val

 
    document.getElementById('txtUserName').value = "New Value";           

 
     $('txtUserName').val('New Value')           

Basic Effects with jQuery

• Show/Hide
• Fade In/Fade Out
• Slide Up/ Slide Down

Show and Hide

Shows and hides an element by using CSS

$('element').show()
$('element').hide()

Toggle

Detects if the element is visible or hidden and will apply the opposite style.

$('element').toggle()

Parameters

We can extend the functionality by passing in parameters.

$('element').show('slow')
$('element').hide('fast')

$('element').show(200)
$('element').hide(500)

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

FadeIn and FadeOut

Fades the selected element in and out of view.

$('element').fadeIn()
$('element').fadeOut()

Toggle

$('element').fadeToggle()

Parameters

$('element').fadeIn('fast')
$('element').fadeOut('slow')

$('element').fadeIn(200)
$('element').fadeOut(500)

See the Pen UA-ITR-JQ-Effects-Fade by Jon (@Middaugh) on CodePen.

SlideUp and SlideDown

Expands and collapses an element

$('element').slideDown()
$('element').slideUp()

Toggle

$('element').slideToggle()

Parameters

$('element').slideDown('fast')
$('element').slideUp('slow')

$('element').slideDown(200)
$('element').slideUp(500)

See the Pen UA-ITR-JQ-Effects-Slide by Jon (@Middaugh) on CodePen.

Asynchronous Events

The following block of code will execute at almost the same time

$('element').fadeOut(200)
$('element2').slideUp(500)

JavaScript doesn't wait for the first line to finish before the second line is executed.

On Complete Callbacks

$('element').slideDown(duration, callback)

Use Case: Slide a box down and then fade in the text.

    $('div').slideDown(1000, function(){
        $('p').fadeIn(1000);
    });     
    

Example

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

CSS Cursor Property

You can use this CSS property to modify how your mouse cursor appears when moused over an element.

div {
    cursor:pointer; // changes the arrow to a pointer 
}
    

There are over 20 properties you can use.

Yes... you can change it to an image.

Example

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

Exercise 15

Exercise 16