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 9. 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/26: Introductions, Syllabus, Books

Assignment for Wednesday, 8/28
Please read through the course web site carefully and come to class with any questions you have.

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

• Brackets plain-text editor (free)
• Firefox Developer Edition (free)
  • FileZilla (free)
  • Web Developer Toolbar Firefox Add-on (free)
• Image-editing software (such as the free and open-source GIMP)
• As many different browsers as your operating system supports (e.g., Chrome, Opera, Firefox; all free)

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. We will not be using WordPress for your web site, so do not create a URL using WordPress.

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

Week Two: Web Standards and Getting Started

M 9/2: Class Canceled — Labor Day

Assignment for Wednesday, 9/4
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 use, 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 country 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/4: URL verification; Web Standards; Maps; Doug Engelbart; SRI Timeline

Assignment for Friday, 9/6
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, 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/6: Coding Friday: FTP, servers, text editor, workflow

Week Three: Intro to HTML and Workflow

Assignment for Monday, 9/9
Please read Duckett, chapter 1, on the structure of an HTML page. When completed, I’d like you to try to code a very basic page, copying the code that Duckett presents on page 20. Copy the code 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/6. 

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, Log In, and 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 FileZilla 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.

M 9/9: Duckett chapter 1, Structure; Coding a page structure
Hand out Story of Learning Assignment

Assignment for Wednesday, 9/11
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.

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

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

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

Assignment for Friday, 9/13
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 “portfolio.html.” In Brackets, go to Fine –> New to create the new file and then Save As, and save “portfolio.html” to your web design folder.

In portfolio.html, code the base structure of an HTML page, including the <html></html>, <head></head>, <title></title>, and <body></body> tags in the right order. Use clean coding techniques. Then, add your name as a header, using proper coding.

Then, create a RELATIVE link from “index.html” to “portfolio.html” and one from “portfolio.html” to “index.html.”

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/13: 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; Images and Accessibility

Assignment for Monday, 9/16
Please read Duckett on Images, pages 95-102 and 107 – 118. Then, find a photo of yourself that you feel comfortable putting online and, using Duckett’s reading as a guide, add it to your index.html page.

Part 1 of your Story of Learning was due on Friday, so if you did not complete it, please do. Your Weekly Update was also do.

If you have yet to comment on blog posts, please complete that, as well.

M 9/16: Duckett on Images, pp 95-102, 107 – 118

Assignment for Wednesday, 9/18
Please read Clark Chapter 3 and Chapter 6. The readings are on the Readings page under the Usability and Accessibility Readings. 

I’d like you go back back to your index.html file you were using and add title and alt text to two images, using the techniques that Clark describes. The goals of title and alt text is to help users who are blind or have images turned off have a commensurate experience on your web site.

We’ll discuss and share out title and alt text in class.

W 9/18: Clark, Ch 3 & 6, on image accessibility

Assignment for Friday, 9/20
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 an item in your shopping cart.

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

F 9/20: Coding Friday: more on images an accessibility
Group 2 Blog 1 Due

Week Five: HTML5, Emotional Design, and Design Personas

Assignment for Monday, 9/23
There is quite a bit for Monday. Please complete it in order.

1. I’d like you to think about work you have completed that could become a part of your online portfolio. This could be graphic designs or varying kinds, photographs you have taken, documents you have designed—anything you think you would want someone to see so they understand the work you can do and the software/hardware you know how to use.
2. Locate 2 portfolio items and add them to your portfolio.html file using the appropriate code. These should be images. If your item is a PDF doc, for example, take a screen shot of it, change the file name to something meaningful, and add that to the page. Please do not include videos just yet because we have not learned how to embed them.
3. Directly above each portfolio item, add a level 2 heading with a title for the work.
4. Directly under each portfolio item, include the following:
   1. A brief paragraph in which you describe the item you have created, if it was created for a particular community partner, your goals for it, and your roll in creating it (sole creator, part of a team, etc.).
   2. Under the paragraph, include an unordered bulleted list where you list
      1. the software and/or hardware used (such as the camera)
      2. any camera settings that were used
      3. creation date
      4. any custom pallets or shortcuts you created for the project
      5. a link to download a PDF version of it (if applicable)
5. Save and upload your updated portfolio.html file.
6. Then, please read pages 429 – 439 in Duckett on HTML5. After reading, please go to your newly updated portfolio.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.

M 9/23: HTML5

Assignment for Wednesday, 2/25
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.

AFTER completing the reading I’d like you to start thinking about your own 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.

Walter discusses the Design Persona process on pages 35 – 47. On pages 36 and 37 he lists the key sections of a Design Persona. We will be creating our own design personas, so stating thinking about that now. The assignment will be handed out on Friday.

Group 3 Blog 1 is due on Wednesday.

W 9/25: Emotional Design; emotional-design-notes.docx
Group 3 Blog 1 Due

Assignment for Friday, 9/27
Please read Walter, chapters 4 and 7, and Boulton (2007) and Muller (2012) on White Space, and be ready to discuss them in class. Also continue looking for web sites that you think have a clear personality. Caviar, for example, has personality:

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.

Story of Learning Weekly Updates are due Friday by 5:00pm.

F 9/27: Simon Sinek and Design Personas
Hand out Design Persona Assignment

Week Six: Intro to CSS, Color Theory, and Typography

Assignment for Monday, 9/30
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). We’ll start using CSS in class on Monday, though if you wish to try to create a stylesheet, give it a go!

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 design persona, use the readings and the color wheels to help you select a color theme based on the personality you want your page to have.

Remember to comment on blog posts and to complete your weekly Story of Learning update.

M 9/30: Duckett Chapters 10 and 11, Color Theory readings

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

In class, we started coding our main.css stylesheet. Continue experimenting with CSS by adding styles for your lists, as well as font styles, based on the readings.

Please also 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.

W 10/2: Duckett Chapters 12 and 14 (lists only); Typography readings
Group 1 Blog 2 Due
F 10/4: Coding Friday: Working on CSS; styling online fonts
Hand out Responsive Portfolio Assignment

Week Seven: More CSS

Assignment for Monday, 10/7
There is no reading for Monday. Your design personas are due by class time. Bring two copies with you to class.

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

M 10/7:  Working on CSS: sizing, colors, and fonts. persona-to-code.docx
Design Personas Due in Class

Assignment for Wednesday, 10/9
Please read Duckett Chapter 8 and Marie Mosely on Box Sizing. These are important readings that will help us move forward with creating complex designs. We’ll be talking about this in class on Wednesday and Friday.

If you did not complete your design to code sheet in class, please complete that and transfer the codes to the new version of main.css.

Group 2 Blog 2 posts are due on Wednesday, as well.

If you have any questions, please let me know.

W 10/9: Duckett Chapter 8 and Box Sizing
Group 2 Blog 2 Due

Assignment for Friday, 10/11
Please code your new portfolio.html page by either copying the content from portfolio-old.html to portfolio.html or by completely recoding the enter page. If copying, only copy the code between the <body></body> tags and paste it between the <body></body> tags. You’ll also need to update the line of code that controls the stylesheet and add the GoogleFont code to the appropriate location. Make sure your code is clean, meaning that is is spaced and indented to enhance readability.

Make sure you have actual portfolio items include in the page — many students I knew were using temporary images as placeholders until they chose their portfolio items.

When done, upload the new portfolio.html and main.css to the server.

Complete this work before getting to class so we can immediately begin talking about floats and divs.

Remember to comment on blog posts and to come to open coding!

If you have any questions, please let me know.

F 10/11: Coding Friday: more on CSS boxes, plus floats and divs

Week Eight: Responsive Design

M 10/14: Fall Break — No Class
W 10/16: More on floating and divs; intro to responsive design; floating.docx
Group 3 Blog 2 Due

Assignment for Friday, 10/18
Please read Marcotte, chapters 1, 2, and 4 on media queries, and Scacca on typeface and font for mobile devices.

Based on our discussion in class on Monday, please come to class with stacking strategies for each of your 3 layouts. As we discussed in class, they can look like this (from here):

Break your portfolio items and statement down by <section></section> , number them, and think about how you want the sections positioned on each device (phone, tablet, computer). 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 last week.

Looking at your phone stacking, please attempt to style for your phone. 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.

If you feel like taking the chance, try to style your tablet size, as well.

F 10/18: Coding Friday: Marcott chapters 1, 2, 4 on Responsive Design; portfolio-final-draft-checklist.pdf
Discuss Midterm Story of Learning

Week Nine: Portfolio Draft Conference Week

M 10/21: More on Responsive Design and Validation Testing
W 10/23: Class Canceled for Portfolio Draft Conferences
Portfolio Draft due before conference time
F 10/25: Class Canceled for Portfolio Draft Conferences
Midterm Story of Learning Due

Week Ten: Midterm Conferences

M 10/28: Class Canceled for Midterm Conferences
W 10/30: Class Canceled for Midterm Conferences
F 11/1: Class Canceled for Midterm Conferences

Week Eleven: Grids and Sketching Layouts

M 11/4: Final Portfolio Questions
Final Portfolio Project and Reflections due by 11:00pm
W 11/6: Work on portfolio
Final Portfolio Project and Reflections due by 11:00pm
Group 1 Blog 3 Due
F 11/8: Wufoo and links

Week Twelve: New Home Page / Background Images

Assignment for Monday, 11/11
For class on Friday, I’d like you to have three versions of an image (or three separate images) that tells a story about who you are without having any additional accompanying words. The versions should be at least the following sizes:

• for the phone: 1366px width × 2048px height
• for computer and tabletscreens: 2048px width × 1366px height

Name the images appropriately, add them to your images folder, and upload them to your images folder on the server.

We will be working with them as soon as we get to class, so don’t wait to do this when you get to the classroom.

M 11/11: new front page; imagehome-html-and-css.pdf

Assignment for Wednesday, 11/13
If we did not get to do this in class, or if you did not complete the process, please complete for Wednesday.

1. In Brackets, open your index.html.
2. In Firefox Dev Edition, go to Bill’s new home page and view the source.
3. Copy all of the source code from Bill’s new page.
4. Go to your index.html, delete all of your old code, and paste in the code you have just copied. Change the name and tagline to your own, as well as the <title></title> text. Save the file and upload to the server.
   1. If you want to save your old index code, first save the file as a different name, then re-open your index.html and complete step 4.
5. Go back to the source code and click on the link for the imagehome.css file.
6. Copy all of the imagehome.css code.
7. Go to Brackets and select File –> New. Then paste in the code. Save it to your styles folder as imagehome.css.
8. Go through the code and change the image file names to ones that match the images you want to use. You should have uploaded the images to your images folder for class on Monday.
9. Save imagehome.css and then upload it to your styles folder on the server.
10. Go to your web site and see what happens. If you don’t see any change, refresh the page.
11. If things are not working, go back through the steps and make sure you have followed them exactly and that the correct files are uploaded to the correct locations.
12. If all is working okay, start adjusting the colors, fonts, and position of your name and tagline. Remember to add the GoogleFonts code line to your index.html so you can see your GoogleFonts.

Group 2 Blog 3 is due on Wednesday. If you forgot to complete your Story of Learning update last week, please complete it.

W 11/13: more on the new front page
Hand out Responsive, Accessible Professional Site Assignment
Group 2 Blog 3 Due
F 11/15: Coding Friday: Navigation and Footer; nav-contact-sample.pdf

Week Thirteen: Background Images and Professional Site

Assignment for Monday, 11/18
Using similar techniques as you used to create update your index.html file with new code and create your imagehome.css file, which you then adapted to your own needs, I’d like you to do the same by adding navigation to your index.html and contact.html, as well as add a footer to your contact.html.

Look to billwolffsju.com for the code we discussed in class on Friday. You will need to create a nav.css, too, so be sure to do that, add the appropriate css link to your html files, and upload all files to the correct server folders. Remember, the footer is actually styled in main.css, so please style it in yours, as well.

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

M 11/18:  Work on Professional Site
W 11/20: Work on Professional Site and Mini Tip 1: Responsive Video Embed (responsive-video.docx)
Group 3 Blog 3 Due

Assignment for Friday, 11/22
I’d like you to come to class with wireframe sketches of your about, contact, portfolio (if you will be redesigning it), and any other page you wish to design (you do not need to have your index page). In each of the boxes you create, include a very brief description of the content that will appear within it, as well as the names of any font that will be used. The more specific you are with your designs and what will be included where, the easier it will be as you start coding the various pages.

Group 3 Blog 3 was due on Wednesday, so please start commenting. These are the last posts of the semester.

Open Coding will be scheduled as usual: Wed 2:30 – 3:30 and TH 11 – 12.

F 11/22: Work on Professional Site and Mini Tip 2: Background Patterns

Week Fourteen:

M 11/25: Work on Professional Site and Mini Tip 3: reducing redundancy redundancy.css.pdf; sample why statements 
W 11/27: Thanksgiving Break — No Class
F 11/29: Thanksgiving Break — No Class

Week Fifteen:

Assignment for Monday, 12/2
Have a complete draft of your full web site created by the time class starts on Monday, including fully coded about, contact, portfolio, and index pages. Fix any validation errors you can.

Do not wait until class to start coding the full site. Have it completed by class time.

M 12/2: Work on Professional Site
Professional Site Draft 1 Due in Class
W 12/4: Class Canceled for Conferences
Professional Site Draft 2 Due Prior to Conference Time
F 12/6: Class Canceled for Conferences

Week Sixteen:

M 12/9: Last Day of Class

T 12/10: Open Coding Day, 9:30 – 11:30 and 12:00 – 3:00

Th 12/12: Final Professional Site and Reflections Due by 11:00pm
Sat 12/14: Final Story of Learning Due by 11:00pm