mdinfotech.net  



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

Topics to be Covered

  • HTML
  • CSS
  • Principles of Web Design
  • Programming Concepts in Javascript:
  • How the Internet Works: Host/Client Relationship, Protocols, TCP/IP
  • How to Create Progressive Web Apps
  • Using API's and JSON
Lesson accompanied by exercises on Google Classroom:
  1. Files and folder Management
  2. Test Your Typing Skills
  3. Windows Shortcuts
We will try and watch one of these each day.
  • How the Internet Works.
  • In class intro to HTML 5, valid documents, and HTML elements.

    Lesson: What does HTML stand for? Basic syntax, some basic tags, and important resources

    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.
    In class we will create a simple complete valid HTML/CSS/JS template to use for all future assignments.
    Know the following HTML elements. 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.
    Ordered and Unordered Lists
    1. Read -> the W3 Schools Lists Tutorial.
    2. Add -> an Ordered List and an Unordered List to your index.html.
    3. Validate your code
    Anchors (Links)
    1. Read -> the W3 Schools Links Tutorial.
    2. Add -> a link to mountdouglas.ca 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
    Images and Filepaths
    1. Read -> the W3 Schools Filepaths Tutorial.
    2. Read -> the W3 Schools Images Tutorial.
    3. Create -> In the same folder where index.html is saved, create a new folder called "images".
    4. Download an image from Pexels.com and save it in your new images folder
    5. Add -> using a relative path, add the image you saved to your index.html. Test that the image works by viewing your page in a browser.
    6. Validate your code
    Audio
    1. Watch: the Audio tag.
    2. Download this song Busy City.mp3
    3. Insert the song into your webpage and SAVE IT IN YOUR HTML FOLDER.
    4. w3 Schools Reference Audio Tag
    5. Validate your code
    Video
    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
    : In Class Lesson: What does CSS stand for? 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.

    CSS Properties to know:
    border, margin, padding, border-radius, background-color, color, font-family, font-size, font-style, font-variant, text-decoration, text-decoration-color, text-align, text-shadow
    In Class Lesson
    1. color names
    2. color values: Hex, RGB, HSL
    3. alpha channels
    4. modifying colours
    Useful Resources
    In class lesson inline vs block, div, span, border, margin, padding

    Useful Resources
  • CSS Box Model
  • Inline vs Block Elements
  • CSS Element Relationships.
  • In Class Lesson
    1. classes
    2. ids
    3. pseudo classes
    4. more specific selectors
    Useful Resources
    Image Formats
    1. Watch Video: Image File Formats.
    2. Watch Transparency.
    3. More on Image file type and format guide
    How to put images in a website:
    1. The img tag
    2. The Background Image Property
    3. Read about Responsive Images

    Free Images Resources: MDInfoTech Graphics Resources

    PhotoPea - free online image editor

    How to create Web Friendly Image from a high resolution photo.
    1. use a high quality image
    2. minimize byte size
    3. crop it, before downsizing
    4. make it the actual size it will appear in the webpage
    5. use jpg for images (85%), png for graphics with transparency, gif for animation

    SVG is a language that uses XML format to define vector-based graphics for the Web. Every element of SVG can be animated. SVG can be written directly into the HTML document or created with a vector drawing program like Inkscape.

    1. Watch Vector Graphics Explained.
    2. Watch and code along with SVG for Newbs Part 1
    3. Watch and code along with SVG for Newbs Part 2
    4. Your Assignment: Create an original piece of 'artwork' by coding basic SVG shapes. It will be marked for completion marks, but bonus marks will be granted for extra creativity and artistic ability.
    Resources:
    1. w3 Schools SVG Tutorials
    2. Inkscape Tutorials
    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;
                      max-width:100%;
                   }
                   
                   .button {
                      margin-top: 30px;
                      width: 100%;
                      text-align: center;
                   }
                   .hero {
                      position: absolute;
                      width:100%;
                      height:10px;
                      margin-left: 0px;
                      margin-top: 0px;
                  }
                   
    4. Evaluation: 10/10 if completed correctly and validates, 8/10 if any mistakes, 6/10 if you tried.