Course Schedule

Intro to Web Design for the OAT Program

 

OAT 36 Course Schedule*

      (*subject to change)

First Look at HTML5

  • Why learn to code?
  • Review course and expectations
  • Open and set-up Brackets (text editor)
  • Naming conventions for web files and folders
  • Basic HTML elements and tags
  • Create simple HTML pages
  • Assignment #1: African Animals

Day One:

Tuesday, Aug 18

First Look at CSS3

  • Review basic HTML tags from Day One
  • Intro to CSS syntax and selectors
  • Style basic HTML elements with CSS
  • Define and style div containers and semantic containers
  • Position images using floats and background properties
  • Review the Box Model – padding, borders, and margins
  • Assignment #2: Panda Base

Day Two:

Thursday, Aug 20

 

HTML & CSS – Part I

  • Review HTML and CSS from Day Two
  • Search for and link to Google fonts 
  • Use image editing software to crop, resize and optimize 
  • Build tables with HTML and style with CSS
  • Code and style basic nav bars
  • Use CSS effects – border radius, opacity
  • Assignment #3: Visual Effects Lab 

Day Three:

Friday, Aug 21

HTML & CSS – Part II

  • Review HTML and CSS from Day Three
  • Use CSS Flexbox to build grids
  • Build a Contact page with a form and Google map
  • Add and style Call-To-Action buttons
  • Add interactivity with CSS transitions and transforms
  • Assignment #4: CSS Flexbox Lab
  • Santorini Project

Day Four:

Tuesday, Aug 25

In-class Project: Two-Page Website

  • Code a two-page website using HTML5 and CSS3
  • Build a nav bar with link to second page
  • Add one contact form with a submit button
  • Use  (min) one background image and CSS transition
  • Build a simple grid for a photo gallery
  • Project: Two-page Website
  • Santorini Project

Day Five:

Wednesday, Aug 26

First Look at WordPress 5.3

  • What is a Content Management System?
  • WordPress.org vs. WordPress.com
  • Setup Local environment and create your first WordPress site
  • Explore admin panel and set up your profile
  • Review default 2020 theme and popular blog themes
  • Install plug-ins, create posts and pages
  • Assignment #5 – Vancouver Blog 

Day Six:

Thursday, Aug 27

Building Sites with WordPress – Premium Themes

  • Review Day Six – First Look at WordPress
  • Establish goals and requirements for a small business site
  • Research and download appropriate themes and plug-ins
  • Add content, including image galleries, maps, and forms
  • Configure widgets, menus, and social icons
  • Use your CSS knowledge to further customize themes
  • Outstanding projects and assignments

Day Seven:

Mon, Aug 31

Building Sites with WordPress – Page Builders

  • Review Day Seven – Using Premium Themes
  • What is a page builder and advantages to using one
  • Use Elementor with the Hello theme to create an original site
  • Explore pre-built blocks and advanced features of Elementor
  • Use your CSS knowledge to further customize your site
  • Use Elementor to create your final website project
  • WordPress Website Project

Day Eight:

Tuesday, Sept 01

WordPress – Final Topics and Project Time

  • How to get a domain name and 3rd party hosting
  • Free options for a WordPress site
  • How to migrate and backup your WordPress site
  • Extra topics – TBD
  • Supervised lab time to work on incomplete  projects
  • WordPress Website Project 

Day Nine:

Wednesday, Sept 02

In-class Presentations

  • Supervised morning lab time to complete projects
  • Presentations start at 1:00 – you’ll present two sites (HTML and WordPress)
  • Presentations – Two Websites

Day Ten:

Thursday, Sept 03

Contact Instructor

Debra Williams:   dwilliams12@bcit.ca or use the form

9 + 12 =