About the Course Calendar

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

We meet as a full class unless the schedule reads, “Meeting Individually.”

Week One: Introductions: Meet as Full Class

M 8/24: Introductions, Syllabus, Book

Assignment for Wednesday, 8/26
Please read through the course web site carefully and post two questions you have about it to this anonymous form:

https://forms.gle/5mrp32Mv7uPmV8Yz9

Also read through the Zoom etiquette responses I will email your section by 3:00pm today. We’ll be using these in class on Wednesday.

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

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

If you have any other questions, please let me know!

W 8/26: Brief intro; 10:10 Section Zoom Discussion Word Doc (coding-groups-zoom-1010-section.docx), 11:15 Zoom Discussion Word Doc (coding-groups-zoom-1115-section.docx)
F 8/28: Get to know each other; Syllabus questions

Assignment for Week Two
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 $30 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 will need to have the URL hosted by them, as well.

To check the status of your URL, or your Domain, log in to Reclaim Hosting and then hover over the Domains menu item and click on My Domains:

You must have your URL with you for your individual meeting with me during Week Two.

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 check your email for a link to the Online Individual Meetings schedule I shared with you on Friday. I have also linked to it from the Readings and Texts page.

If you have any questions, please do not hesitate to email me.

Week Two: Accounts and Story of Learning

M 8/31: Meeting Individually
W 9/2: Meeting Individually
F 9/4: Meeting Individually
Hand Out Story of Learning Assignment

Week Three: First Look at HTML and Student Guests

Assignment for Wednesday, 9/9
There is quite a bit below, so please read carefully.

On Wednesday we will meet as a full class to start talking about HTML and CSS. To prepare for that, I’d like you to PRINT OUT and have with you these two documents:

• sample-html.pdf
• sample-style-css.pdf

It may seem counterintuitive to have printed code to look at, but when learning code, it is VERY useful to have printed sheets that you can take notes on. It also allows you to have in a single field of vision the code and the sample web site that will be up on your screen. So, I am requiring this document and will require others to be printed. Connected to this, please read “The Importance of Web Standards.”

Please make sure you have downloaded each of the required software applications (see above homework). At the start of class, have Firefox Developer Edition open with this Sample Page open. Please have all other software and applications closed. Coding is complex; and we want to remove distractions.

If during our individual meetings, you needed to contact Reclaim Hosting about your URL, by Wednesday, please email me with the results, including your URL.

If you need to clone and move your WordPress install, please watch use this tutorial to do so by Wednesday:

In class on Friday, we will have prior Web Design students visiting to talk about their experiences in the class and respond to questions you have. By 11:00pm Wednesday, please add two or three questions using the Questions for Student Guests form you have you’d like the students to address. I’ll collate and prepare them for Friday, but I’ll need a day to do that, which is why I’d like them posted by Wednesday 11:00pm.

On Thursday, I shared with you your My Story of Learning GoogleDoc. That document is only available to me and each individual student; no one else can see it. If you are new to the Story of Learning, please watch the below video which introduces the Story of Learning assessment system. If you have used the Story of Learning in the past, please note that there is a new section called “Engagement and Presence.”

If you have any questions after watching the video, please don’t hesitate to send them to me.

Part 1 and your first weekly updates are due this Friday.

M 9/7: Labor Day — No Class
W 9/9: Sample HTML Code
F 9/11: Student Guests
Story of Learning Part 1 Due

Week Four: Intro HTML and Workflow

Assignment for Monday, 9/14
Your My Story of Learning Part 1 and your first weekly update are due by 11:00pm on Friday evening. For your Weekly Updates, students often worry that there is nothing to write about because they haven’t “done” anything, meaning that they haven’t created or designed anything. Use the space to write about what you have learned and thought about the class so far.

The assignments for this week are going to introduce you to your first HTML coding and the process of transferring your newly coded files to the server so you can them on the web. There are two videos for the week.

Please watch them in the order they appear below; the first is needed in order to understand the second. Take your time as you work through these videos and the coding below and for the other days. It can be tricky to get at first, but over time it will appear more natural. Don’t skip steps; with coding that leads to confusion. If you have questions or have trouble through any steps in the process, please let me know.

Though we are meeting in individual groups next week, you are responsible for completing the required work for the day it is due — even if your individual meeting is not on that particular day. I will check that it is done. It is due by the time class would usually start.

The Videos

This video will introduce you to the concept of servers, how we transfer files to the server, and web design workflow. The video covers:

0:00: What happens when you go to a web page using a browser and how servers function
6:00: Differentiating between The Internet and The World Wide Web
8:10: The Web Design Workflow (including creating your web design folder)
17:10: Starting the list of Best Practices 18:12: Transferring files from our computer to the server using FileZilla
27:50: Code, Save, Upload, Refresh, Repeat

This video will introduce you to how to setup your FTP account, connect to and use FileZilla, and start using Brackets. The video covers:

0:00: Getting the FTP account set up in Reclaim Hosting
4:00: Logging in to FileZilla using your FTP login info
9:25: Getting started with Brackets and creating your index.html page
11:30: The standard HTML skeleton for an HTML page
15:50: Using FileZilla to upload files to the server
17:35: Refreshing Firefox Dev Edition to see the coded page (YAY!) and repeating the process

The Coding Assignment
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.

Then, Save the page in your web design folder as index.html. Note, all lowercase folder and file names.

When complete, upload your new index.html file to the public_html folder on your server using the Web Design Workflow steps in the videos above.

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 if we meet on Monday we’ll talk about it. If we don’t meet on Monday, email me immediately so we can set up a time to meet.

M 9/14: Meeting Individually

Assignment for Wednesday, 9/16
Please read Duckett, chapters 2, 3, and 4. In the “index.html” file you worked on for 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. As part of the lists you create, I’d like you to create ABSOLUTE links to 3 web pages that are important to you.

As always, email me any and all questions you have.

W 9/16: Meeting Individually

Assignment for Friday, 9/18
In Brackets, please create a new file called “portfolio.html.” by going to File –> 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. As a reminder, see 11:30 in the “Setting Up and Using FTP and Brackets video above. 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.” (See Duckett ch 4 for relative linking.)

As always, email me any and all questions you have.

F 9/18: Meeting Individually

Week Five: Images, Accessibility, and Review HTML5

Assignment for Monday, September 21
Week Five is going in introduce us to adding images, accessibility, and HTML5. As a result, there will be three videos to watch, which I will add with the assignments for each day. Please take notes as you are watching the videos, just as you would in class, so that it is a more active and less passive viewing experience.

Before watching the video for Monday, please read Duckett on Images, pages 95-102 and 107 – 118. Then, find a photo of yourself that you feel comfortable putting online and rename it something meaningful, using no spaces and all lowercase letters, including in the extension (jpg instead of JPG, for example). Important: the image must be a .jpg, .png, or .gif; no other file format will work.

Then, watch the video.

The Video


This video will introduce you to coding images in HTML, organizing your directory, and a bit of FTP review. The breakdown:

0:00: Review of the basic HTML skeleton for all pages
4:25: The basic code for images
7:20: Review of Code, save, upload, refresh, repeat, and Best Practices
8:15: Organizing the directory and creating the images folder
14:00: Breaking down the image code according to directory structure and more Best Practices
26:35: Coding the image again in Brackets and uploading it to the server

The Assignment
After watching the video, please complete the steps as outlined in the video:

1. Create a directory (folder) in your web design folder called images (all lowercase).
2. Put the image you have selected into that folder.
3. Create a directory in your public_html folder called images (all lowercase).
4. Re-code your index.html file to make it more friendly to someone who is coming to your site. You might explain that you are coding for a class and add a link to your blog, if you’d like. Personalize, in other words.
5. Add to your index.html file the code for your image, as explained by Duckett and in the video. (You don’t need to add anything to the portfolio.html file.)
6. Upload your updated index.html file to the server.
7. Upload your image to the images folder on the server.
8. Refresh Firefox Dev edition and see what happens!

M 9/21: Meeting Individually

Assignment for Wednesday, 9/23
Now that we have added images to our page, we need to think about accessibility. That is, how users who have visual impairments are able to understand both that there is an image on the page and what the image looks like. The goal in accessible design is to provide those with visual, auditory, and other impairments with a commensurate user experience. The video introduces a few ways to ensure that happens.

For this homework, please watch the video and then complete the assignment.

The Video

This video introduces the concept of Access First Design, how to create appropriate ALT and Title text for images, and accessible links. It covers:

0:00: Access First Design
4:40: Defining ALT and Title Text
9:15: First example of ALT and Title text
13:45: Second example of ALT and Title text
18:00: Creating accessible links
22:20: Final thoughts on accessibility and Human Centered Design

The Assignment
Using the video as a guide, please add descriptive ALT text and appropriate TITLE text to all of your images.

Please update your links to add appropriate TITLE and anchor text (or, the part that you click on).

ALL future images must include ALT and TITLE text and all links must include appropriate TITLE and anchor text.

As always, if you have any questions, please let me know.

W 9/23: Meeting Individually

Assignment for Friday, 9/25
The assignment for Friday is going to give you an opportunity to review what you have learned so far, reflect on how you are feeling about what we have learned so far, and provide me with some additional insight about where each one of you are at.

At noon on Wednesday I will be emailing you an html file, tags.txt, which asks you to follow some prompts by adding the necessary code. For example, you will see:

<!-- PUT THE APPROPRIATE OPENING AND CLOSING TAGS AFTER THE DESCRIPTION -->

<!-- unordered list --> ADD RESPONSE HERE
<!-- ordered list --> ADD RESPONSE HERE

All you need to do is replace ADD RESPONSE HERE with the appropriate code. There are also a few questions to respond to.

This is not a quiz, nor are you expected to have memorized any of the code. It is merely a moment share what you have learned and reflect a bit. You are welcome to use the book. The book’s index is extremely helpful. I recommend completing it by yourself, however, because it will give you a better insight into what you, yourself, knows.

To complete the assignment, follow these steps:

1. Download tags.txt to your computer USING CHROME OR FIREFOX. DO NOT USE SAFARI!!!!!!!!!!
2. Open it in Brackets and then save it to your web design folder as tags.html.
3. Complete the document, saving as you go.
4. Upload it to your public_html folder on the server by 11:00pm. I’ll be able to find it and look at it after that.

If you have any questions, let me know.

F 9/25: Meeting Individually

Week Six: Emotional Design, Simon Sinek, Diversity in Tech

Assignment for Monday, 9/28
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.

Please read through the Project 1: Responsive, Accessible Portfolio Assignment. Come to class with questions.

Don’t forget to complete your Story of Learning Weekly Update.

We meet as a FULL CLASS on Monday.

M 9/28: Emotional Design and Found Portfolios; emotional-design-notes.docx
Release Project 1: Responsive, Accessible Portfolio Assignment

Assignment for Wednesday, 9/30
Please complete the emotional-design-notes.docx that we may or may not have started in class on Monday. Answering these questions will be very important as we begin to create a personality for our site. You will be adding to this document based on the Sinek video below and another assignment for Friday. Please have it ready with you in class on Wednesday.

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 add to the Emotional Design notes document two of your Why? statements. 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.

Remember, we meet as a full class on Wednesday.

W 9/30: Simon Sinek and the Golden Circle
Release Design Persona Assignment

Assignment for Friday, 10/2
The assignment for Friday is on the subject of diversity in the tech industry, a subject of great importance. It will further our discussions on being intentional in your design and career choices. Please read the articles by Sara Harrison (2019), Olu Niyiawosusi (2020), and the “Creating a Diverse Technology Ecosystem: A Comprehensive Solution” section (pages 23 and 24) of the report by Allison Scott and co-authors. (The report is fascinating, so you might be interested in reading the whole thing.) See Readings and Texts page for links.

Then, I’d like you to look up the diversity statistics of the field you hope you join one day. (If you are unsure what you want to pursue, you can look up communications, marketing, or web design.) You can just search, “[your field” + diversity statistics.” Based on what you find, complete the following questions under a “Your Possible Future Field” heading in the emotional-design-notes.docx we started for Wednesday:

What are the demographics of your potential future field? Try to find statistics from 2017 or later. Break them down by (if possible) at least race, gender, gender identity, and age. What do these statistics tell you about the diversity of your possible future field?

What kind business are you hoping to work for? Women or minority owned? Why and what do you think the benefit would be working for that kind of business?

What would need to be part of their mission statement to make you want to choose them? If you are interested in starting your own business, how will you show your commitment to diversity and inclusion?

Be ready to discuss the articles and have the answers to the questions ready in class.

F 10/2: Diversity in the Tech Industry

Week Seven: HTML5, CSS, Color Theory, and Typefaces

Assignment for Monday, 10/5
There is quite a bit for Monday. Please follow the instructions exactly as written and complete it in order.

1. Go back to your emotional design notes document and look to the content section.
2. Choose the two of the most important content items you wrote about and add them to your portfolio.html file using the appropriate HTML code. These should be images. If your item is a PDF doc, for example, take a screenshot of it, change the file name to something meaningful, and add it to your images folder that is in your web design folder. (Please do not include videos just yet because we have not learned how to embed them.) Make sure you upload the image to your images folder.
3. Add three levels of headings to your page:
   1. <h1></h1>: your name;
   2. <h2></h2> the word Portfolio;
   3. <h3></h3>, used twice, once for each of the titles a each of your portfolio items.
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 role 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 to the public_html folder (make sure you’re not putting in the images folder).
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 HTML5 codes in the appropriate places:
   • <header></header>
   • <section></section>
   • <figure></figure>

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

   If you have any questions, please let me know.

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

M 10/5: Meeting Individually

Assignment for Wednesday, 10/7
The videos for Wednesday cover HTML5 and the beginnings of CSS. The HTML5 video is so you can verify that you have coded the homework for Monday correctly. The CSS video is for all students. It introduces the Cascading Style Sheets, discusses how to conceptualize what is happening when the browser is reading both .html and .css files together to lay out a web page, and highlights some very basic CSS coding. Both videos were created with the understanding that you will also read Duckett, so please be sure you are doing that, as well.

The Videos

The video covers:

0:00: Introduction to HTML5
2:45: Breaking down <section> and <header> tags
9:08: HTML Comments and adding notes in your code for yourself
10:58: Breaking down the <figure> tag

The video covers:

0:00: Introduction to CSS and Envisioning the relationship between .html and .css files
3:00: The stylesheet code that links .html and .css together
10:58: Creating the styles folder (or directory) in FileZilla
11:55: Adding the stylesheet code to your .html file in Brackets
14:05: Creating the main.css file in Brackets
15:01: Coding a basic CSS page with color and uploading the files to the correct directories
30:30: What to look for when your page isn’t displaying as you think it should

The Assignment
If you have not yet completed the homework for Monday, please do immediately using the HTML5 video as a guide.

After watching the CSS video, make sure you have created the following that was described in it:

• the styles folder (or directory) in the web design folder on your computer and the public_html folder (or directory) on the server
• the main.css file saved to your styles folder
• the stylesheet linking code in the <head></head> section of portfolio.html
  <link rel="stylesheet" href="styles/main.css" text="text/css" />
  (Note, if you copy and paste this code from here, make sure the “” are square and not rounded. Rounded ones will cause it not to work.)

When that is complete, please read Duckett 227 – 237 (ignore 238 and the rest of chapter 10 for now) and chapter 11, which introduce stylesheets (CSS) and how to style color in various ways (ignore the CSS3 stuff for now).

Please note that though we are working in the portfolio.html file right now, we are just testing out the CSS code and colors and playing a bit. Once you have your design persona finished, you’ll be changing the colors based on what you wrote in it.

Please try to style color to the following selectors in your new main.css file:

• body
• h1
• h2
• h3
• p
• li

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.

W 10/7: Meeting Individually

Assignment for Friday, 10/9
The video and assignment for Friday will continue to expand our introduction to CSS by focusing specifically on styling fonts and lists.

To prepare for the video, I’d like you to read read Duckett chapter 12 on text and chapter 14, only the content relating to lists. Please also read Santa Maria, chapters 3 and 4, on Web Typography (see the Readings page). This is a wonderful text that really digs into typeface, so read it carefully. (If you haven’t studied typeface before, I also encourage you to read chapters 1 and 2.)

The Videos

This video introduces you to Google Fonts and how to code Google Fonts into your HTML and CSS files. It covers:

0:00: Introduction to the Google Fonts web site
6:50: Selecting a Google Font and Coding it in to your site

This video introduces how to size and display fonts using CSS. It covers:

0:00: Introducing font-sizing
1:15: On the font-family property
3:12: On the text-align property
4:00: On the font-size property and intro to Ems
9:05: On the letter-spacing property
11:10: On the line-height property
12:25: Pointing to additional font-related properties in Duckett

This video introduces sizing using the EM size unit. The video covers:

0:00: Introduction to Ems
2:25: Calculating Ems in terms of Pixels
2:50: Getting started with Ems, what to keep in mind
4:20: Calculating various Em sizes

The Assignment
Now that you have watched the video on using Google Fonts and the basics of styling fonts, I’d like you to complete the following:

1. Go to Google Fonts and select TWO Header fonts and ONE body font that you can experiment with for Friday (You will be more deliberately choosing font combinations for your Design Persona; this is just to experiment and play).
2. Using the video and Duckett as guides, code in your Google Fonts and then style your h1, h2, h3, p, and li selectors with the following:
   1. font-family:
   2. font-size: (use ems, as in the video)
   3. letter-spacing: (use ems, as in the video)
   4. line-height: (use ems, as in the video)
   5. anything else you’d like to try from pages 279 – 282 in Duckett
3. Style your ul or ol with:
   1. list-style-type: (page 333 in Duckett)

Be sure to upload your portfolio.html and main.css to the correct locations on the server.

Remember, Duckett is a wonderful resource for the kinds of things we are styling and the last page of his book is designed to to help you. It is a list of dozens of CSS Properties with page numbers so you can easily find you need.

I will be checking everyone’s web sites on Friday to see how you’re doing with the week’s work, so be sure you are keeping up with it. As you can see, we’re moving faster now.

If you have any questions, please let me know!

F 10/9: Meeting Individually

Week Eight: More on CSS

Assignment for Monday, 10/12
There is no reading or coding for Monday, since your Design Personas are due by 11:00pm on Monday in the Google Drive folder that Bill shared.

Class is not meeting on Monday, but if you would like to schedule time to meet with Bill individually, email him to set up an appointment.

Remember to complete your Story of Learning weekly update.

M 10/12: Meeting time reserved for students who need additional help
Design Persona Due by 11:00pm in the Google Drive folder Bill shared

Assignment for Wednesday, 10/14
We will be meeting as a FULL CLASS on Wednesday and Friday. Please mark your calendars.

This evening I spent some time going through each of your web sites and I’m quite thrilled with what I’m seeing in terms of you trying and succeeding in implementing the CSS and fonts. So great!

However, because many students are behind, I have made some changes to the course schedule. Please take note and adjust your calendars accordingly.

I STRONGLY recommend that if you are behind, you email me immediately so we can schedule times to meet to help you with whatever issues you are having. You should also plan to attend as many Open Codings as you can. I am more than willing to meet with you repeatedly, so please take the risk (if it is for you) and email me. Asking for help in this class is celebrated, not shamed, so please reach out.

There is no video or assignment for Wednesday, as I’d like those of you who are behind to use this time wisely and to get as caught up as you can so that by this Friday, 10/16,  you have completed all of the coding work due up to last Friday.

In class on Wednesday we are going to spend some time looking a the personality of fonts and will break into our coding groups, as I’d like you to start meeting with your groups beginning next week.

W 10/14: Full Class Meeting; fonts and meeting with coding groups

Assignment for Friday, 10/16
Since our Project 1 rough drafts are due next week, we’re going to start the week by setting up the CSS and HTML5 template files we need in order to complete the project. Those files are located on the Project 1 assignment page under the Preparing Your Files header. The first video for this week walks you through the process of setting up those templates.

The Video
The below video walks you through the process of setting up the Project 1 template files. Please go through the video methodically, pausing it as you accomplish each step, then returning to it for the next step, and so on. This will help ensure you don’t miss a step along the way. Each step is extremely important, so follow the instructions exactly as described. 

The Assignment
Complete all of the steps in the above video and come to class with your template files set up and your code applied appropriately.

F 10/16: Full Class Meeting; persona to code and meeting with coding groups; persona-to-code.docx

Week Nine: Boxes, Floats, and Divs

Assignment for Monday, 10/19
We will be meeting as a FULL CLASS all next week. This is a change to the course calendar. Complete all work by the start of class.

This week we are jumping into more advanced CSS by thinking about layout and positioning. Doing this means talking about boxes, divisions, and floats, three of the more challenging concepts in CSS. But, once you get them you will be well on your way to designing the layouts of most sites. As with everything we’re doing, we’ll be going step by step through the process. Our video for Monday covers Boxes.

To prepare for the videos, please read Duckett Chapter 8 and Marie Mosely on Box Sizing. Much of it may be over your head, which is okay. You’ll start to get it soon.

The Videos
The first video introduces the concept of boxes, otherwise known as the Box Model. The model includes your content area, padding, borders, and margins. Please watch it and take detailed notes.

[detailed breakdown to be added]

The second video discusses how to style boxes–it should be seen as a compliment to what you have read in Duckett, not a substitute for it. See below for how I’d like you to work along with the video.

• 0:00: Intro and review of the box model
• 3:30: Adding the box-sizing code
• 6:50: Centering boxes
• 10:25: Styling margins
• 12:50: Styling padding
• 16:22: Styling borders
• 21:15: Styling the img tag
• 24:15: Styling the body tag

The Assignment
First, make sure you have complete the persona-to-code.docx document, which we started in class. One you’ve completed it, transfer the code from the document to your new main.css and see how your page is starting to come together.

After watching the first video, I’d like you to follow along with the second video by completing the following (It will help having Duckett chapter 8 open, as well):

1. Copy the appropriate code from Marie Mosely’s article on Box Sizing and paste it in to the appropriate part of main.css, as described in the video.
2. Add the necessary code to ensure centering boxes on your page, as described in the video
3. Style margins, padding, borders, images, and the body, as appropriate, and as discussed in the video

Try sending questions you have to members of your coding group, and if they aren’t able to help, send them my way and bring additional questions you have to class to talk about with your coding group.

This is a VITAL week of class; try to keep up and not to be absent.

Don’t forget to complete your Weekly Update in your Story of Learning.

M 10/19: Full class meeting (boxes)

Assignment for Wednesday, 10/21
The assignment for Wednesday is going to introduce you to positioning elements on your page using class/id and float. These are important concepts to learn, as they will use them whenever you code more advanced layouts. The first video introduces you to the concepts—watch it carefully and take notes—and the second video walks you through their implementation.

To prepare for the videos, please read in Duckett: pages 181 – 186, and 369 – 376. You will also need to have open this document: floating.docx.

The Videos

This video introduces the concept of positioning elements on your page using class/id and float. It covers:
[to be added]

This video walks you through adding class/ids and floats to your HTML and CSS page. It covers:
[to be added]

The Assignment
Please complete the steps in the second video so you come to class on Wednesday with your portfolio items side by side, using floating.docx. as a guide.

If you have any questions, please let me know.

W 10/21: full class meeting (class/id and float)
Project 1 Rough Draft Checklist (.pdf)

Assignment for Friday, 10/23
The first requirement in Project 1 is your page should “contain a writer, artist, or professional statement based on your Why, How, and What statements composed in and for class.” You used or adapted your Why statements in your Design Persona.

For Friday, I’d like you to code into your portfolio.html page your “writer, artist, or professional statement based on your Why, How, and What statements.” Place the statement above your side-by-side portfolio items. Code and style it using appropriate HTML5 and CSS tags.

I’d also like you to come to class having gone through the Project 1 Rough Draft Checklist (.pdf), checking off all that you have completed and noting anything you are unsure of or have questions about. 

Your rough draft is due Friday at 11:00pm. Your Midterm Story of Learning is due on Saturday. If you missed class on Monday when I went over it, it is essential that you talk with someone in class about it. Midterm conferences are next week. Look for a signup sheet invitation. I’ll also be emailing you a sample story of learning.

Please direct all your coding questions first to your coding group; I’d like you to really start using the group as a resource. If they are unable to help, send them my way.

F 10/23: Full class meeting
Project 1 Rough Draft 1 due by 11:00pm
Saturday, 10/24: Midterm Story of Learning Due by noon

Week Ten: Midterm and Rough Draft Conferences

M 10/26: Class Canceled for Midterm and Rough Draft Conferences
W 10/28: Reading Day — No Class
F 10/30: Class Canceled for Midterm and Rough Draft Conferences

Week Eleven: Responsive Design

M 11/2: Meeting Individually as a Full Class; responsive-video-f20.docx

Assignment for Wednesday, 11/4
The assignments for Wednesday and Friday are going to help you transition your page from one that is just designed for the computer screen, to one that is designed for phone, tablet, and computer screens. In other words, it will become responsive. There is one video, but it will be used for both Wednesday and Friday.

The Video

This video on responsive design covers:

0:00: Review of the main.css stylesheet
4:35: Creating sketches for phone and tablet screens
12:50: Moving from sketches to code
16:20: Completing the preparing-for-phone-tablet-f20.docx handout to help you move your code
22:35: Removing redundancy from your code
29:00: Coding the phone screen
31:30: Uploading and viewing the changes in Firefox Dev Edition
35:20: Concluding remarks

The Assignment
For Wednesday, first please first read “A Reference Guide For Typography In Mobile Web Design” by Suzanne Scacca, playing close attention to her discussions on fonts, font-sizing, and screen real estate (that is, how to take advantage of space on a small screen). The first 1/3 of the article is more intro to design-in-general stuff. It’s really well-written and -presented, but you can scroll through it if it’s review. Definitely start reading in earnest at the heading, “Typography For Mobile Web Design: What You Need To Know.”

Then, please watch ONLY 0:00 – 22:35 of the above video and complete the sketches and the preparing-for-phone-tablet-f20.docx handout, as I did in the video. It might be useful for you to complete the sketches and the handout by hand and not on the computer, which is just fine.

However you choose to complete them, please bring the three numbered sketches and completed handout to class with you. Use Scacca’s discussions on mobile design to inform your phone and tablet font sizing. I am going to be asking you why you decided to size things the way to have and it would be great to hear responses that reference Scacca.

If you want to take a risk and try to add some of your phone and tablet codes to your main.css, go ahead and see what happens!

In class we went over adding responsive video to your portfolios, by using the responsive-video-f20.docx tutorial. Please continue to work on that.

If you have any questions, please let me know.

W 11/4: Meeting Individually as a Full Class

Assignment for Friday, 11/6
Please watch the remainder of the Preparing for Responsive Design video you’ve been watching this week (22:35 – end), which covers removing redundancy from your code, coding the phone screen, and uploading the changes.

For Friday, please complete the process as discussed in the video. That is

• reduce the redundancy of your code
• transfer your code from the preparing-for-phone-tablet-f20.docx handout to the main section of your main.css file
• and style your phone screen

If you feel confident, also style your tablet screen, as well.

We will discuss your progress in class.

If you have questions, please first direct them to your coding group and if you’re still stumped, send ’em my way.

F 11/6: Meeting Individually as a Full Class
Final Project 1 Checklist (.pdf)

Week Twelve: Phone and Tablet Design

Assignment for Week 12
This week we will be meeting individually to discuss Project 1 Rough Draft 2. For Rough Draft 2, you should try to complete everything on the Final Project Checklist (.pdf), which includes coding for all 3 screen sizes and validating your code.

We have not yet discussed validating code, but I have a video about that, which you can watch below. To validate your code, you’ll have to install theWeb Developer Toolbar Extension in Firefox Developer Edition (if you haven’t already).

If you have any questions, please address them to your coding group first and then email me and/or have them ready for your meeting. Note, if your conference is later in the week, it is best to email me rather than wait.

Don’t forget to complete your Story of Learning Weekly Update.

The Video

This video discusses strategies for checking for errors and validating that your code is correct using online validation tools and the Web Developer Toolbar. It covers:

0:00: Installing the Web Developer Toolbar Extension in Firefox Developer Edition
1:35: Error Checking Steps
3:00: Validating HTML using the Web Developer Toolbar
6:00: Validating CSS using the Web Developer Toolbar
13:15: Additional Error Checking in the Code
16:30: Review of Using Responsive Design Mode and Talking About Mobile Features

Note that the last minute or two vanished when I was editing, so the video ends rather abruptly, but that was just final parting words.

M 11/9: Meeting Individually
Project 1 Rough Draft 2 due in meeting
W 11/11: Meeting Individually
F 11/13: Meeting Individually
Sat 11/14: Project 1: Responsive, Accessible Portfolio Page and Reflections Due by 11:00pm
Release Project 2: Responsive, Accessible Professional Web Site

Week Thirteen: Project 2: New Front Page

Assignment for Week 13
This week we begin to expand our site out from the portfolio page by creating and coding an About page (about.html), a Contact page (contact.html), and your Home page (index.html), as well as adding a responsive navigation bar. please see the Project 2: Responsive, Accessible Professional Web Site assignment page for details.

We you start to envision your full site, I’d like you to start thinking about the possibility of adding more advanced coding features and design elements to your page. You will see on the assignment page a section of ideas for how to go beyond what is required on your web site. I want you to seriously take ownership of your site and your design ideas. Though there are requirements, such as having the full-image front pages, I want you to make your site your own by adding new features, as you’d like. On Monday, 11/23, we’ll be revisiting some prior student web sites to see what they chose to do, but I also want you to look at features of web sites you like and try to figure out some things they were doing that you might want to try to implement.

But, first, we need to get the pages set up so you can begin. These videos will get you started.

The Videos

This video discusses Project 2, styling links, and creating your about.html and contact.html pages. It covers:

0:00: Introduction and a review of Project 2: Responsible, Accessible Professional Site assignment
4:20: How to style links (this is review)
9:30: How to create about.html and contact.html
17:00: How to create and embed your form using the free form creating site, Wufoo

This video describes the process of creating full screen images for your homepage on all screen sizes. It covers:

0:00: Introduction and minor Project 2 Assignment Updates
2:37: Sizing images for phone, table, and computer screens
7:33: The project templates and how to copy them
9:35: Detailed discussion of the index.html template
12:27: Detailed discussion of the imagehome.css template and styling the text
21:15: Styling the images

The Assignment
For students meeting with me on Monday, I’d like you to have completed all the work in the first video and get as far as you can with the second video. It would be ideal if you have at least your computer screen image working. But see what you can do by Monday and be sure to finish it by Wednesday. I will be posting another video on Wednesday on navigation.

For students meeting with me Wednesday and Friday, please complete all the work in both videos by Wednesday, as I’ll be posting another video for work to be completed by Friday.

If you have any questions, please direct them first to your coding group if they can’t answer, to me.

Don’t forget to complete your Story of Learning Weekly Update.

M 11/16: Meeting Individually
W 11/18: Meeting Individually

Assignment for Friday, 11/20
The video for Friday will help you add navigation to your page. You’re actually going to be adding TWO navigation bars, one that controls the navigation on the phone and tablet screens, the other that controls the navigation on your computer screen.

In the process you will learn how to HIDE elements from a screen, which is handy to know in case you want to reduce the amount of content on your phone screen, for example, to make your have less scrolling.

The Video

This video on navigation covers:

0:00: Introduction to navigation
2:00: Getting the nav.css template (see assignment page or code page) and discussing how reset styles work when you have multiple stylesheets styling one html page
4:57: Explaining the navigation code in index.html
7:43: Explaining the navigation code in nav.css
13:35: Adding navigation code to about.html, portfolio.html, and contact.html
18:33: Making edited to the nav.css and main.css to make sure the mobile nav bar doesn’t cover your name
28:35: Adjusting nav bar colors to make them unique for the index.html and inner html page computer views (this is rather advanced coding and is not required, but I wanted to show you how you can make sure page-specific changes)

The Assignment
Please complete the steps outlined in the video by Friday. If you have your individual meeting on Friday, have this completed by the start of your meeting. If you had your individual meeting Monday or Wednesday, complete it by the end of the day on Friday.

If you have any questions, address them to your coding groups first and then to me, if needed.

F 11/20: Meeting Individually

Week Fourteen: Contact and About Pages

Assignment for Monday, 11/23
We meet as a FULL CLASS on Monday.

We have come to the part of the semester where your web sites are now fully in your hands. Though there are requirements on the assignment page and there will be a checklist to ensure you have those requirements, you are now encouraged to build on those requirements and make the site your own by expanding your site out to additional portfolio-related pages, trying more advanced designs, and other design and content features (perhaps as you wrote about in your Design Persona).

To help you think of ideas, I’d like you to look at the portfolio examples you found weeks ago, as well as prior Web Design student web pages, and come to class with up to 3 design or aesthetics features you’d like to to try implement on your site. Those features should consistent with the brand traits you described in your design personas. You can find prior semester pages at:

• Spring 2020
• Fall 2019
• Spring 2019

Note that the farther back you go, the more likely the web sites will, sadly, no longer be active.

To complete the assignment, please:

1. Even if you have yet to complete all the videos for the past week, go through past student web sites or other web sites you like and find up to three design or aesthetic features you’d like to try to implement.
2. View the web page source code and see if you can figure out how that feature was implemented.
3. If you can figure it out, try to implement it on your site.
4. Be ready to talk about it in class, as I’d like everyone to show one feature they liked and want to try to implement.

Next week I’ll have some additional videos up for you on the following topics:

• positioning logos
• having more than two boxes next to each other in a row
• background images

Don’t forget to complete your weekly update.

If you have any questions, please address them to your coding group first and then me, if needed.

M 11/23: Full Class Meeting
W 11/25: Thanksgiving — No Class
F 11/27: Thanksgiving — No Class

Week Fifteen: Project 2 Drafts

M 11/30: Meeting Individually
Project #2 Rough Draft Due
Final Project Checklist (.pdf)
W 12/2: Meeting Individually
F 12/4: Meeting Individually
Last Class Day of the Semester