Home

Web Authoring 1
All video content created by Daniel Ouellette

HOW YOU MUST SUBMIT ASSIGNMENTS


ZIP UP THE ROOT FOLDER & UPLOAD TO CANVAS.

 

Suggested Software for Text Editing:
Mac :
Text Edit
PC:
NotePad++

Classes

1a. Orientation Week


2a. HTML Basics - Using a Text Editor -  Coding assignment    Download assets   5%

Info pages on basic HTML tags -  page 1  page 2   page 3  


3a. HTML Applied - Using a Text Editor - spec sheet check list    Video Instructions    Download assets      5%

Info pages on new HTML tags (refer to last weeks info pages if needed) -  Example of ID link code   Tables 


What is a SELECTOR?

4a. Create HTML page with CSS  - Using a Text Editor -   Video Instructions    spec sheet instructions   Download assets   5%


Useful Resources

Full List of CSS Properties:  CSS Keyword Index

Awesome Colour Tool - Adobe Color Creator for Web

Starter Root Folderv you may use this to begin your assignments


5a. Create HTML Page with CSS - Using a Text Editor -    Video Instructions   instructions Page 1   instructions Page 2    Download assets   6%


6a. Layout using Absolute Position Div Tags - Using a Text Editor -   Video Instructions    Download assets     6%

6b. Layout using Div Tags & CSS - Using a Text Editor -  Video Instructions    spec sheet instructions   Download assets     6%


7a. Photoshop - Image formats and sizing   Format images  create web page   set background color code  Download assets      5%


Mid Break


8a. Review HTML & CSS - instructions    directory structure    Download assets    - 5%


9a. Mid term Assignment   20%    

       Link to assignment                                                                           

      Hand in zipped root folder to CANVAS before end of next class.
                Midterm link

In-Class Test Prep:

  1. Create a root folder with images folder and css folder nested.
  2. Create an external CSS file and save in CSS folder.
  3. Create HTML pages and save in root folder.
  4. Create CSS Tag styles, class styles and ID styles with properties set according to instructions
  5. Apply various styles as instructed
  6. Create HTML Headings, paragraphs, Lists, images and tables
  7. Create Hypertext links as well as images that behave as links.

make sure you are set to Design mode not Live mode.

10a. Setting Up a Site in Dreamweaver Watch First - Tutorial 

10b. Dreamweaver basic content assignment   checklist   Download assets     5%


11a. CSS in Dreamweaver  assignment   Download assets   6%

11b. CSS Layout in Dreamweaver   CSS Layout using DIV tags   create 3 distinct areas with borders using div tags and absolute positions.   6%


12b. Final Assignment    final assignment criteria   20%


13a. - Work on Final Assignment.


14a. - Final Assignment - DUE TODAY.


 

Optional Bonus Assignment

B01. Layer based Slices in PhotoShop   tutorial    assignment   Download assets     5%


©2025 Daniel Ouellette                  

Contact Dan:
douellette@loyalistcollege.com

Check Your Grade
All Marks on CANVAS

Loyalist Animation
winner - Canadian New Media Awards
"Educator of the Year"

"Educator of the Year"
produced by DJO Studios

My musical alter-ego
©2023 DJO Studios