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 design-for-all
  • appreciate some of the challenges
  • learn about design as an iterative process
03
  • learn how to mark-up a basic web page
  • learn the HTML tags for headings, paragraphs, lists, and simple tables
  • learn what an element is
04
  • learn how to use HTML attributes
  • learn the tags and attributes for links, images, etc.
  • learn the tags and attributes for complex tables
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
  • practice with absolute and relative URLs
  • learn how to create links within a web page
08
  • learn that an HTML web page is a tree of elements
  • learn about the rules of HTML and 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 that, from a CSS point-of-view, a web page is a tree of boxes of various types
  • learn about the parts of those boxes
  • learn about box sizes in CSS
14
  • learn how to style the parts of the box model
  • learn about colours, background images, shadows and other goodies
  • learn more about widths and heights
15
  • learn about page layout and component layout
  • learn a little about flexbox
  • learn a little about grid layout
16
  • learn how to center things
  • learn how to layout a nav and a header
  • learn how to layout a multi-column page
17
  • 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
18
  • learn about CSS text properties
  • learn about CSS font properties
  • learn how to use downloadable fonts
19
  • learn about CSS custom properties (variables!)
  • learn to use custom properties to set up a 'theme' for a web site
  • see a case study
20
  • 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