Category Archives: WDS

WDS 07: Advanced CSS + Process 10/17/17

REVIEW:
Read: Chapter 3, 15, and 16.
Complete Code review for 3, 15, and 16
– Create a single page with the following:
– Try CSS opacity hover:
Opacity – roll over using JavaScript:
Try it using the CSS – hover property
– Try JavaScript opacity hover (copy the code)
– A list of any kind
– Any variation of the “display” property (none, inline, inline-block, etc.)
– Create a navigation menu from a list and the “display” property.

READING:
Ch. 15
They have semantic difference – a “div” element is designed to describe a container of data whereas a “p” element is designed to describe a paragraph of content. (Nesting: you can not nest anything in a “p” tag)
Best review
The power of “Z” and test code
Floaters
Float and Clear
Another explanation of the FLOAT
Example
Next Week: 2 column, and 3 column layout. Media queries – using multiple CSS

Ch. 16
Image Size
Alignment (Note: using Float)
Centering options
The float is key
Next Week: Image Rollovers and Sprites

INTRO TO PROCESS:
What process? Why do we need it?
The bad.
What?, just plain ugly
Still pretty bad
Wow!
Oh,Boy.
Oh my.
Are you kidding??
All kinds of “bad”

PROCESS + PROTOTYPING
REQUIREMENTS:
– Who is the site for, Why would people Visit this site, What are your visitors trying to achieve? What information do your visitors need?
DELIVERABLE: Requirements, Target Audience, Research/sketches

USABILITY (UIX):
DELIVERABLE: User Scenarios, Usability maps, Competitive Analysis

SITE STRUCTURE
Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames and HTML Prototype

PROTOTYPING:
HTML prototype

DESIGN:
Deliverables: Interface in JPG

OUTSTANDING ISSUES:
– Think ahead. What do you think will be challenges to development? Keep a list trhough project life cycle

DEVELOPMENT:
-Technical Production: Deliverables: Alpha Site
-QA: Testing. Deliverables: Bug List, Beta Site
-Launch: Deliverables: Final Site

Example Mid
A bit much

Studio 07: CSS and Process
Read: Chapter 12, 14, 17, and 18
Complete Code review for 12, 14, and 17.
Start Process Documentation:
– Start thinking about the site you want to build. Draft requirements.
– Who is the audience? Determine the target demographic.
– Based on Ch 18, start thinking about the kind of site you want to develop (Requirements). Answer questions on page 455.

WDS 06: MORE CSS 10/03/17

REVIEW:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
Create 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image and practice positioning and margins.
— 2. Use the “box model”
— 3. Use pseudo classes
— Did you implement “External CSS”? If not, Convert your pages to External CSS.
Show us!!

READING:
Review CSS priorities
Demo – Google > Developer Tools
Old Web Emulator

Ch. 11
Color names
Opacity
Opacity – roll over using JavaScript:
Try it using the CSS – hover property

Ch. 13
Make sure you are familiar with this.
And, you did all of these…
display /BlockInline

Studio 06: CSS Review
HTML/CSS:
Read: Chapter 3, 15, and 16.
Complete Code review for 3, 15, and 16
– Create a single page with the following:
– Try CSS opacity hover
– Try JavaScript opacity hover (copy the code)
– A list of any kind
– Any variation of the “display” property (none, inline, inline-block, etc.)
– Create a navigation menu from a list and the “display” property.

WDS 05: CSS 09/26/17

INTRO:
Read: 10.
Complete Code review for 10
HTML/CSS: Use the META tag to refresh and redirect

REVIEW:
Ch. 10.
CSS in Action!
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class
External CSS. Here is how
Class, ID and Grouping Book, pg. 238.
Cascading – Book, pg. 239.
CSS priorities

Studio 05: HTML/CSS:
Read: Chapter 11 and 13.
Complete Code review for 11 and 13
Create at 3 HTML/CSS interlinked pages, and complete the following on each page:
— 1. place background image and practice positioning and margins.
— 2. Use the “box model”
— 3. Use pseudo classes

WDS 04: Forms and Markup + CSS intro 09/19/17

INTRO:
Read: Chapter 7 and 8.
Complete Code review for 7 and 8
Following the Table Demo: Create a table with mounted image and put text on top of the images in HTML. Present in class
Tables: background attribute

REVIEW:
7. Forms – Practice formatting.
Code review for 7
Adding PHP and functionality.
Example
Download the code

8. Extra Markup
Code review for 8.
Review types of HTML
ID and Class, Declaration or “Doctypes”
Comments are useful.
Be very clear on Block and Inline elements
iframes are everywhere.
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Ch8, Summary

INTRO TO CSS:
CSS in Action!
CSS Intro
CSS parts

Studio 04: HTML + Intro to CSS
Read: 10.
Complete Code review for 10
HTML/CSS: Use the META tag to refresh and redirect

WDS 03: HTML – Semantics to Tables 09/12/17

INTRO:
Read Chapter 1,2
Code Work: Review 1, 2 – Practice (create several HTML files)
Try the W3 HTML Tutorial
Create a splash page for your web site (use anything you want) with an image and a link. Example?

Read: 4, 5, and 6.
HTML: Try out all the code samples: 4, and 5 and 6. I want to see tables in particular.

How to organize your HW

READING REVIEW:
Talk about Version Control
HTML is a hierarchy.
Attributes
HTML Summary
All the tags
HTML Summary 2
Good resource
Looking Ahead:
Links
– HTML link attributes
– Ch4 – Examples,
HTML is depends on file paths pg. 11
Path demo. Should end up at this LINK. You can also download the files
E-mail link magic
Images
Tables
– Tables: Basic
– Tables: Colspan, Rowspan
Table: Photoshop Demo
HTML and the background image
Tables: background attribute

Studio 03: HTML Tables
Read: Chapter 7 and 8.
Complete Code review for 7 and 8
Following the Table Demo: Create a table with mounted image and put text on top of the images in HTML

WDS 01: Introduction 08/29/17

Introduction:
Review Syllabus:

Book:
HTML and CSS: Design and Build Websites. John Wiley & Sons. 2011.
…and companion Site.

HW assignments – Example 1

Mid-term:
Mid
Mid
Mid
A bit much

Prototype v.01 and 02

Sample Work:
1- Sample Student Website
2 – Sample
3 – Sample
4 – Sample

WordPress
WP as a Final

Storage:
– USB Drive/ external Drive
– Pad or notebook + pen/pencil

Software:
Editors – BBEdit, TextWrangler
Brackets
My new favorite
FTP

Practice:
Real-time editor
W3
HTML Elements
HTML Attributes
– Setting up a development environment
– Testing code
– Version control
– Introduction to HTML

Studio 01: Set up and Intro to HTML
Read Chapter 1,2
Code Work: Review 1, 2 – Practice (create several HTML files)
Try the W3 HTML Tutorial
Create a splash page for your web site (use anything you want) with an image and a link. Example?
We will review next week

WDS 14: Final Presentation

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure process reflects the finished final project):

B. Homework Assignments.

Studio 01:
Create a splash page for your web site (use anything you want) with an image and a link. Example?

Studio 02: HTML and Process
HTML: Try out all the code samples: 4, and 5 and 6.

Studio 03:
Read: Chapter 7 and 8.
Complete Code review for 7 and 8

Studio 04:
Mount an image in a table. Put text in certain table cells.

Studio 05:
– Try Meta tag, refresh and redirect
– Create at least 3 HTML pages, using CSS to complete the following on each page:
– 1. place background image,
– 2. Use the “box model”
– 3. Use pseudo classes

Studio 06:
– Try External CSS
– Try CSS opacity hover

Studio 07:
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize! (Show next Week)

Studio 08:
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)

Studio 09:
– Import and display fonts
– Try an image Roll-over (javascript or CSS)
– HTML5 Code (make sure you have tried it)
– Try a Favicon
– RWD tutorial

Studio 10:
Try the JS redirect

C. WordPress site. Installed and customized

D. Final Site (URL)

E. SCREEN SHOT OF YOUR FINAL SITE

WDS 12: Work on Final Deliverables 04/14/17

INTRO:
Work on your Final
– Intro to frameworks
Fluid Template
Responsive Designs

PHP INCLUDES:
Saves work
Makes coding easier
Best Practices

JAVASRIPT
Tutorial

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure process reflects the finished final project):

B. Homework Assignments.

Studio 01:
Create a splash page for your web site (use anything you want) with an image and a link. Example?

Studio 02: HTML and Process
HTML: Try out all the code samples: 4, and 5 and 6.

Studio 03:
Read: Chapter 7 and 8.
Complete Code review for 7 and 8

Studio 04:
Mount an image in a table. Put text in certain table cells.

Studio 05:
– Try Meta tag, refresh and redirect
– Create at least 3 HTML pages, using CSS to complete the following on each page:
– 1. place background image,
– 2. Use the “box model”
– 3. Use pseudo classes

Studio 06:
– Try External CSS
– Try CSS opacity hover

Studio 07:
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize! (Show next Week)

Studio 08:
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)

Studio 09:
– Import and display fonts
– Try an image Roll-over (javascript or CSS)
– HTML5 Code (make sure you have tried it)
– Try a Favicon
– RWD tutorial

Studio 10:
Try the JS redirect

C. WordPress site. Installed and customized

D. Final Site (URL)

ASSIGNMENT:
Work on your final Deliverables

WDS 11: WP & CSS 04/07/17

INTRO:
Try the JS redirect. Show next week. Example (try in mobile)
Read Chapter 19
– Make sure WordPress is installed and working on your server
– Explore WP. Change the theme, customize, post, play

READING:
– Some helpful SEO resources
– More on Google Analytics

To Swipe?
– WordPress does it for you
– More mobile me
jquery picks
ready to slide?
– How about forms? Examples

WORDPRESS:
– Install! First, need to get it
– A “how to”
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

Studio 11: WordPress
Sources to Review:
– Intro to frameworks
Fluid Template
Responsive Designs

Assignment:
– Have you started organizing your Final Project?

WDS 10: CSS TIPS & TRICKS 03/31/17

INTRO:
– Import and display fonts (Show)
– Try an image Roll-over (javascript or CSS) (Show)
– HTML5 Code (make sure you have tried it) (Show)
– Try a Favicon (Show)
– RWD tutorial
Start Working on your Final – Planning

NEW:
JS Redirect:
– Sub-domain. How does it look?
How to redirect? My Page. Code. Screen Shot on iPhone

WORDPRESS:
– Install! First, need to get it
– A “how to”
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

FINAL DELIVERABLES:
A. The Development Process Documents (This was your mid term. Make sure process reflects the finished final project):

B. Homework Assignments.

Studio 01:
Create a splash page for your web site (use anything you want) with an image and a link. Example?

Studio 02: HTML and Process
HTML: Try out all the code samples: 4, and 5 and 6.

Studio 03:
Read: Chapter 7 and 8.
Complete Code review for 7 and 8

Studio 04:
Mount an image in a table. Put text in certain table cells.

Studio 05:
– Try Meta tag, refresh and redirect
– Create at least 3 HTML pages, using CSS to complete the following on each page:
– 1. place background image,
– 2. Use the “box model”
– 3. Use pseudo classes

Studio 06:
– Try External CSS
– Try CSS opacity hover

Studio 07:
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize! (Show next Week)

Studio 08:
– Create a 2 Column layout using HTML/CSS
– Create a 3 Column layout using HTML/CSS
– Try a JS Drop down menu
– Try CSS Drop down
– Try Media query (color change)

Studio 09:
– Import and display fonts
– Try an image Roll-over (javascript or CSS)
– HTML5 Code (make sure you have tried it)
– Try a Favicon
– RWD tutorial

Studio 10:
Try the JS redirect

C. WordPress site. Installed and customized

D. Final Site (URL)

Studio 10:
Sources to Review:
More on the Hover
Advanced Hover effects
Zen Garden

HTML/CSS
Try the JS redirect. Show next week.
Read Chapter 19
Install WP. Play!

1 2 3 7