#wddf18 course calendar

About the Course Calendar

Texts are to be read/watched/listened to for day they are listed. For example, Duckett is to be read for Monday, September 10. 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

M 8/27: Introductions, Syllabus, Books

Assignment for Wednesday, 8/29
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 have a WordPress.com account, come to class with your username and password. If you do not have a WordPress.com account, we will be using WordPress for Design Journal Assignment.

W 8/28: Design Journal Setup
Hand out Design Journal Assignment
F 8/30: Sample HTML5 & CSS page; sample-style-css.pdf; sample-html.pdf

Week Two: Web Standards and Getting Started

M 9/3: Class Canceled — Labor Day

Assignment for Wednesday, 9/5
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 Wednesday. 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 the last minute to sign up.

Please read “The Importance of Web Standards” and “40 Maps that Explain the Internet” and come to class with 4 questions based on the readings — 2 questions about each reading — that you will turn in to me and we can use to inform class discussion. I’d also like you to do a few Google searches to find out each of the following:

  • which county has the fastest internet
  • which country has the highest broadband Internet penetration
  • which country has the cheapest internet prices for the fastest speed
  • what percentage of the world has internet access

Bring those results with you to class.

W 9/5: URL verification; Web Standards; Maps

Assignment for Friday, 9/7
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, as assigned for Wednesday. Something that looks like http://yourname.wordpress.com is not correct.

Second, make sure you have installed Firefox Developer Edition, FireFTP Firefox Add-on (free) FileZilla (free), Web Developer Toolbar Firefox Add-on (free), and Brackets plain-text editor (free) on your computer. 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 (note, I will be updating this tutorial to use FileZilla instead of FireFTP, but the process is exactly the same for both, so feel free to try to connect, if you can):

If you have questions or run into some issues, contact Bill with your questions.

F 9/7: Coding Friday: FTP, servers, text editor, workflow
Hand out Story of Learning Assignment

Week Three: Intro to HTML

Assignment for Monday, 9/10
Please read Duckett, chapter 1, on the structure of an HTML page. When completed, I’d like to try to code a very basic page, copying the code that Duckett presents on page 20. Copy the verbatim, though you may include your own sample content.

Before coding your page, make sure you have gone through the 4 steps in the assignment for Friday, 9/7.

As we discussed in class on Friday, your workflow will be:

  1. Open Firefox Developer Edition and go to your own URL.
  2. Open FileZilla and Log In go to your “public_html” directory
  3. Open Brackets and start a new document.
  4. Enter the Code in Brackets.
  5. Save the page as index.html in your web design course folder.
  6. Go to FireZilla and upload index.html to the public_html directory.
  7. Go to Firefox Developer Edition and Refresh the page.

If you have trouble, only try to get it to work a few times. If it doesn’t, STOP. Note what you have done and we will work through it all in class on Monday.

Please read through the Story of Learning Assignment and come to class with any questions you have.

M 9/10: Duckett chapter 1, Structure; Coding a page structure

Assignment for Wednesday, 9/12
Please read Duckett, chapters 2 and 3. In the “index.html” file you worked on in class on Monday, please experiment with the following:

  • three levels of headings
  • paragraphs
  • line breaks
  • ordered lists
  • unordered lists

If you are feeling confident, try to find out how to make text bold and italics and add that.

Group 1 blog posts are due by class on Wednesday, as well.

W 9/12: Duckett, chapters 2 and 3, texts and lists;
Group 1 Blog 1 Due

Assignment for Friday, 9/14
Please read Duckett chapter 4 on linking. In your index.html page you’ve been playing with, create ABSOLUTE links to 3 web pages that are important to you.

I’d also like you to create a new file called “resume.html” and upload it to “public_html” folder on your server. In resume.html, add your education information, using proper coding.

Then, create a RELATIVE link from “index.html” to “resume.html.”

Please bring a digital version of your resume with you to class on Friday.

Now that we have our first blog posts online (!!), students in Groups 2 and 3, please start adding comments to those posts. Bloggers, please monitor the site by approving and commenting on any comments you receive. You can also alter the theme of the blog so that it isn’t the default theme anymore, if you’d like. you can change the title, too.

Your first Story of Learning Weekly Update is due by 5:00pm on Friday and Part 1. My Story Up Till This Moment due by 11:00pm.

If you have any questions, please let me know.

F 9/14: Coding Friday: chapter 4, links; coding a page
Part 1 of My Story of Learning due by 11:00pm

Week Four: FTP and Workflow Review

M 9/17: Discuss resume coding and introduce images FTP Review and Practice

Assignment for Wednesday, 9/19
Please read pages 429 – 439 in Duckett on HTML5. After reading, please go to your resume.html file and add the following codes in the appropriate places:

  • <header></header>
  • <article></article>
  • <section></section>
  • <figure></figure>

If you add the codes correctly, you should not see any change to your resume as it looks in the browser.

We’ll discuss more about HTML5 in class.

If you have any questions, please let me know.

W 9/19: Duckett, pages 429 – 439 on HTML5
FTP and Workflow Quiz
F 9/21: Class cancelled for Conferences to Review Quiz Results

Week Five: Intro to CSS

Assignment for Monday, 9/24
Please read Duckett chapters 10 and 11, which introduce stylesheets (CSS) and how to style color in various ways (we’ll get to the CSS3 stuff later in the semester). Please try to style your resume headers with different colors. Give you page a background color by styling the body.

If you have any questions, let me know.

M 9/24: Duckett chapters 10 and 11, Intro and Color
Hand out Responsive Resume Assignment

Assignment for Wednesday, 9/26
Please read Duckett chapter 12 on text and chapter 14, only the content relating to lists.

Try to create styles for your <body>, <p>, and <li> tags, using the templates in the Responsive Resume Assignment which we worked with 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.

W 9/26: Duckett chapter 12, Text, and 14 (only content relating to LISTS)
Group 2 Blog 1 Due
F 9/28: Coding Friday: More CSS coding and your resume

Week Six: CSS & HTML5 Boxes and Layout

M 10/1: Duckett chapter 13, CSS Boxes

Assignment for Wednesday, 10/3
Please attempt to style at least 5 of your resume.html elements with padding, borders, margins, and widths.

Read chapter 8 in Duckett, “Extra Markup,” and style each of your <h2> or <h3> elements so they have different background color using the class="" attribute.

We’ll discuss class and id in great detail in class on Wednesday.

Group 3, blog 1 is due on Wednesday. If you have yet to comment on Group 2 blog posts, please do so.

If you have any questions, please let me know.

W 10/3: Duckett, chapter 8, class and id; more with CSS boxes
Group 3 Blog 1 Due
F 10/5: Coding Friday: More CSS

Week Seven: CSS Layout and Responsive Design

Assignment for Monday, 10/8
Please read Duckett, chapter 15, pages 359 – 376, paying special attention to the discussion of the float property.

If you have yet to include your personal statement on your resume.html page, please add it to the page above your resume, but below your name. Style the text in a way you would like.

I’d like you to try to use the float property to put your Personal Statement next to your resume content. You will need to do this within this media query:

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

}

You’ll also need to add the following line of code just before the </body> tag in resume.html.

<div class="clear"></div>

We’ll be talking about floats in class on Monday, but take the risk and see what happens.

Don’t forget to comment on blog posts and complete your weekly Story of Learning update.

M 10/8: Duckett, chapter 15, pages 359 – 376.
W 10/10: Making Resume Responsive; Marcotte chapters 1 and 2
Group 1 Blog 2 Due

Assignment for Friday, October 10
Please read Marcotte, chapter 4, on media queries, and Scacca on typeface and font for mobile devices.

I’d like you to come to class with your resume coded for each of the three media queries, with fonts chosen using a Google Font (as stated in the assignment, you must use Google fonts). Use Scacca’s discussion of fonts to help you determine the size, letter spacing, and line height, and justification you choose

I’d also like you to set a max-width for the 1200px media query for you main content area, as we talked briefly about in class on Wed and is depicted at HappyCog. You can also set a max-width for the other media queries, if you’d like.

Please also come to class with stacking strategies for each of your 3 layouts. As we discussed in class, they can look like this (from here):

stacking

Break your resume and statement down by <section></section> , number them, and think about how you want the sections positioned on each page. It might make sense for smaller sections to be next to each other. The sections can be styled with floats, just as we did in class on Monday.

F 10/12: Marcotte chapter4 and Scacca on typeface and font for mobile devices; Coding Friday: More CSS
Midterm Story of Learning Due by 11:00pm

Week Eight: Midterm Conferences

M 10/15: Fall Break — Class Canceled
W 10/17: Class Cancelled for Conferences to discuss Stories of Learning
F 10/19: Class Cancelled for Conferences to discuss Stories of Learning

Week Nine: CSS Layout

Assignment for Monday, 10/22
Please read Santa Maria, chapters 3 and 4, on Web Typography (see the Readings page). (If you haven’t studied typeface before, I also encourage you to read chapters 1 and 2.)

Come to class with 3 sets of paired typefaces that you might be able to use on your resume, using the discussion in chapter 4 as a guide. One typeface will be for headers; the other will be for content. You might also consider a third typeface that would be for your name at the top of the resume. Use Google Fonts for your selections. If you already have a set of typefaces you like, locate 2 additional pairings as a way to practice thinking about typeface relationships.

Implement one of set of selections on the Phone version of your resume (even if you already have typefaces you like, see how these work.)

In your Phone media query, set the following:

  • body to a width of 99%;
  • paragraph and list font to 1.1.25em;
  • paragraph and list line height to 1.1875em;
  • paragraph and list letter-spacing to .02em;
  • paragraph and list text-align to justified;

Add additional styles as you’d like, such as the headers with the new typeface, ensuring there is significant contrast to enhance reading ease.

Don’t forget to add the Story of Learning weekly update and comment on blog posts, if you haven’t yet.

M 10/22: Santa Maria, chapters 3 and 4, on Web Typography; resume-draft-checklist.pdf

Assignment for Wednesday, 10/24
Please read Noa’s (2015) and Neidlinger’s (n.d.) posts on color theory (see Readings page) and then check out the two color pickers under the design links on the right sidebar: Adobe Color Wheels and HTML Color Codes. If you have yet to select a color theme for your resume, use the readings and the color wheels to help you select a theme. When doing so, think about what you want your resume to say about yourself and what colors (and white space) will help you bring that to fruition.

Remember, I have added an additional coding open hours, Coding Tuesdays, 12:45 – 1:45, in the Annex.

Blogging Group 2 has their second blog post due on Wednesday.

Continue to work on your resume draft.

W 10/24: Color Theory; Validation Testing
Group 2 Blog 2 Due

Assignment for Friday, 10/26
Your resume draft is due by 11:00pm Friday night, which means you should be working diligently on each of your three screen sizes, as they are all due by 11:00pm.

Using the validation tools we discussed in class, try to validate your HTML and CSS. It must meet these requirements at least 1 day before your conference next week,

Please read through the resume-draft-checklist (.pdf) and note which requirements your code meets and which it doesn’t meet. Come to class with a list of up to 10 questions about your code. Before settling on a question, try entering that question into Google to see if you can locate a response you can implement.

Your Weekly Update is due by Friday night, as well. New blog posts are now online, so start thinking about your commenting.

F 10/26: Coding Friday: Work on Coding Resume
Resume Rough Draft Due by 11:00pm

Week Ten: Resume Draft Conferences

M 10/29: Class Canceled for Conferences to discuss Resume Drafts
W 10/31: Class Canceled for Conferences to discuss Resume Drafts
Group 3 Blog 2 Due
F 11/2: Coding Friday: Work on Final Resume Drafts
Resume Final Draft and Reflections Due by 11:00pm

Week Eleven: Emotional Design and Sketching Layouts

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–see the Readings page).

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.

Please watch the below TED talk by Simon Sinek:

After watching Sinek’s talk, I’d like you to write down two of your Whys? First address the question: What is your core belief that guides all of your actions in the world? Second, address the question: What is your core belief that guides (or you hope to guide) your actions in the workforce? Start each sentence with “I believe. . . .” The two can be related, though they don’t need to be.

AFTER completing the reading and writing your Whys, I’d like you to start completing a Design Persona for your a new version of your web site–one that is going to have a home page, about page, portfolio page, contact page, and resume page. The design will be new and not the same as your resume.

Walter discusses the Design Persona process on pages 35 – 47. On pages 36 and 37 he lists the key sections of a Design Persona. Download a copy of the Design Persona Template (.pdf), which adds additional features. Using the Template as a guide, create your own Design Persona for your web site. To see what a well crafted person looks like, see this one for MailChimp (.pdf).

When completing your Design Persona, think carefully about the typography readings and what we have discussed in class about personality and design. Try to incorporate your Why statements, as well. These are key indicators of who you are and if you want your site to be a person, it should showcase at least the second Why.

Your design personas are due on Friday, but start thinking about them now. Bring TWO PRINTED copies of your persona to class on Friday.

M 11/5: Walter, chapters 1, 2, and 3, on Emotional Design; Simon Sinek
Resume Final Draft and Reflections Due by 11:00pm

Assignment for Wednesday, 11/7
Please read Walter, chapters 4 and 7, and  Boaz on White Space, and be ready to discuss them in class. Also continue looking for web sites that you think have a clear personality. Start working on your Design Persona (see above for templates). Group 1, Blog 3 is due on Wed.

W 11/7: Walter, chapters 4 and 7;  Boaz on White Space
Group 1 Blog 3 Due
F 11/9: Coding Friday: Design Personas
Handout out Grid-Based Responsive Professional Site Assignment

Week Twelve: Images and Grid-Based Design

Assignment for Monday 11/12
Please read through the Grid-Based Responsive Professional Site Assignment, which we will discuss in class on Monday.

Please also read Duckett, chapter 6 and Marcotte, chapter 3 on images.

Come to class with a large image that you can experiment with a bit.

If you have yet to complete your design persona, please complete it by Monday. Don’t forget to complete your weekly Story of Learning update and comment on blog posts.

M 11/12: Duckett, chapter 6; Marcotte, chapter 3; on Images
W 11/14: More on images
Group 3 Blog 2 Due
F 11/16: Marcotte, Chapter 2; Grid Systems, Sketches, and Layouts; sample-grid-sizes.pdf; grid-fun.docxCoding Friday: Layouts and Sketches

Week Thirteen: Navigation and Thanksgiving

M 11/19: Navigation
W 11/21: No Class — Thanksgiving
F 11/22: No Class — Thanksgiving

Week Fourteen: Page Setup and Accessibility

M 11/26: Creating Inner Pages

Assignment for Wednesday, 11/28
Please read all the readings under the Usability and Accessibility Readings header on the Readings page. It is below the main list of readings.

In class on Wednesday, we will discuss accessibility and experiment with many of the techniques.

Group 3 Blog post 3 is due on Wednesday. If you have not been keeping up with your blog comments and/or your Story of Learning weekly updates, please try to catch up on those.

W 11/28: Accessibility
Group 3 Blog 3 Due

Assignment for Friday, 11/30
For this assignment, I’d like you to locate the Accessibility features on your computer and learn the basics of how to use the screen reader (all operating systems now have accessibility features and screen readers).

Once you started learning how to use the screen reader, completely lower the brightness on your computer and attempt to go to Amazon.com and put one of your holiday wish items in your shopping cart.

We’ll discuss your experiences in class. Good luck!!


F 11/30: Coding Friday: Accessibility

Week Fifteen: Coding Final Pages

M 12/3: Working on Professional Site
Project 2 Rough Draft Due by 11:00pm
W 12/5: Class cancelled for Conferences
F 12/6: Class Cancelled for Conferences

Week Sixteen: Final Week

M 12/10: Final Questions and Wrapping Up

Wednesday, 12/12: Thursday, 12/13: Project 2 Final Draft and Reflections Due by 11:00pm
Friday, 12/14: Saturday, 12/15: Final Story of Learning due by 11:00pm

Comments are closed.