ECUAD Outlines

ECUAD Intro To Web Design (4-Day)

A Good Online Guide To HMTL & CSS

Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Content Blocks

  • HTML Text Elements: h1 – h6, p, ul, li
  • HTML Images: img
  • HTML Links: a [relative & absolute]
  • Shared Content: YouTube & Google Maps
  • HTML Sectioning Elements: header, footer, article, aside, nav
  • Tags vs Classes vs IDs
  • Floats, Clears, Clearfix
  • Responsive Web Design
  • CSS Grids
  • Mobile First
  • Getting a Domain & Hosting
  • FTP

Exercises

Resources

POST CLASS Challenge Exercises

If you want to try some layouts that will reinforce what we did in class (and even go a bit beyond), try these. They are listed here in order of difficulty.

  1. GuitarMania Revised Layout
  2. Fender Vs Gibson Layout Exercise: download these files, consult the included screenshots, and build the page. A fluid grid and normalize.css are included in the download. As well, the index page is more or less already marked up for you.
  3. Fender Vs Gibson Layout Exercise Revised Layout: duplicate your Fender Vs Gibson exercise folder and restyle the page to look like this.
  4. PedalMania Exercise: Download these files. Again, consult the included screenshots, read the Instructions file, and build the page. A fluid grid and reset stylesheet (normalize) are included. The HTML file (index.html) has all the text, and links to the image, but you will also need to add HTML (be guided in this by the HTML comments included in the file).Note: if we haven’t covered everything in the screenshot or the HTML comments, either omit that section or google how to do the technique.

 

Standard
ECUAD Outlines

Advanced Web Design

 

CEDA 332 F001
Oct 24 – Dec 12 ( Saturdays )
930-1230
Room 121

COURSE DESCRIPTION

Following on from Introduction to Web Design, this course delves deeply into the skills needed by the modern web designer. Topics include Responsive Web Design, Advanced CSS Selectors, JavaScript libraries, CSS preprocessors, prototyping frameworks, strategies for high-resolution (aka Retina) displays, and emerging CSS3 modules fast on their way to the mainstream.

COURSE LEARNING OUTCOMES + OBJECTIVES

By the end of the sessions students should be able to demonstrate:

  • A good understanding of Grid Systems
  • A good understanding of all CSS Selector types
  • A good understanding of approaches to high resolution screens
  • The ability to quickly make sophisticated site prototypes
  • The ability to incorporate JavaScript- and CSS-based interactivity

A GOOD REFERENCE: Shay Howe

http://learn.shayhowe.com/

A GREAT REFERENCE: Lynda.com

If you are a Langara student, or an ECUAD regular studies student, you can access Lynda.com. If you aren’t, hopefully you have a Vancouver Public Library card, because you can access Lynda.com that way, too, via the link below:

https://www.vpl.ca/extDB/login.remoteDB_Ly?LyndaDotCom

Lynda.com is the web’s most widely-known excellent video instruction site. There are tons of videos on all aspects of web design: HTML, CSS, WordPress, JavaScript, etc.

COURSE METHOD

Class demonstrations on software and authoring techniques; discussion; exercises; final site assignment.

COURSE CONTENT

A presentation of issues with supporting examples introducing key content and technical concerns involved in advanced web design and development. Topics, listed on the next page, may change slightly in response to class progress, interest, and requests.

REQUIREMENTS

To successfully complete the course, students are expected to complete all assignments to the instructor’s stated requirements, attend at least 85% of the classes and participate actively in discussions and critiques.

PLEASE DO NOT COME TO CLASS ILL

I will be quite understanding if you are not able to attend class due to illness. You will be doing yourself and your classmates a great favour by staying away from class. I’m happy to fill you in on any missed materials.

ASSESSMENT METHODS

Assessment will include: attendance and participation, weekly home assignment completion and final site.

SCHEDULE OF INSTRUCTIONAL DELIVERY

Session 1 – Grid Systems & Responsive Design Review

  • Mobile First
  • Guitar Mania Extended Play Exercise

Class Exercises

Depending on class composition (ie if most of the class didn’t take the Introduction to Web Design class), we might start with the GuitarMania exercise. Otherwise, we will start with the GuitarMania Revised Layout.

Homework:

  • GibsonVsFender-2015
    This will download a zip archive. Unpack it and follow the instructions in the Instructions file.
    In this exercise, you need to make your own grid, so it’s definitely an important exercise. 

Session 2 – RWD 2 / Emmet

  • Review GibsonVsFender2015 Exercise
  • Emmet: The Ultimate HTML/CSS Macro

Class Exercise:

Reference:

Homework:

  • DTN Magazine Exercise
    Clicking this link will download a ZIP file with instructions on the layout to build. In this exercise, make your own grid (don’t download a prebuilt one).Use Emmet as much as you can to make the coding far less tedious.

Session 3 – Advanced Selectors

  • Attribute Selectors
  • First-child, last-child
  • Nth-of-type & Expressions
  • Pseudo Classes, Pseudo Elements, Generated Content
  • CanIUse.com

Class Exercise:

References:

Homework (Optional)

  • PedalMania
    Download zip, instructions included. If you are comfortable with grids and responsive design, consider this exercise optional.

Session 4 – “High Resolution” Design

  • The challenge of retina screens
  • Icon Fonts: FontAwesome, icoMoon
  • SVG Review & Fallbacks
  • Self-hosted Fonts

References:

Class Exercises / Homework:

Session 5 — Transitions & Animation

  • Transitions Syntax
  • CSS Transform Syntax
  • Performance Considerations
  • Animation Syntax

Class Exercises / Homework :

References

Session 6 – jQuery I

  • Hooking jQuery up
  • jQuery Basics for Designers
  • Common Plugins

Homework (to be done week 5, in advance of this class):

Session 7 – CSS Preprocessors

  • Making CSS Programmatic & Modular
  • SASS: Variables, Operators, Nesting, Partials & Import, Mixins, Extends

Reference:

Class Exercise:

  • Emmet Exercise: Syncopate
    ( EMAIL me for this link, or use the CONTACT FORM to ask for it. )
  • SASS Concept Demo: Grid

Session 8  – FlexBox

Class Exercises:

Resources

Midterm Exercise Explained

 

Standard
ECUAD Outlines

Intro to Web Design

Introduction to Web Design

Course Number:       CEDA 232 S001

Instructor: Kevin  McMillan
Number of Sessions 8
Day and Time Thursdays 6-9
Start Day October 12
Room B1122

COURSE DESCRIPTION

This course explores the many facets of website design and development, as well as some of the ways that the Internet is being used by artists and designers for self-promotion.

You will learn the basics of web page creation, user-centered design principles, and design techniques for interactivity. You learn through exercises, projects, demonstrations and discussions.

Projects focus on the technical and aesthetic issues of developing a web site for your or your clients’ work.

Note: this course is run as an eight-week or a four-week course, depending on the term. This outline is presented as eight discreet sessions. If the course runs over four weeks, we will cover two sessions per meeting day.

A GOOD REFERENCE: Shay Howe

http://learn.shayhowe.com/

Chicago designer/developer Shay Howe has a very detailed teaching site loaded with useful information.

A GREAT REFERENCE: Lynda.com

If you are a Langara student, or an ECUAD regular studies student, you can access Lynda.com. If you aren’t, hopefully you have a Vancouver Public Library card, because you can access Lynda.com that way, too, via the link below:

https://www.vpl.ca/extDB/login.remoteDB_Ly?LyndaDotCom

Lynda.com is the web’s most widely-known excellent video instruction site. There are tons of videos on all aspects of web design: HTML, CSS, WordPress, JavaScript, etc.

COURSE LEARNING OUTCOMES + OBJECTIVES

By the end of the sessions students will be able to demonstrate:

  • A basic understanding of user-centered design principles and their application to website design.
  • The ability to create and use images in standard web formats and contexts.
  • The ability to create and manage an entire website with multiple HTML documents and images.

COURSE METHOD

Class demonstrations on software and authoring techniques; weekly assignments + a term project (individual student websites).

COURSE CONTENT

Presentation of issues with supporting examples on a particular theme introducing key techniques and concerns.

REQUIREMENTS

To successfully complete the course, students are expected to complete all assignments to the instructor’s stated requirements, attend at least 85% of the classes and participate actively in discussions and critiques.

Each week’s supervised work session begins with the discussion and/or presentation of each week’s homework assignment. The instructor will be available for individual assistance and support. The period allows students to immediately begin to fold in material from class presentations. Assessment will include: attendance and participation, assignment completion and creativity.

SCHEDULE OF INSTRUCTIONAL DELIVERY

Session 1: Intro to HTML

  • Deconstructing a website: what is HTML and CSS and how do they interact?
  • Document Structure
  • File Naming Conventions
  • Using the W3C HTML Validator
  • Basic HTML Tags: html, head, title, body, h1, h2, h3, p, a, ul, li

Assignment 1: Make a three page website on any topic and bring it to class next week.

Resources

A Basic Summary of What We Do On Day One:
TutsPlus: Beginner’s Guide to Web Design, Pt 1

A really good overview of HTML & CSS

Session 2: Intro to CSS

  • Separation of Content & Presentation via CSS
  • Using the W3C CSS Validator
  • The CSS Box Model: margin, padding
  • CSS Type Basics: family, size, weight, line-height
  • Using images on a web page
  • Image alignment using the CSS float property
  • Preparing images for the web using Photoshop and/or Illustrator

Assignment 2: Using CSS, style the website you made for Assignment 1. Bring the styled site to class.

Resources

Session 3: Basic Layout via Floats

  • Two-column or three column layout via CSS float property
  • Sectioning Elements: Header, Footer, Nav, Article
  • Class Styles
  • Paths in HTML & CSS

Class Exercises:

Homework Exercise:
Captain Beefheart Layout Exercise | Annotated Solution

Resources

Useful Bookmarklet Utility

Session 4: Horizontal Menus, CSS Backgrounds

  • Google Font Hosting
  • List-based Menus
  • Containing Floats
  • CSS Background Images
  • CSS Gradients

Class Exercises:

Resources

Final Project: Start working on final project, if you plan to do one. Content is up to you, but all copyright must reside with you (a small percentage can be open source). I want to see a usable, extensible, and elegant site whose purpose is obvious to the viewer.

Sessions 5 & 6: Responsive Design / Mobile First

Class Exercise:

Resources

Additional Exercises

Session 7: Domains, Hosting, FTP, Forms

  • Domains & Hosting
  • Using FTP to upload your website to the web
  • Anatomy of a URL
  • Sample uploads.
  • A simple contact form

We may also require time today to finish either of the exercises from last week.

Resources

Session 8: Review / A Look To Other Topics

  • Introduction to Content Management Systems such as WordPress
  • Introduction to Advanced Web Design class topics
  • Class Review Session
  • Consultation on your own sites
  • Class Evaluation

Publish Final Project, if you’re doing one.

Standard
ECUAD Outlines, WordPress

Intro to WordPress

Introduction to WordPress

Course Number:       CEDA 250  S001 / S002

Instructor: Kevin  McMillan
Number of Sessions 4
Day and Time Sunday / 9:30 am – 4:30 pm
Start Date February 29, 2016
Room 121

Course Description

An introduction to web design using the WordPress platform, this four-day course offers an in-depth look at the technology and skills needed to develop a web site. Through the production of your own site, you will learn how to install WordPress and make posts, pages, and galleries. In addition, you will learn how to use WordPress templates, plugins, widgets, comment forms, and more. The course will demonstrate a variety of approaches that outline the easiest and most effective ways of designing and managing your personal WordPress site.

COURSE LEARNING OUTCOMES + OBJECTIVES

Students will learn how to set up and maintain their own website using WordPress on their own domain.

SCHEDULE OF INSTRUCTIONAL DELIVERY

Note: like anything in life, this schedule is subject to occasional change.

  • Day One:
    WP.com vs WP.org vs Static Websites
    Initial Site Setup
    Users
    Posts, Pages
    Categories, Tags
    Bulk Edits
    Images, Galleries
    YouTube, Google Maps
    Feature Images
    Menus
  • Day Two:
    Comments ( and Comment spam )
    Themes From WP Repository & Elsewhere
    WP Security Pt 1
    Widgets
    Plugins
    Backing Up WP
  • Day Three
    Some Exemplary Themes: Parabola, Verbosa, Fluida, Ryo, Hatch, Gridly, Graphene, & others
    WordPress Security 2 & Performance
    Custom CSS
    Domains & Hosting
    Setting Up A Testing Environment: MAMP
  • Day Four:
    Introduction to Child Theming
    Working on your own sites
    Course Evaluation

Assignments

Week One: Make A Website

  • delete the posts and pages we have now
  • delete the images
  • make at least five posts
  • add images to posts
  • make an image gallery
  • add two youtube videos to a post
  • make a beautiful banner
  • add a Vimeo video to a post
  • make one image in a post link to another web site
  • organize your content into categories
  • make at least one menu
  • Widget / Media Embedding Task: Spotify
  • Get a WordPress.com account.
    We will use it next day with two or three plugins or services.

Week Two: Theme Testing

  • Test at least three themes from the theme directory
  • Get a WordPress.com
  • Set up a gmail account for backup

Week Three: Work On Your Own Site

  • Get your own Domain (optional)
  • Enter Content
  • Decide on a Theme

After the Course

  • Keep tweaking your site

Resources

If you have a Lynda.com account, the WordPress videos by Morten Rand-Hendriksen are excellent. If you don’t have a Lynda.com account, it’s $25 – $35 per month really well spent.

If you are a Langara student, or an ECUAD regular studies student, you can access Lynda.com for free via institutional login. Another option, if you have a Vancouver Public Library card, is via the link below:

https://www.vpl.ca/extDB/login.remoteDB_Ly?LyndaDotCom

Start with WordPress Essential Training, then move on to one of the many others, depending on your particular interests.

Rand-Hendrickson’s videos are highly recommended: he has expert knowledge of the subject, which he delivers in a very concise and well-organized manner. He also updates his content for each significant upgrade of the program.

For a good overview of most of the WordPress basics, consult this excellent article from the online repository of WordPress wisdom known as the Codex.

http://codex.wordpress.org/First_Steps_With_WordPress

If you don’t have a way to access Lynda.com but still want a video review of the stuff we do in class, check out the free WPTuts Beginner’s Guide to WordPress series of videos.

Keep in mind, however, that because WordPress is updated on a very regular basis, content in some of the videos might appear different from how it appears in the software. That’s the price of progress, but most of the video content will still be applicable.

The files we need for class one:

DTN Mag Images
Images-1800×1200
Images-Patterns
Images-JayMantri (20MB)

WordPress.com vs WordPress.org

DIYThemes.com: WP.com vs WP.org
WPBeginner.com Infographic / Chart

Commenting

How to completely turn off Commenting

Discussion of Popular Plugins

http://wpmu.org/top-100-wordpress-plugins/

 

Local Testing And Theme Development

How to Set Up A Local WordPress Install for Testing (MAMP)

Links

Anatomy of a WordPress Theme Development

Tons of WordPress Links
Tons More WordPress Links

Themes

Parabola
Hatch
Ryo
Max Magazine
Custom Community
Gridly
Dzonia
Imbalance 2

Plugins

Yet Another Related Posts Plugin (YARPP)
Contact Form 7
TubePress
Quotes Collection
WP-Polls
WP-Typography
Akismet
JetPack
W3 Total Cache
Regenerate Thumbnails
Ultimate Maintenance Mode
Galleria
Simple Custom CSS
Google Analytics
WordPress SEO by Yoast
Soliloquy

WordPress Exercise Series 1

Standard