Archive+2009+-+2010

Monday, January 10, 2011
Work time on web sites. Final sites due Wednesday.

Thursday, January 6, 2011
Final Sites due Wednesday

Check rollovers

Practice site from scratch for final exam

Tuesday, January 4, 2011
Communicate with server via FTP.

Wrap up site.

Monday, December 20, 2010
Set up server through Dreamweaver

Thursday, December 16, 2010
FTP: communicating with a server

Why the root folder is critical Why your home page should be named index.html Why index.html can't be in the pages folder

Tuesday, December 14, 2010
Website work time

Check in on rollover status

Friday, December 10, 2010
Rollovers in Dreamweaver

Work time on web site

Wednesday, December 8, 2010
What implications does WikiLeaks have on web design?

Post your research links and summaries here. Read and respond to other student posts with comments and links to back them up.

Monday, December 6, 2010
Continue work on websites.

Review templates.

Thursday, December 2, 2010
Work time for web sites.

Individual meetings

Tuesday, November 30, 2010

 * Creating a web gallery** with Photoshop
 * Create a new folder
 * Save 4-6 images in the folder
 * In Photoshop
 * File - Automate - Web Gallery
 * Choose options


 * Continue** work on web site

Tuesday, November 23, 2010
Quiz: Set up new site in Dreamweaver. Create two pages (not from templates) Layout via div tags Navigation between pages Navigation to other sites on internet Images Image Links CSS formatting

Show me what you know by the end of class. Justify your grade in your daily journal.

Continue work on existing site if you finish early.

Friday, November 19, 2010
Debate: what is the best image format for optimization?

Develop rules for each format: Use this link to update your original tables.

Continue work on web sites.

Wednesday, November 17, 2010
Photoshop - Save for Web


 * Image optimization**
 * in pairs
 * what does it mean?
 * why is it important?
 * image formats
 * what are they?
 * strengths?
 * weaknesses?
 * Use this link to record your findings:
 * explore save for web dialogue box in Photoshop
 * work with sample images
 * develop basic rules
 * what should be used and when?

Monday, November 15, 2010
Exploring templates in Dreamweaver

Why? How?

Wednesday, November 10, 2010
Basic operations Insert Image Linking

Finalize new site plan

Monday, November 8, 2010
Introduce Dreamweaver

Toolbar Property Inspector Panels

Define Site

Layout with AP Divs

Develop new site plan: commit to your next project (continue or start anew). Record this on your daily journal. ===

===

Thursday, November 4, 2010
As you complete your basic site:
 * design rubric as a group
 * what were the expectations?
 * what did you learn?
 * did you push yourself as a learner?
 * meet expectations?
 * exceed expectations?
 * partially meet expectations?


 * Assessment:**
 * __**RUBRIC**__: Expectations || Exceeds (4) || Meets (3.5) || Partially Meets (3) || Limited (2) || Missing (0) || Comments ||
 * Four pages (Minimum) x2 ||  ||   ||   ||   ||   ||   ||
 * Navigation: functional, intuitive, attractive x3 ||  ||   ||   ||   ||   ||   ||
 * Consistent theme x1 ||  ||   ||   ||   ||   ||   ||
 * Images compressed (balance of size and quality) x2 ||  ||   ||   ||   ||   ||   ||
 * Layout and style via CSS x5 ||  ||   ||   ||   ||   ||   ||
 * HTML - correct syntax, no formatting x4 ||  ||   ||   ||   ||   ||   ||
 * Div tags to separate page sections x2 ||  ||   ||   ||   ||   ||   ||
 * Appealing design (e.g. color scheme) x2 ||  ||   ||   ||   ||   ||   ||
 * Root folder organized x1 ||  ||   ||   ||   ||   ||   ||
 * Self-Evaluation: you must justify your decisions x2 ||  ||   ||   ||   ||   ||   ||
 * Comment on other student projects (3 comments meets standard) x1 ||  ||   ||   ||   ||   ||   ||
 * ||  ||   ||   || Total Points || /100 ||   ||

Planning next website -topic -purpose -design -usability -requirements

What should be required? ===

===

Tuesday, November 2, 2010
Quarter self-evaluation

Finalize the basic site (due next class)

===

===

Friday, October 29, 2010
Three classes (including this one) until basic web site projects due.

Don't forget your daily journal entry. ===

===

Wednesday, October 27, 2010
CSS Reference from W3 Schools

Don't forget csszengarden.com

From last class:


 * 1) Create a Google Doc
 * 2) Name it: Web Design daily journal - your name
 * 3) share with cwalkerspencer@gmail.com
 * 4) allow me to edit
 * 5) type the date and briefly record what you accomplished last class

Monday, October 25, 2010
Set due dates for basic site layout with navigation.

Site due Thursday, November 4.

Thursday, October 21, 2010
Continue work on basic web site. Use CSS and div tags to format site.

Use each other as resources while I am out.

Don't forget about your online options. i.e. w3schools.com

Tuesday, October 19, 2010
Review Save for Web in Photoshop

Explore Navigation via CSS: Learning Resources

Continue formatting pages with CSS and tags

Friday, October 15, 2010
Susan Howland, CEO at Wayfarer, is representing the downtown business group in a search to find a student to help with some website work. I gave her your name as someone who might know students who would be capable of doing this.

If you get a chance, could you contact her at: showland@wayfarermarine.com or 236-4378
 * Format** pages with CSS and tags

Thursday, October 7, 2010
Add tags to the HTML in your web pages for layout.

Use CSS to layout your pages.

Tuesday, October 5, 2010
Continue formatting web site with CSS

Begin with the background formatting

Layout your test sites using the tag and css positioning and margins

Friday, October 1, 2010
Since we are not working in Dreamweaver yet, store all of your pages in a folder that includes your images folder.

Create each page and ensure the navigation works between all pages.

We'll look at some basic CSS and start incorporating it into our pages

Wednesday, September 29, 2010
A brief look at hexadecimal values for color.

Using your site plan, write the HTML for your home page (index.html)

Remember, we will use CSS (Cascading Style Sheets) to format the style and layout of your page.
 * Use tags to separate the different sections of your page
 * Use Heading tags to indicate relative importance of your headings
 * a search engine will see as most important, and as the least important

Monday, September 27, 2010
Create a basic HTML web page with:
 * Open Note quiz**: **no copy/paste though**


 * a heading
 * paragraph text
 * an image
 * a link
 * an image link
 * a table with 3 rows and 2 columns
 * table border of at least one pixel
 * make the top row of your table a header row
 * centered cell contents
 * increased cell padding
 * email link
 * text field form
 * password field form

Take the W3 Schools HTML quiz once more and chart your results

CSS exploration: www.csszengarden.com

Thursday, September 23, 2010
Create a basic HTML web page with:
 * Quiz time!**


 * a heading
 * paragraph text
 * an image
 * a link
 * a table with 3 rows and 2 columns
 * Bonus: make it an image link
 * Bonus: make the top row of your table a header row
 * Bonus: centered cell contents
 * Bonus: increased cell padding
 * Bonus: email link


 * Add** to our HTML knowledge base:


 * HTML Forms**
 * form tag
 * input element
 * text fields
 * password fields
 * radio buttons
 * check boxes
 * submit button
 * and more


 * Wrap up** basic site plan: determine due date.

Tuesday, September 21, 2010
Create a basic HTML web page with:
 * Retake Quiz: if necessary**


 * a heading
 * paragraph text
 * an image
 * a link


 * Work** on Basic Site Plan


 * Add** to our HTML knowledge base:

HTML Lists
 * Ordered
 * Unordered
 * Definition
 * Variations on ordered and unordered lists

Friday, September 17, 2010

 * HTML** knowledge feedback: take HTML quiz via w3schoolsHow did your score change?


 * Continue** work on basic HTML web site plan

Add to our HTML knowledge base: HTML tables


 * create a table
 * borders
 * headings
 * cell padding
 * cell spacing

Wednesday, September 15, 2010
Create a basic HTML web page with:
 * Quiz**


 * a heading
 * paragraph text
 * an image
 * a link

Add to our HTML knowledge base: HTML Links


 * link syntax: ////Link text//
 * target attribute
 * image link
 * mailto link

Continue work on basic site plan.

Monday, September 13, 2010
Continue work on basic site plan.

Create a basic HTML web page with:
 * Quiz**
 * a heading
 * paragraph text
 * an image
 * a link

Add to our HTML knowledge base: HTML Formatting HTML Styles

Add these to your sample web page.

Thursday, September 9, 2010

 * Prepare to present your findings to the class (html tag search)


 * Basic Site Plan - due**

Draw, sketch, print or post a plan detailing your basic personal website.


 * Minimum** requirements:

4 pages - each needs a sketch Show or describe the background Show or describe any images Brief written description for each page Pages must be named Navigation Clear theme for the site Sample or actual content describe your intended audience

Tuesday, September 7, 2010
Parent Letter due

Sign-up for wikispaces Join the chrhswebdesign wiki

Basic HTML page What else can we do to manipulate the page with HTML?

HTML Scavenger Hunt
 * Work with a partner
 * Go to W3 Schools website
 * Find at least three unique HTML tags that you find interesting enough to add them to your web page.
 * Incorporate them into your page
 * Find at least two other HTML resource sites
 * Incorporate HTML tags from each site into your page
 * Post your sites on the Learning Resources Page on this wiki
 * Prepare to present your findings to the class


 * Basic Site Plan - due**

Draw, sketch, print or post a plan detailing your basic personal website.


 * Minimum** requirements:

4 pages - each needs a sketch Show or describe the background Show or describe any images Brief written description for each page Pages must be named Navigation Clear theme for the site Sample or actual content describe your intended audience

Thursday, September 2, 2010
Parent Letters?

Student Information Surveys

[|HTML Quiz]


 * Sweet Site Design**


 * Choose a partner and find three examples of really well designed (school appropriate) web sites.
 * Post links and explain why you find them well done.
 * Respond to your classmates' posts and agree or disagree with them.
 * Respectfully justify your position.
 * Use this [|Google Doc link] to post.
 * Leave your name after each comment or link.

Friday, January 8, 2010

 * Finish designing the template page for the Alumni site.
 * Create other pages for the site from the template. (Year, Major, Military, etc)
 * Create pages for each alumnus (there are now 9+ responses on the Google doc form) [|Link to the form]
 * Add editable regions in the template so you can add information to the pages
 * Create links to individual pages from each of the category pages (i.e. links sorted by graduation year in the Year page)
 * Do help each other with this process. Everyone will learn more that way.

Wednesday, January 6, 2010
Review nesting div tags Centering layout with CSS - [|video tutorial] Finalize Template and create pages.

Monday, January 4, 2010
Simplified layout General to specific with AP Divs (i.e. Header, Footer, Content) Then nesting div tags

Tuesday, December 22, 2009
Finish designing your template page for the Alumni site. -View the [|Template creation and editing screencast part 1] to get started. Continued on [|Template editing and page creation - part 2]. Create other pages from your template. Prepare any images you will need (Photoshop: Slice tool: Save for Web: choose your settings)

Friday, December 18, 2009
Creating and saving a Template in Dreamweaver Formatting a Template with CSS Adding Editable Regions Creating a new page from a template

Wednesday, December 16, 2009
Create and Save a new document Set Page Title (not file name) Insert images - (can you find the other five ways?) Insert text & alignment (how does Dreamweaver handle this?) Links with images and text
 * Basic tools in Dreamweaver.**

How does dreamweaver handle this formatting?
 * Page Properties:**

[|Enter the Etherpad discussion:] Comment at least twice. Ask at least one question.

-external, internal, inline css

Monday, December 14, 2009
-Finish Ether pad discussion about pages that should be included in the Alumni site: [|CHRHS Alumni etherpad discussion]
 * Continue work on CHRHS Alumni site.**

-Update site design based on class discussion re: site pages

-Prepare any images you will need for the web in Photoshop. Remember to balance file size with image quality (large images under 50k, small images under 15k ideally)

Thursday, December 10, 2009
-copy Photoshop file to each group member's computer
 * Continue to refine** page design in small groups. -40 min

[|Join the Etherpad discussion] -slice tool: -save for web and devices: -image formats? Do they matter? -balance between file size and image quality -naming -finding the image in Dreamweaver
 * Preparing an image for the web in Photoshop:**

Tuesday, December 8, 2009

 * Review survey** and then send survey to Mr. Lammert

What is a Tracing Image? Why use it for layout in Dreamweaver?
 * Finalize Photoshop** page-design in small groups.

Load Tracing Image in Dreamweaver.

Friday, December 4, 2009
Brainstorm list of to-do items for Alumni project. 1. Define Tasks 2. Assign tasks to groups/class 3. Establish due dates

Wednesday, December 2, 2009
Brainstorm Questions for Alumni Survey Create Form on Google Docs Continue Site Design in Small Groups

Monday, November 30, 2009
Complete and review layout designs. Post online.

Monday, November 23, 2009
Finish and share page design options by posting them on wikispaces as described below.

Create a duplicate image: Image: Duplicate: name your copied image Reduce the image size in Photoshop: Image: Image Size (set the width to 400px). Use the Save for Web and Devices option in Photoshop to save your layouts. Post them on the CHRHS Alumni page.

If you have time, explore layout options in Dreamweaver.

CSS AP divs

Thursday, November 19, 2009
Organize into small groups to work on layout and design options.

Design of home page and a profile page due November 23rd.

Tuesday, November 17, 2009
Check on dimensions and positioning with CSS assignments


 * Introduce Dreamweaver**

Encourage student inquiry as they share and discuss what they want to know about Dreamweaver Setup the CHRHS Alumni site within Dreamweaver
 * Goals**: Activate students' prior knowledge by discussing what they already know about Dreamweaver

Insert Bar Document Window Document Toolbar Property Inspector Panels
 * Interface**

What do you want to know about Dreamweaver?
 * In pairs**...what do you already know about Dreamweaver?

Why use Dreamweaver?

Managing Your Site Define a Root Folder Subfolders...why?
 * Setup**

Friday, November 13, 2009
Review [|id vs class] selectors

Explore [|defining dimensions with CSS] Explore [|defining positioning with CSS]

Friday, November 6, 2009
CSS - font and box model element sizing due.

Wednesday, November 4, 2009
CSS - font CSS - box model

Monday, November 2, 2009
continue work on CSS - text

Thursday, October 29, 2009

 * QUARTER TEST REQUIREMENTS:**

Page displays properly in a browser Page displays properly in a browser Code formatted for easy reading XHMTL valid code Code formatted for easy reading
 * Single web page:**
 * Limited:**
 * Expected:**
 * Exceeds expectations:**

CSS formats content, Parts of your CSS are unused, CSS styles not formatted for easy reading CSS formats content, Parts of your CSS are unused, CSS styles __are__ formatted for easy reading CSS formats content, __all__ parts of your CSS are used, CSS styles formatted for easy reading
 * Web page formatted with CSS (external, internal, or inline)**
 * Limited:**
 * Expected:**
 * Exceeds expectations:**

-What have you learned? How do you know? -What do you still need/want to learn? -What grade have you earned for the first quarter? Why? Submit your test:
 * Content:**
 * -Self-Assessment and Reflection**

-Write your content exclusively in limerick and/or haiku form -Name __either__ the type of ATV I had when I was in high school or the name of my first dog.
 * Extra Credit:**

-**Show me** your final product in class, then...

-**Email to** chris_walker-spencer@fivetowns.net

Tuesday, October 27, 2009
Finalize CSS background formatting Demonstrate [|formatting text with CSS]

Friday, October 23, 2009
CSS background formatting: large group

Wednesday, October 21, 2009
Post your site design on the site design forum page. A number are still missing. Remove formatting from your existing web site. Focus on establishing an external css style sheet and formatting the background of your pages.

Monday, October 19, 2009
Post your site design on the site design forum page. Introduction to [|CSS] Create an [|external css style sheet] and link it to your index page. Start by focusing on the [|background] of your web page.

Thursday, October 15, 2009
Finalize your plan on the site design forum page that shows how you will format pages in your site. You may sketch by hand, use Photoshop or use some other program to convey your design ideas to me. The site design is due today. I will also check one last time for XHTML page validation.

Tuesday, October 13, 2009
Continued from October 7: Finish validating your XHTML using the [|validator at w3c schools]

Once your HTML is validated XHTML, check out this [|CSS example] and think about how you will format your site so it is readable, user friendly and attractive.

Submit a plan on the site design forum page that shows how you will format pages in your site. You may sketch by hand, use Photoshop or use some other program to convey your design ideas to me. The site design is due Thursday, October 15.

Wednesday, October 7, 2009
Continued from October 5: Finish validating your XHTML using the [|validator at w3c schools]

Once your HTML is validated XHTML, check out this [|CSS example] and think about how you will format your site so it is readable, user friendly and attractive.

Submit a plan on the site design forum page that shows how you will format pages in your site. You may sketch by hand, use Photoshop or use some other program to convey your design ideas to me. The site design is due Thursday, October 15.

Create and Save a new document Set Page Title (not file name) Insert images - (can you find the other five ways?) Insert text & alignment (how does Dreamweaver handle this?) Links with images and text
 * Basic tools in Dreamweaver.**

How does dreamweaver handle this formatting?
 * Page Properties:**

[|Enter the Etherpad discussion:] Comment at least twice. Ask at least one question.

-external, internal, inline css

Monday, October 5, 2009
Validate your XHTML using the [|validator at w3c schools]

We begin our study of CSS. Once your HTML is validated XHTML, check out this [|CSS example] and think about how you will format your site so it is readable, user friendly and attractive.

Thursday, October 1, 2009
Share [|XHTML] findings and discuss implications

Present [|HTML forms] and add to basic web sites

Basic Site requirements ( new requirements in red ) Site plan Pages created (5 min) Navigation (to each page, from each page) Images (min one per page) Headings (for Google searchability, not formatting) External Links (min - 4) Image Links (min - 4) [|click to see how] Table (on at least three of your pages) Unordered List Ordered List Definition List Content Forms: (one submit button required) Choose at least three of the following: -Text Field -Radio Buttons -Checkboxes -Drop down box -Text Area

Tuesday, September 29, 2009
-Finalize and share basic web sites. -Retake [|HTML quiz]. What have you learned? Compare to initial quiz results.

-XHTML search. XHTML is the new standard. Find and post interesting and unique facts about XHTML on the discussion tab of the XHTML Forum. Only post information if no one else has posted it. Some questions you might answer include: When did XHTML originate? Why is it being used? How can you recognize if a web page uses XHTML?

These are just example questions. What other questions do you have?

Read other student posts and comment or ask questions if necessary.

Check your HTML to be sure it conforms to the XHTML standards.

Friday, September 25, 2009
-We'll add one last component to our HTML tool boxes:

-Unordered -Ordered -Definition -How To: [|W3C School List Tutorial] Site plan Pages created (5 min) Navigation (to each page, from each page) Images (min one per page) Headings (for Google searchability, not formatting) External Links (min - 4) Image Links (min - 4) [|click to see how] Table (on at least three of your pages) Unordered List Ordered List Definition List Content
 * Lists**
 * Your site should now include:**


 * HW**: Only if you don't finish in class.

**Wednesday, September 23, 2009**
We will learn about creating tables in HTML.

I will check your basic sites at the beginning of class. While I am checking in with individuals, complete some research about tables:

First, how are tables used in websites? Why are they useful? Turn to the person next to you and discuss the two previous questions.

Second, go online and find at least two examples of creative uses of tables. Find a different partner and share your findings.

Next, W3 Schools has a useful [|summary and guide]. Review that web page to see how to add a table to your site.


 * By the beginning of class on Friday, September 25** your basic site should include the following:

Site plan Pages created Navigation Images Headings External Links (min - 4) Image Links (min - 4) [|click to see how] Table (on at least three of your pages) Content


 * Homework**: Finish any parts of your basic site (required components above)

Day 5

 * Website Basics**

Create a site with the following:

Root folder Images folder Three pages minimum Navigation between all pages Images External links (image and text) Link to file (.pdf) Link to image (i.e. .jpg)

**Day 3**

 * Basic Site Plan - due**

Draw, sketch, print or post a plan detailing your basic personal website.


 * Minimum** requirements:

4 pages - each needs a sketch Show or describe the background Show or describe any images Brief written description for each page Pages must be named Navigation Clear theme for the site Sample or actual content describe your intended audience

Day 1

 * Sweet Site Design**

Find three examples of really well designed (school appropriate) web site. Post links and explain why you find them so interesting. Respond to your classmates' posts and agree or disagree with them. Respectfully justify your position.


 * __**RUBRIC**__ ||  || Exceptional (4) || Beyond (3) || Expected (2) || Needs Improvement (1) || Points || Comment(s) ||
 * 4 pages x5 ||  ||   ||   ||   ||   ||
 * Navigation x5 ||  ||   ||   ||   ||   ||
 * 4 images x3 ||  ||   ||   ||   ||   ||
 * Readability (font, color, size) x3 ||  ||   ||   ||   ||   ||
 * Clear theme x3 ||  ||   ||   ||   ||   ||
 * Links (2 image, 4 external) x3 ||  ||   ||   ||   ||   ||
 * Uploaded to server x1 ||  ||   ||   ||   ||   ||
 * Self-Evaluation x1 ||  ||   ||   ||   ||   ||
 * Comment on other student projects x1 ||  ||   ||   ||   ||   ||
 * ||  ||   || Total Points || /100 ||   ||


 * New site plan**

Describe and sketch how you will incorporate rollover navigation, disjointed rollovers, iFrame(s) into your new or existing site.


 * Rollover Site - due**

Add on to your existing site or create a new site -Each page needs rollover navigation -At least one use of disjointed rollovers (minimum three thumbnails that expand into larger versions) -Include at least one iFrame -Centered layout with ApDiv and CSS


 * __**RUBRIC**__ ||  || Exceptional (4) || Expected (3) || Limited (2) || Poor (1) || Points || Comment(s) ||
 * 4 pages x2 ||  ||   ||   ||   ||   ||
 * Rollover Navigation x3 ||  ||   ||   ||   ||   ||
 * Disjointed Rollovers x4 ||  ||   ||   ||   ||   ||
 * Readability (font, color, size) x2 ||  ||   ||   ||   ||   ||
 * Clear theme x2 ||  ||   ||   ||   ||   ||
 * Layout (site is intuitive to use) x2 ||  ||   ||   ||   ||   ||
 * iFrame x4 ||  ||   ||   ||   ||   ||
 * Centered layout (describe how) x3 ||  ||   ||   ||   ||   ||
 * Uploaded to server x1 ||  ||   ||   ||   ||   ||
 * Self-Evaluation x1 ||  ||   ||   ||   ||   ||
 * Comment on other student projects x1 ||  ||   ||   ||   ||   ||
 * ||  ||   || Total Points || /100 ||   ||


 * Template Site Planning - Storyboard**

Design each page of your new site. Use templates where they would prove useful. Post your designs on the storyboard page.

due
 * Template site rough draft**


 * || __**RUBRIC**__ ||  || Exceptional (4) || Expected (3) || Limited (2) || Poor (1) || Points || Comment(s) ||
 * Rollover Navigation x3 ||  ||   ||   ||   ||   ||
 * Disjointed Rollovers x3 ||  ||   ||   ||   ||   ||
 * Template used for multiple pages x4 ||  ||   ||   ||   ||   ||
 * Readability (font, color, size) x2 ||  ||   ||   ||   ||   ||
 * Clear theme x2 ||  ||   ||   ||   ||   ||
 * Layout (site is intuitive to use) x2 ||  ||   ||   ||   ||   ||
 * iFrame x3 ||  ||   ||   ||   ||   ||
 * Centered layout x3 ||  ||   ||   ||   ||   ||
 * Uploaded to server x1 ||  ||   ||   ||   ||   ||
 * Self-Evaluation x1 ||  ||   ||   ||   ||   ||
 * Comment on other student projects x1 ||  ||   ||   ||   ||   ||
 * ||  ||   || Total Points || /100 ||   ||
 * ||  ||   || Total Points || /100 ||   ||

due
 * Template site final uploaded to server**


 * Exam Review** - due end of class

1. Create a new site 2. Write directions / Take screen shots / record video from screen to create a tutorial for using the portion of Dreamweaver you selected below. 3. Create a new page on wikispaces and post your information to share with others. 4. Update your site with content from others.
 * Set up new site ||  ||   ||   ||
 * File Management (compression and organization) ||  ||
 * Rollover Navigation ||  ||   ||
 * Disjointed Rollovers ||  ||   ||
 * Template used for multiple pages ||  ||   ||
 * Readability (font, color, size) ||  ||   ||
 * Layout (usability) ||  ||   ||
 * iFrame ||  ||   ||
 * Centered layout ||  ||   ||
 * Uploaded to server ||  ||   ||


 * Final Exam:**

Create a site with the following:


 * || Set up new site ||
 * File Management (compression and organization) ||
 * Rollover Navigation ||
 * Disjointed Rollovers ||
 * Template used for multiple pages ||
 * Readability (font, color, size) ||
 * Layout (usability) ||
 * iFrame ||
 * Centered layout ||
 * Uploaded to server ||

Due at the beginning of your exam period.