DECO1400 Lecture 6

Responsive Web Design

• What is Responsible Web Design?
  • Responsive Web Design makes your web page look good on all devices
  • Responsive web design uses only HTML and CSS
  • Responsive web design is not a program or JavaScript
• It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge or move the content to make it look good on any screen

Viewport and <meta> tag

• The viewport is the user's visible area of the webpage
• The viewport varies with the device, and will be smaller on a mobile phone than a computer screen
  
• HTML5 introduced a method to let web designers take control over the viewport using the <meta> tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• The width=device-width component sets the width of the page to follow the screen-width of the device
• The initial-scale=1.0 part sets the initial zoom level of the page when it is first loaded by the web browser

Grid View

• Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page
• A responsive grid view often has 12 columns, and a total width of 100% and will shrink and expand as you resize the browser window
• Setting the box-sizing property allows the inclusion of the padding and border in the element's total width - this makes the usage of grid much easier.

Media Queries

• Media Queries are a CSS technique introduced in CSS3
• It uses the @media rule to include a block of CSS properties of only a certain condition is true

/* If the browser is 600px or smallwer in width, the background colour will be light blue */
@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Responsive Web Design Images

• If the width property is set to a percentage, and the height property is set to auto, the image will be responsive and scale as required.

JavaScript

• HTML defines the content of webpages
• CSS specifies the layout of webpages
• JS programs the behaviour of webpages

What Kind of Behaviour does JS Provide?

• On-page content display/hiding/processing
• Changing styling ont he fly (highlighting, etc)
• Handle button functionality
• Trigger animations/transitions
• Pre-submission form validation
• Drag-and-drop functionality

History of JS

• First appeared december 1995 as partnership between Sun (Oracle) and NetScape
  • Brendan Eich was main inventor of JS, who up until 2014 was founder and CEO of Mozilla
• First web browser that supported JS was NetScape Navigator 2.0

Why use JS

• Programming languages for browser
• Highly popular
• Used to build interactive UIs
• Used in building full-stack applications
• Used in desktop and mobile applications

External JS Files

• Best practice to put JS code in external files.
• This has several advantages:
  • Separates HTML and code
  • Makes HTML and JS components easier to read and maintain
  • Cached JS files can speed up page loads

JS Functions

• Functions are a block of code designed to perform a particular task
• A JS function is executed when

  function name(param1, param2, param3) {
    // code to be executed
  }
  

• For example

  function myFunction(p1, p2) {
    // returns the product of p1 and p2
    return p1 * p2;
  }
  

JS Conditions

• The syntax for conditions in JS is as follows:

  if (condition1) {
    // block of code to be executed if condition1 is true
  } else if (condition2) {
    // block of code to be executed if condition1 is false and condition2 is true
  } else {
    // block of code to be executed if condition1 is false and condition2 and is false
  }
  

• Example:

  if (time < 10) {
    greeting = "Good morning";
  } else if (time < 20) {
    greeting = "Good day";
  } else {
    greeting = "good evening";
  }
  

For-Loops

for (statement1; statement2; statement3) {
  // code block to be executed
}

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}