web design & development calendar

About the Course Calendar (updated 2/5/2017; 2/27/2017)

Texts are to be read/watched/listened to for day they are listed. For example, Duckett is to be read for Monday, January 30. Homework in addition to texts will be presented in yellow. The schedule is subject to change; it is your responsibility to check it regularly.

Week One: Introductions

W 1/18: Introductions, Syllabus, Books

Assignment for Friday, 1/20
Please read the Syllabus carefully and come to class with any questions you have.

Please download each of the following required software applications, including the multiple browsers:

If you do not have a Twitter account, or have one only for personal use that you do not want to use for class, please create one and have one with you in class.

F 1/20: Bill Sick; no class Coding Friday: Sample HTML5 & CSS page
Hand out Social Media Assignment

Week Two: History & Web Standards; Begin Unit I

Assignment for Monday, 1/23
You are required to have your own web domain, which you should have purchased in COM 200. If not, or if it has expired due to lack of rue, please go to Reclaim Hosting and register a URL, which is $25 a year. Make sure your URL is professional and easily identified with you, like williamwolff.org is identified with me. Choose a .com or .net domain; try to avoid .org unless the others are taken. You must have your URL with you in class on Monday. Make sure you see the confirmation email Reclaim Hosting sends to you that has the subject heading, “[Reclaim Hosting] New Account Information.” It may take a day to get that confirmation email, so please don’t wait until Sunday night to sign up.

M 1/23: Sample HTML5 & CSS page; sample-style-css.pdf; sample-html.pdf
Hand out Social Media Tweeting and Design Journal Assignments

Assignment for Wednesday, 1/25
Read through the Social Media Tweeting and Design Journal Assignments and follow everyone you are asked to follow.

Please read Abbate’s (2000) “Introduction” to Inventing the Internet (see Readings page), “40 Maps that Explain the Internet,” and the Mission and History of the Web Standards Project. Then, watch the following videos:

First, which is Part 1 of 9 described as, “On December 9, 1968, Douglas C. Engelbart and the group of 17 researchers working with him in the Augmentation Research Center at Stanford Research Institute in Menlo Park, CA, presented a 90-minute live public demonstration of the online system, NLS, they had been working on since 1962. The public presentation was a session in the of the Fall Joint Computer Conference held at the Convention Center in San Francisco, and it was attended by about 1,000 computer professionals. This was the public debut of the computer mouse. But the mouse was only one of many innovations demonstrated that day, including hypertext, object addressing and dynamic file linking, as well as shared-screen collaboration involving two persons at different sites communicating over a network with audio and video interface.”

Second, watch this 40-minute video about web design pioneer Jeffrey Zeldman: 20 years of Web Design and Community:

After reading and watching, I’d like to to think about her final thought that the internet “was constructed through a series of social choices” (p. 6). Tweet 3 ways in which the texts and videos you read and watched show what she is discussing. And reply to 2 of your classmates’ tweets as a way to have a conversation. Be sure to use the #wdds17 hashtag on all your class-related tweets.

W 1/25: Abatte, Maps, Douglas Engelbart, The Mother of All Demos, Web Standards, Zeldman video

Assignment for Friday, 1/27
The assignments for Friday are to prepare each of us to be ready to code and upload our first basic page during class.

First, make sure you have your own personal domain (such as, williamwolff.org) created using Reclaim Hosting. Something that looks like http://yourname.wordpress.com is not correct. It must be your own domain. Do not wait until the last minute to set up your domain. It takes some time for it to be ready for use.

Second, make sure you have installed Firefox Developer Edition, FireFTP Firefox Add-on (free), and Brackets plain-text editor (free) on your laptop. Bring your laptop (if you have one) to class with you on Friday.

Third, look at your URL online. Do you see a blog there? If not, skip to Four below. If so, you need to move your blog to different location. Please do so by following this tutorial:

Fourth, you will need to set up your ability to connect to your server and upload files. To do this, you will need to configure FTP access and try to log in the first time. To do so, follow this tutorial:

If you have questions or run into some issues, tweet @billwolffsju with the #wdds17 hashtag with your questions.

F 1/27: Coding Friday: FTP, servers, text editor, workflow, coding a basic page

Week Three: HTML/XHTML/HTML5

Assignment for Monday, 1/30
Please read Duckett, chapters 1 – 5. While reading please tweet 5 questions you have. Respond to at least 5 classmates’ tweets where you are helping them answer those questions. In class, we’ll start working through some HTML basics.

M 1/30: HTML Basics; Duckett chapters 1 – 5
Hand out Story of Learning Assignment
W 2/1: HTML5 Basics; Keith & Andrew, chapters 1 & 2
Hand out Responsive Resume Assignment

Assignment for Friday, 2/3
Please read chapters 5 and 6 in Keith & Andrew’s HTML5 for Web Designers and, as previously, tweet questions you have and attempt to respond to your classmates.

Please bring with you a digital copy of your resume. We will start to mark it up with HTML in class on Friday.

For homework I’d like you to continue working on experimenting in the sandbox index.html file we created in class.

In that file, please complete the following:

  • create an ORDERED LIST in which you rate your top 5 movies of all time.
  • create an UNORDERED LIST in which you list your top 5 favorite bands or musicians.
  • in that list, link to each band’s web site (if they have one)

To complete this work, use the Duckett book as a reference. You will need to connect to the server through FireFTP in one browser tab, view the sandbox page of your web site in another browser tab, and Brackets to edit the index.html file.

We will build on this page in class on Friday.

F 2/3: Coding Friday: Sandbox play  Marking up your resume, Keith & Andrew, chapters 5 & 6
Part 1 of My Story of Learning due by 11:00pm

Week Four: HTML5

Assignment for Monday, 2/6
I’m going to be updating the course schedule so please ignore what is there. I’ll email you when it is adjusted.

Part 1 of My Story of Learning assignment is due 2/3 by 11:00pm.

Your first Story of Learning is due 2/4 by 11:00pm.

More to be added.

M 2/6: Starting to mark up your resume; header tags; sample.html
Hand out Responsive Resume Assignment

Assignment for Wednesday, 2/8 (updated)
Please read Keith & Andrew, chapters 5 & 6, which, in part, discusses additional HTML elements that have been created for HTML5.

Looking to Keith & Andrew’s discussion of <header></header>, <section></section>, and <article></article>, I’d like you to apply them to your resume.html. The elements can be used repeatedly on the page, so don’t think you need to use them only once.

<header> can be used to block off content at the heading of your resume, such as your name, but as seen on page 74, should be used with subheadings, as well.

<section> and <article> are used to group related content. Use their discussion starting on page 73 to help with organizing similar content in your resume.

We’ll take a look at what you come up with in class.

If you were absent on Monday, here is what we did:

  1. Right click on and then save the sample.html file as resume.html into your web design folder on your computer. This file will be the one we use to create our resume.
  2. Copy your resume from your Word doc and paste it into resume.html between the <body></body> tags. Placing it there is VERY IMPORTANT.
  3. Mark up the resume with header tags (<h1></h1>, <h2></h2>, etc.), <p></p>, and ordered or unordered list tags.
  4. Upload the resume.html file to the main directory on your server (do not put in the sandbox folder). You can see your resume online at yoururl.com/resume.html, such as billwolffsju.com/resume.html (we used Kelly’s as a sample).

W 2/8: Keith & Andrew, chapters 5 & 6; HTML5 organization

Assignment for Friday, 2/10
Building on what we did in class with <header></header>, <section></section>, and <article></article>, finish coding your resume.html.

Also add links, bold (<strong></strong>), and italics (<em></em>) where possible.

Make sure your code is cleanly laid out using indents and spacing between lines. We’ll discuss more options in class.

In addition, I would like you to compose a 250-300-word statement that describes your approach to whatever job you are looking for. This is not about the kind of job you want, but about you as a future social media designer or food marketer or artist or whatever job you see yourself in. What are your core beliefs about that job and how do your beliefs connect? What current industry trends do you support and why? Adopt the voice of a professional in the field and not a student looking for a job. (In fact, if you have a Summary section of your resume remove it.) Link to examples of work you have created that illustrate what you are saying. Let people who don’t know you understand who you and what you believe.

When done, create a Professional Statement heading above your resume and paste in the statement. Use paragraphs and code it with the same tags we’ve been using.

See http://billwolffsju.com/resume.html for an example of what I mean. Notice the way that I am wording, based on beliefs and practices.

F 2/10: More HTML5 organization
Discuss Design Journal Assignment

Week Five: CSS Basics • Bloggers: GO, MF

Assignment for Monday, 2/13
This week we start talking about CSS. Please read Duckett chapters 10 – 12. Tweet 5 questions you have about CSS and try to answer your classmate’s questions.

Remember your Stary of Learning Week 4 Weekly Update is due on Saturday, 2/11.

M 2/13: CSS Basics, Duckett chapters 10 – 12

Assignment for Wednesday, 2/15
Please read Duckett chapter 14 (only content relating to LISTS). Tweet 5 questions you have about CSS lists and try to answer your classmate’s questions.

Go to the Responsive Resume Assignment and download the bare bones HTML5 and CSS files (.zip) files. Put the .css files in the CSS folder you created on your computer. You don’t need to do anything with the .html file, as you are already using it for the resume you’ve been working on.

We’ll be working with your resume.html and the .css files in class on Wednesday, so please have them ready to go BEFORE you get to class.

W 2/15: More CSS Basics, Duckett chapter 14 (only content relating to LISTS)
F 2/17: More CSS basics, Marcotte chapter 3

Week Six: CSS & HTML5 Boxes and Layout • Bloggers: AM, JR, DM

Assignment for Monday, 2/20
Please read Duckett, chapter 13, which is about CSS Boxes. These can be tricky, so tweet all questions you have.

In your resume.css file, please style your headings, definition lists, and paragraphs with the following properties:

font-family:
font-size:
color:

Style your ordered and unordered lists with the following properties:

font-family:
font-size:
color:
list-style-type: 
margin-left: 50px;

For the font-size, please make them ems. The default font size for your browser is 16px or 1em. Header tags follow these traditional sizes:

h1 = 32px = 2em 
h2 = 24px = 1.5em
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

You can change these, of course, but this is a good starting point.

Remember, your weekly status updates are due by 11:00pm on Sat.

M 2/20: Duckett chapter 13, CSS Boxes

Assignment for Wednesday, 2/22
There is no reading for Wednesday. I would like to continue to working on your resume by applying margins to your headings (h1, h2, h3, etc.), paragraphs, and lists.

In class on Wednesday, we will be working on making boxes out of your sections.

This Friday, 2/24, is a VERY IMPORTANT class—even more important that the others. Please make sure you are present.

W 2/22: More with CSS Boxes

Assignment for Friday, 2/24
The work for Friday is going to prepare us for moving from basic web design to more advanced design. Specifically, we are going to be thinking about the needs of users using different devices.

Please read chapters 1 and 4 in Marcotte’s Responsive Web Design (see Readings page). Chapter 1 introduces the ideas behind responsive design. Chapter 4 introduces media queries, the code that allows your web site to appear differently on different screen sizes.

After reading the chapters, open your resume.css file. As you scroll down, you will see the following media queries already included (I’ve added ADD RULES HERE below):

/* end main */

@media screen and (min-width: 320px) { /* mobile phone portrait view */

ADD RULES HERE

}


@media screen and (min-width: 768px) { /* tablet portrait view 8 */

ADD RULES HERE

}

@media screen and (max-width: 1024px) { /* computer widescreen view */

ADD RULES HERE

.clear {
    clear: both; /* necessary for floating elements; do not remove */
} 

}

For Friday, I’d like you to start to think about how you think your resume should appear on your phone and in the phone media query, where it reads ADD RULES HERE, create new rules for any of these that you have:

body, h1, h2, h3, p, ol, ul, li, dl, dd, dt, and section.

To test that the new rules are working you can either view your resume on your phone or you can make your browser window really thin. You should see changes.

Tweet screenshots of your resume as it looks on your phone and computer using the #wdds17 hashtag. Remember to obscure any info you don’t want to appear, such as phone numbers.

Good luck!

F 2/24: Making Resume Responsive; Marcotte chapters 1 and 4

Week Seven: CSS layout • Bloggers: EZ + 1 needed

Assignment for Monday, 2/27
Please read Duckett, chapter 15, up to page 386. You do not need to read about the grid system. We’ll be getting to that in Project 2.

As we discussed in class, I would like you to make sketches of how you would like your resume to look on a phone, tablet, and computer as a way of helping you figure out how to code it. Your sketch can be very basic, as was the one I put on the board in class:

sketches

Then, I would like you to code each of the screen sizes in your resume.css file. As we discussed in class, rules that will apply to all screen sizes should be placed outside the media queries. For example, your font-family might be the same regardless of screen size, but the font-size and other characteristics will certainly change:

/* main */
/* use this section for styles that will stay the same across all screen sizes */ 
body {
      background-color: white;
      margin: auto;
}

h1 { 
font-family: Helvetica, Arial, sans-serif;
color: black;
}
/* end main */
@media screen and (min-width: 320px) { /* mobile phone portrait view */
body {
width: 98%;
    }
h1 {
font-size: 1.4em;
margin-top: 1.2em;
    }
}
@media screen and (min-width: 768px) { /* tablet portrait view */
body {
       width: 90%;
    }

h1 {
       font-size: 1.6em;
       margin-top: 1.4em;
}

@media screen and (min-width: 1024px) { /* computer widescreen view */

    body {
        width: 80%;
     }

    h1 {
       font-size: 2em;
       margin-top: 1.6em;
     }

}

Take screen shots of each size of your resume as you are working on it and tweet it with any questions you have to #wdds17.

Remember, your weekly Story of Learning update is due and try to comment on the blog posts.

M 2/27: Duckett, chapter 15, CSS Layout

Assignment for Wednesday, 3/1
Please continue working on coding your floats and divs, which we worked on in class. Here is the sketch I put on the board:

floating1

floating2

Tweet screenshots of your progress.

There is no additional reading for Wednesday.

Thanks for all your hard work! I know this is complex; I’m excited to see how far you have come with your coding!

W 3/1: More with CSS layout
F 3/3: Resume Draft Due; Validation testing; resume-draft-checklist.pdf
Saturday, 3/3: Resume Final Draft and Reflections Due

Week Eight: Conferences

In Preparation for Resume Draft Conferences
As a way to prepare for your resume draft conferences, please make sure you can check off each item on the Resume Draft Checklist I handed out in class on Friday (resume-draft-checklist.pdf). Try to figure out as many of the validator errors/warnings as you can. I’ll help you work through the ones you cannot. Tweet your successes and your questions.

Please remember to complete your weekly Story of Learning update.

See you at your conference next week!

M 3/6: Class Canceled for Conferences to discuss resume drafts
Midterm Story of Learning due by 11:00pm
W 3/8: Class Canceled for Conferences to discuss resume drafts
F 3/10: Class Canceled for Conferences to discuss resume drafts
Resume Final Draft and Reflections Due by 11:00pm

SPRING BREAK 3/13 – 3/17

Week Nine: Conferences

M 3/20: Class Canceled for Conferences to discuss Stories of Learning
Midterm Story of Learning due by noon
W 3/22: Class Canceled for Conferences to discuss Stories of Learning
F 3/24: Class Canceled for Conferences to discuss Stories of Learning

Week Ten: Emotional Design and Sketching Layouts • Bloggers: QR, KH

Assignment for Monday, 3/27
Please read chapters 1, 2, and 3 of Aarron Walter’s Designing for Emotion (it’s a quick read with lots of pictures) and Kissane’s “A Checklist for Content Work.” All readings can be found on the Readings page.

(If you are interested in user-centered design [and who isn’t, really], I have added to the Readings page the [very important and cool] first chapter of the book by Don Norman that Kissane mentions . It is not required, but you will get much from it.)

Search the web for FIVE portfolio web sites by professionals in the field(s) you wish to go into upon graduation that you think embody emotional design principles and employ content well. Tweet links to each and state how each embodies a different on of Walter’s and/or Kissane’s ideas.

M 3/27: Emotional Design

Assignment for Wednesday, 3/29
Please read chapters 4 and 7 in Walter’s Designing for Emotion and chapters 1 and 2 in Jason Santa Maria’s On Web Typography. 

After reading, I’d like you to speculate on Twitter a bit about the relationship between emotional design and typography. Think through some ideas in about 3 or 4 tweets. Reply to your classmates, as well.

We’ll discuss all of these in class on Wednesday.

W 3/29: Emotional Design and Typography
F 3/31: Layouts

Week Eleven: Bloggers: AF, MM, PF

M 4/3: Typography
W 4/5:
F 4/7:

Week Twelve:

M 4/10:
W 4/12:
F 4/14: Class Canceled — Easter Break

Week Thirteen: Bloggers: AS, KF, HK

M 4/17: Class Canceled — Easter Break
T 4/18: Class Meets
W 4/19:
F 4/21:

Week Fourteen: Bloggers: NN, NM, + 1 needed

M 4/24:
W 4/26:
F 4/28:

Week Fifteen:

M 5/1:
W 5/3: Last Day of Class

Friday, May 5: Final Story of Learning due by 11:00pm

Comments are closed.