Derek Bridge

CS1115/CS5002: Web Development 1

Slides Objectives
01
  • learn how the module will be taught & examined
  • learn what a client-server architecture is
  • learn what a communications protocol, such as HTTP, is
02
  • learn about caching — clicks don't always result in requests
  • learn that browsers are not the only clients
03
  • learn about web development careers
  • learn how to mark-up a basic web page
  • learn the HTML tags for headings, paragraphs, lists, etc.
04
  • learn how to use HTML attributes
  • learn the tags and attributes for links, images, etc.
  • learn the tags and attributes for tables, both simple ones and complex ones
05
  • learn the main parts of a URL: scheme, host, port number, pathname
  • learn the difference between absolute pathnames and relative pathnames
06
  • learn the difference between absolute URLs and relative URLs
  • learn when to use absolute URLs and when to use relative URLs
  • learn how servers respond to various requests
07
  • learn how to create links within a web page
  • learn that an HTML web page is a tree of elements
08
  • learn about the rules of HTML
  • learn how to validate your web page
  • learn how to choose the correct character set
09
  • learn HTML tags for specifying page structure, and when to use them
  • learn HTML tags for distinguishing words or phrases from the rest of the text, and when to use them
10
  • learn the rationale behind the use of CSS
  • learn how to use CSS with your web page
  • learn about inheritance in CSS
11
  • learn CSS's find selectors
  • learn how to use HTML's id and class attributes in CSS
12
  • learn about CSS conflicts
  • learn how your browser resolves CSS conflicts
  • learn that you mustn't forget about inheritance!
13
  • learn about CSS colours (colors!)
  • learn about CSS custom properties (variables!)
  • learn about CSS sizes (for fonts and for boxes)
14
  • learn about CSS text properties
  • learn about CSS font properties
  • learn how to use downloadable fonts
15
  • learn that, from a CSS point-of-view, a web page is a tree of boxes
  • learn about CSS properties for styling the parts of those boxes
  • learn more about widths and heights
16
  • learn how to use CSS to float an element
  • learn how to use CSS to position an element
  • learn when to use positioning (almost never!) from examples of relative, absolute, fixed and sticky positioning
17
  • learn about layouts: fixed versus liquid; responsive; multi-column
  • learn how to use CSS to center an element
  • learn a little about flexbox from examples
18
  • learn a little about grid layout from examples
19
  • learn the principles of responsive layout
  • learn how to use CSS media queries for responsive layouts
  • learn to solve the problems caused by images in responsive layouts
20
  • learn how to use CSS for dynamic effects when the user jumps to a position within a web page
  • learn how to use CSS for dynamic effects when the use hovers over an element
  • learn a little about CSS transformations and animations