Course Schedule

Intro to Web Design for the OAT Program

 

OAT 40 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
  • Lab 3: When it Rains in Vancouver Page 14 – Submit

Day One:

Tues, Jun 28

 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
  • Lab 6: Backgrounds Page 37 – Submit

Day Two:

Wed, Jun 29

 

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
  • Lab 8: Nav Bar Page 54 –  Submit

Day Three:

Thurs, Jun 30

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
  • Lab 10: Flexboxes Page 68 – Submit
  • Lab 11: Contact Page Page 75 – Submit

Day Four:

Tues, Jul 05

In-class Projects: Santorini Project and HTML/CSS Group Project. Both are Required.

  • Code a two-page website using HTML and CSS
  • 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:

Wed, Jul 06

 First Look at WordPress 

  • What is a Content Management System?
  • Setup Local environment and create your first WordPress site
  • Explore admin panel and set up your profile
  • Review default theme and popular blog themes
  • Install plug-ins, create posts and pages
  • Build Sugar High Desert Blog
  • Lab 13 – Vancouver Blog Page 141 – Submit 

Day Six:

Thurs, Jul 07

 Building Sites with WordPress – Premium Themes

  • Review Day Six – First Look at WordPress
  • Build a small business site with a DFY theme – Hestia
  • Explore pre-built blocks and advanced customization
  • Add some CSS to further customize a site
  • Add a variety of content and configure widgets, menus, and social icons
  • Outstanding Projects

Day Seven:

Tues, Jul 12

Building Sites with WordPress – Page Builders

  • Review Day Seven – Using Premium Theme Page Builders
  • What is a page builder and advantages to using one
  • Use Divi page builder to create site for Amazon Eco Lodge
  • Create and use Global colors and font styles
  • Explore and use a number of widgets (blocks) to build a site
  • Use one of the themes covered in class to create your final website project
  • In-class labs / outstanding projects

Day Eight:

Wed, Jul 13

WordPress – Final Topics and Project Time

  • Explore how to get a domain name and 3rd party hosting
  • Other web design tools – Wix, etc.
  • Add necessary plugins and discuss maintenance –  protect and backup your WordPress site
  • Extra topics – TBD
  • Supervised lab time to work on incomplete  projects
  • WordPress Website Project 

Day Nine:

Thurs, Jul 14

Contact Instructor

Debra Williams:   dwilliams12@bcit.ca