• the "Back-up" talk
  • user accounts
  • meet the lab, lab rules
  • meet the computers
  • exactly what does "monitors OFF!" mean?
  • printing

Students are responsible for saving back-up copies of all their work. It is useful to have a GMail account and a USB drive.

Topics to be Covered

  • How the Internet Works: Host/Client Relationship, Protocols, TCP/IP
  • HTML
  • CSS
  • Principles of Web Design
  • Programming Concepts in Javascript:
    1. structures within existing code
    2. ways to modify existing code to meet a particular purpose
    3. strategies to predict effects of code modification
    4. programming language constructs to support input/output, logic, decision structure, and loops
    5. requirements of a problem statement
    6. ways to transform requirements into algorithms
    7. translation of design specifications into source code
    8. tools to aid in the development process
    9. pre-built libraries and their documentation
    10. inline commenting to document source code
    11. use of test cases to detect logical or semantical errors
  • How to Create Progressive Web Apps
  • Using API's and JSON
Keyboard Shortcuts
  • Demo in class: Ctrl + A, Ctrl + C, Ctrl + V
  • Watch videos 1-5. Take notes about the key points in the videos. These concepts will be quizzed on.
  • How the Internet Works.
  • In class intro to HTML 5, valid documents, and HTML elements.

    Useful HTML Resources
  • Intro to HTML 5 Tutorials at w3Schools.
  • Valid HTML5 document (Explanation)
  • HTML Validator
  • HTML Reference
  • All of this material will be assessed by periodic quizzes.
    Use the links provided to research and learn the following HTML elements. Then for each one not already in index.html , add an example of its correct usage. Knowledge of these elements will be assessed through periodic quizzes.
    Part 1
    1. Read -> the W3 Schools Lists Tutorial.
    2. Add -> an Ordered List and an Unordered List to your index.html.
    3. Validate your code
    Part 2
    1. Read -> the W3 Schools Images Tutorial.
    2. Add -> these two images to your website:,
    3. Validate your code
    Part 3
    1. Read -> the W3 Schools Links Tutorial.
    2. Add -> a link to to your index.html. Test that the link works.
    3. Read -> Create an anchor link at the bottom of the page that says "Back to Top" and jumps back to the top of the page.
    4. Add -> a "back to top" link to the bottom of your index.html. Test that the link works.
    5. Validate your code

    Now move on to the next exercise: Audio, Video and CSS

    : In Class Lesson on how to use an external CSS file and how to apply basic properties to html elements.

    Useful CSS Resources
  • w3Schools Intro to CSS
  • CSS Validator
  • CSS Reference
  • All of this material will be assessed by periodic quizzes.
    In class lesson inline vs block, div, span, border, margin, padding

    Useful Resources
  • CSS Box Model
  • Inline vs Block Elements
  • CSS Element Relationships.
  • Audio
    1. Watch: the Audio tag.
    2. Download a song from Youtube Audio Library
    3. Insert the song into your webpage and SAVE IT IN YOUR HTML FOLDER.
    4. w3 Schools Reference Audio Tag
    5. Validate your code
    1. Watch: the Video tag.
    2. Download this video of the earth from Nasa Earth Video
    3. Insert the video into your webpage.
    4. w3 Schools Reference Video Tag
    5. Validate your code
    Basic CSS
    1. Watch: the basic CSS.
    2. Add some CSS to your webpage.
    3. w3 Schools Reference Intro to CSS
    4. Validate your code
    In Class Lesson
    1. color names
    2. color values: Hex, RGB, HSL
    3. alpha channels
    4. modifying colours
    Useful Resources
    In Class Lesson
    1. classes
    2. ids
    3. pseudo classes
    4. more specific selectors
    Useful Resources
    1. Complete this website as shown
    2. Validate the HTML and the CSS
    3. Note: Update the CSS for the classes button, row, and hero as shown below to get the website to work on a screen wider than 1200px.
                   .row {
                      margin: auto;
                   .button {
                      margin-top: 30px;
                      width: 100%;
                      text-align: center;
                   .hero {
                      position: absolute;
                      margin-left: 0px;
                      margin-top: 0px;
    4. Evaluation: 10/10 if complete correctly and validates, 8/10 if any mistakes, 6/10 if you tried.