Lesson 5

Website Enhancements

Presented by:

Bryan Hurley Web Design Educator

Diploma in Web Design – Part I

Summary of Lesson 4

Summary Of Previous Lesson

Fluid Layouts

One size fits all

Adaptive Web

Design (AWD)

Fixed layout with

Media Queries

Fixed Layouts

Sooo 2003!

Responsive Web

Design (RWD)

Fluid layout with

Media Queries

Summary Of Previous Lesson

@media screen and (max-width: 900px) {

body {width: 85%;}

} CSS Code

Media Type Media Feature

Libraries & Frameworks,Code Calls Library, Framework Calls Code.

• Inversion of Control

When you call a method from a library, you are in control.

jQuery is a Library.

But with a framework, the frameworks calls your code, the control is inverted.

Bootstrap is a Framework.

FrameworksA Framework is a standardised set of concepts, practices and

criteria for dealing with a common type of problem.

• Usually made up of HTML, CSS, & JavaScript documents.

• Typical CSS Framework Would Consist Of:

• CSS code – To create responsive grid

• Typography – To improve readability

• Browser Compatibility Fixes – To standardise the end result across browsers.

• CSS Classes – Predefined styles for elements.

Libraries

• A Library is a collection of precompiled routines that a

program can use.

So code like this:

var x = document.getElementById("myDiv");

x.style.color = "red";

Libraries

• A Library is a collection of precompiled routines that a

program can use.

Can be written like this:

$( "#myDiv" ).css( “color", "red" );

Inversion Of Control

Your Code

FrameworkLibrary

Which One To Choose?

Your development will

dictate the tools.

Q&A

• You will learn Image Types, Licences, Copyright and more!

• You will learn even more about Web Design

• We will be addressing more core areas

• We will announce our BIG MYSTERY

Next Lesson is

support@shawacademy.com

www.facebook.com/shawacademy

www.twitter.com/shawacademy

www.shawacademy.com

Graphics & Media on the Web

See local numbers on website