Induction lab

  1. Check out the CI435 space on MyStudies
  2. If you are working in C205, you can boot the computer as Windows or Mac
  3. Create a default web page in Brighton Domains
  4. Create and publish a basic test page

WEEK 1. Creating a basic HTML website

  1. Create a site folder and the Learning Journal page index.html
  2. Create a second HTML page - tutorial.html - and link it to index.html
  3. Create a third page - contact.html
  4. Add content to the Learning Journal
  5. Validate HTML

WEEK 3. More HTML markup

  1. More lists - nested and definition lists
  2. Add a table to your learning journal
  3. Quoting text
  4. Make an image into a link

WEEK 4. CSS basics

  • Copy the CSS style sheet -stylesheet.css with selectors for all the index.html elements
  1. Copy normalize.css and link to all your web pages
  2. Copy stylesheet.css and link to all your web pages
  3. Style the body element
  4. Style the other elements
    • <h1, h2...h6>
    • <p>
    • <div id="wrapper">
    • Anchor pseudo classes
    • Style the main menu - <nav id="menu">
    • Style the article headings - <header class="post">
  5. Validate the CSS

WEEK 5. Styling text

  1. Specify the font-family with web-safe fallback
  2. Web fonts - Google fonts
  3. Style paragraphs: line-height, margin, text-indent, dropcap, text-align
  4. Float an image and wrap text around it

WEEK 6. Making the Learning Journal page responsive

  1. Sketch wireframes of different width screen layouts
  2. Add the viewport meta element to the <head> of the document
  3. Adjust HTML if necessary
  4. Stylesheet organisation
  5. Set up the responsive grid
  6. Style small screen layout - mobile first approach
  7. Media queries - styles for different screen widths
  8. Hiding elements - display:none
  9. Make images flexible
  10. Testing responsive web pages

WEEK 7. Flexible media

  1. Clipped full-size image
  2. Flexible image
  3. Flexible image with text wrapping
  4. Flexible video container

WEEK 7 EXTRA - Images

Part 1. Editing and optimising images for the web - Lynda.com video tutorial

Part 2. Web graphics: colour, background images and favicons

  1. Colour palette generators
  2. Background images
  3. Controlling repeating images
  4. Make a favicon
  5. Using CSS3 instead of digital images

WEEK 9. HTML5 forms

  1. Introduction: Uses of forms
  2. Step 1: Insert a form on the web page
  3. Step 2: Add form elements to the contact form
    • The text input element and label element
    • The fieldset and legend elements
    • The textarea element
    • Radio button group
    • Submit button input element
  4. Enhancing forms with HTML5 input types and other features
  5. HTML5 form validation
  6. Form styling example

If you have any questions email Jennie Harding.

Go to top of page