Category Archives: WDS

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!

WDS 09: CSS Advanced – 03/24/17

REVIEW:
– Make sure you understand the “Z-index”. Try either example shown in class.
– 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)

READING:
Chapter 12
– Can also import fonts
Can also use Google Fonts
Some Examples

From Chapter 16, rollovers.
JS tried and true.
Better but tricky
Something easier…
More Info
What’sdisplay block”?

Ch. 17
The old
The new
How it works
Older Browser?

FAVICON:
FAViSize
Flavor FAVicon
Favicon generator

RWD:
More Media Rules

Studio 09: CSS/HTML
Read: Chapter 9
Complete Code review for 9
In Class:
– 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
Start Working on your Final – Planning

WDS 08: Lists – Interactive Menus 03/17/17

REVIEW:
MID TERM: Process documentation due. Present
Complete Code review for 3, and 14
CSS/HTML
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize!

READING:
Ch. 14
List styles
List images
Table Properties
Even the Cursor can change
Lists are important for drop down menus:
Drop, example. JS Basics.
Can do it in CSS as well
Pick your poison

Ch. 15
The power of “Z”. Download code – DEMO
What “Z” can do for you
2 column, and 3 column layout.
@import. + Layout example
But, when presented as a media rule: @media – used for different purposes:
Media Rules
– More Media info

Studio 08: More CSS + Drop downs
IN CLASS: COMPLETE THE FOLLOWING
– Make sure you understand the “Z-index”. Try either example.
– 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)

READ: Ch 12, and 17
Complete Code review for 12, and 17

WDS 07: Advanced CSS 03/03/17

REVIEW:
HTML/CSS:
Complete Code review for 15, and 16
– Try External CSS
– Try CSS opacity hover (Show)
PROCESS: Interface design. Home page (Show)

Make sure all PROCESS deliverables are accounted for.
MID TERM: Process documentation due on Friday, March 17th.

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
After Spring Break: Image Rollovers and Sprites

Studio 07: Advanced CSS
Sources to Review:
– More about the “Z”
Flaunt it
3 columns
more 3s

Read: Chapter 3, and 14.
Complete Code review for 3, and 14

CSS/HTML
Make sure you understand “Float” and “Clear”.
Review this EXAMPLE. Copy and customize! (Show next Week)

Make sure all PROCESS deliverables are accounted for.
MID TERM: Process documentation due on Friday, March 17th.