Class 7 – Mar 13

Posted on March 12, 2015 by Prof Dillon

Today we will cover:

  • CSS Box model continued
    Learning in detail how to position elements on a page within a two-color layout
  • Images
  • Navigation

Last class we covered

  • Parts of a Box element: Border, Margin, Padding, Content, Width and Height
  • Float property (moves an element as far as possible to the left or right)
  • the <div> elements needed for the structure
Components of a Box Element

Components of a Box Element

  • Illustration of ID's needed for 2 column layout in an HTML document

Illustration of ID’s needed for 2 column layout in an HTML document

Structure for HTML document using elements and ID's

Finalized Designs are to be presented on March 27 

March 20 – Quiz 1 (10%)
May 1 – Quiz 2 (10%)

Reference resources

  1. W3Schools
  2. Codes Academy
  3. Citytech Learning Center AG18

Assignment

  • Create all secondary pages for navigation
  • Add links to navigation to all pages (e.g.  resume.html, contact.html, etc.)
  • Upload all pages to your domain
  • Based on your design for your portfolio website, create the HTML document with the ID’s needed
    No images, use background-color. Please refer to 2 column demo.
  • Next class QUIZ 1 (10%)
Posted in Uncategorized | Tagged , , | Leave a comment

Example of Site Design

Posted on March 10, 2015 by Prof Dillon

In review, this is an example of a design of a web page (it should look like what your planned end result is).

Example of a Layout/Design of a Webpage

Example of a Layout/Design of a Webpage

These are a few examples of students works

Here are a few great Reference Sites

Posted in Uncategorized | Leave a comment

Class 6 – Mar 6

Posted on March 6, 2015 by Prof Dillon

Today we will cover:

  • CSS Box model
  • Images
  • 960 grid system (re-cap)

Reference resources

  1. W3Schools
  2. Codes Academy
  3. Citytech Learning Center AG18

Example of Navigation Demo

These are internal links. The html documents are located within the same document.

naviagation

HTML navigation

Assignment

  • Finalize the design / layout for homepage (layout-final.html)
  • Create wireframe for secondary page (wireframe-sub.html)
  • Design 1 layout for secondary page (secondary.html)
  • Add links to navigation to all pages
  • Upload the 3 html documents to your server
    • layout-final.html
    • wireframe-sub.html
    • secondary.html

Finalized Designs are to be presented March 20

March 20 – Quiz 1 (10%)
May 1 – Quiz 2 (10%)

Posted in Uncategorized | Leave a comment

Class 5 – Feb 27

Posted on February 27, 2015 by Prof Dillon

Today we will cover,

  • Directory Structure
  • Introduction to CSS
  • 960 grid system (960.gs)

Reference for HTML and CSS tutorials or tutors

  1. W3Schools
  2. Codes Academy
  3. Citytech Learning Center AG18

Assignment

  • Build 2 different design layouts of a homepage (layout1.html and layout2.html)
  • Add links to navigation
  • Upload the 2 html documents to your server
    • layout1.html
    • layout2.html

 

Posted in Uncategorized | Leave a comment

Required for Portfolio Website

Posted on February 24, 2015 by Prof Dillon
  • Final project must have a minimum of 5 sections
  • Your first name and last name should be visible throughout the site
  • Site identifier (logo) and navigation must remain consistent throughout the site
  • Navigation must remain consistent throughout the site
  • A coded resume
  • One be able to download a PDF of your resume
  • Contact page must have a functioning form as well as your contact email
Posted in Uncategorized | Leave a comment