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, January 27. 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 1/13: Introductions, Syllabus, Books

Assignment for Wednesday, 9/15
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 1/15: Sample HTML5 & CSS page; sample-html.pdf; sample-style-css.pdf
F 1/17: Design Journal Setup
Hand out Design Journal Blogging Assignment

Week Two: Web Standards and Getting Started

M 1/20: Class Canceled — MLK Day

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

Assignment for Friday, 1/24
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 to your server using FileZilla for the first time. To do so, follow this tutorial:

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

F 1/24: Coding Friday: FTP, servers, text editor, workflow

Week Three: Intro to HTML and Workflow

Assignment for Monday, 1/27
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, 1/24. 

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 1/27: Duckett chapter 1, Structure; Coding a page structure
Hand out Story of Learning Assignment

Assignment for Wednesday, 1/29
Please read Duckett, chapters 2, 3, and 4. 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. As part of the lists you create, I’d like you to create ABSOLUTE links to 3 web pages that are important to you.

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

W 1/29: Duckett, chapters 2, 3, and 4: text, lists, absolute links
Group 1 Blog 1 Due

Assignment for Friday, 1/31
On Friday former Web Design students will be joining the class to talk about strategies and tips for success in the class. Toward that end, I’d like you to come to class with 3 questions you would like the students to address. Please have them on a piece of paper you can turn in to me at the start of class.

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. 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.)

Group 1 blog posts are due by class on Friday as a result of the original blog being deleted.

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 1/31: Coding Friday: Student visitors; portfolio.html page check
Part 1 of My Story of Learning due by 11:00pm

Week Four: FTP and Workflow Review; Images and Accessibility

Assignment for Monday, 2/3
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.

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.

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 2/3: Duckett on Images, pp 95-102, 107 – 118

Assignment for Wednesday, 2/5
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 to your index.html file you were using, code two new images two new images that are not a portrait, and add title and alt text to then using the techniques that Clark describes. Please note that while Clark’s discussions are excellent, I believe he inverses what alt and title are. So, when composing yours, please apply his title guidelines to your alt text and his alt guidelines to your title text.

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.

Group 2 Blog 1 are due on Wednesday.

W 2/5: Clark, Ch 3 & 6, on image accessibility
Group 2 Blog 1 Due

Assignment for Friday, 2/7
Prepare for the quiz. Use the HTML Tags List to guide your preparation.

F 2/7: Coding Friday: Progress Quiz #1: HTML Foundations

Week Five:  Emotional Design, Design Personas, and HTML5

Assignment for Monday, 2/10
There are two parts to this weekend’s homework, so give yourself some time to complete it.

First, continuing our accessibility discussions, 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!!

Second, 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 start thinking about that now. The assignment will be handed out on Wednesday.

M 2/10: Emotional Design; emotional-design-notes.docx

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

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.

Group 3 Blog 1 is due on Wednesday.

W 2/12: Simon Sinek and Design Personas
Hand out Design Persona Assignment
Group 3 Blog 1 Due

Assignment for Friday, 2/14
There is quite a bit for Friday. Please 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 write about 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 screenshot 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. Add three levels of headings to your page: first, your name; second, the word Portfolio; third, two headings that are titles for the each of your 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.
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 portfolio as it looks in the browser.

   We’ll discuss more about HTML5 in class.

   If you have any questions, please let me know.

Story of Learning Weekly Updates are due Friday by 5:00pm. Group 3 Blog 1 posts are now online. Groups 1 and 2, please add your comments.

F 2/14: Coding Friday: HTML5

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

Assignment for Monday, 1/17
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 2/17: Duckett Chapters 10 and 11, Color Theory readings

Assignment for Wednesday, 2/19
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 site, 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 site. 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 2/19: Duckett Chapters 12 and 14 (lists only); Typography readings; styling online fonts
Group 1 Blog 2 Due
F 2/21: Coding Friday: TBD

Week Seven: More CSS

Assignment for Monday, 2/24
There is no reading for Monday. Your design personas are due by class time. Bring one printed copy to class.

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

M 2/24:  Working on CSS: sizing, colors, and fonts. persona-to-code.docx
Hand out Responsive Portfolio Assignment

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

Please review the Responsive Portfolio Assignment and if you didn’t finish setting up your template files, please complete that.

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 2/26: Duckett Chapter 8 and Box Sizing
Group 2 Blog 2 Due

Assignment for Friday, 2/28
Try to implement some of the box attributes we talked about today in class: border, margin, padding, and so on.

Come to class with a detailed sketch of how you’d like your portfolio page laid out, including spaces boxes for your name, navigation (which we will be getting to in unit 2), professional statement, the portfolio items, and the required summary and technical details. Your portfolio items must appear side-by-side, so be sure to have that as part of your sketch.

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

If you have any questions, please let me know.

F 2/28: Coding Friday: more on CSS boxes, plus floats and divs; floating.docx
Discuss Midterm Story of Learning

Week Eight: Portfolio Draft Conference Week

M 3/2: More on boxes, floats, and divs; portfolio-draft-1-checklist.docx
W 3/4: Class Canceled for Portfolio Draft Conferences
Portfolio Draft 1 due before conference time
Group 3 Blog 2 Due
F 3/6: Class Canceled for Portfolio Draft Conferences
Midterm Story of Learning Due

Week Nine: Spring Break March 9 – March 13 (extended to) 18

Have fun and be safe!

Course Updates
Significant changes to the schedule have been made as a result of moving the classes online. Please take note below and on the projects page and update your calendars accordingly.

Unless otherwise stated, class will meet in a Zoom meeting during every regularly scheduled meeting time. To access the class Zoom meeting space go to: https://sju.zoom.us/j/9222597171.

Blogging group 3 should complete their 2nd blog post (due 4/1), but thereafter, no additional blog posts or blog post comments will be due by any student in the class. If you are missing any blog post 1 and/or 2, post them by 4/1.

Please complete your Story of Learning Weekly Updates as usual.

Week Ten: getting back to things

F 3/20: Meeting in Zoom to talk about the rest of the semester; Validation Tools

Week Eleven: Responsive Design: Organization, Sketches, Video Embed

Week 11 Video and Assignment
Here is the video to be used for March 20 – 27:

The video is 42:00 minutes long, has 7 sections and covers the following topics:

1. 0:00 – Introduction
   Due for 3/23:
2. 2:20: Reviewing the CSS Template (main.css) we’re using
3. 6:50: Creating stacking sketches for Computer, Tablet, and Phone screens
   Due for 3/25:
4. 19:30: Moving from sketches to code using a Word doc I have prepared (preparing-for-phone-tablet.docx)
   Due for 3/27:
5. 27:00: How to handle overlapping / redundant code and moving code you the main.css file
6. 35:55: Uploading main.css to the server and viewing portfolio.html in Firefox Dev Edition
7. 40:00: Summary and Conclusion

Like all the weekly videos, it is designed for you to come back to and use throughout your work. Please have Sections 1 – 3 completed for 3/23. Section 4 for 3/25, and Sections 6 and 7 for 3/27.

In addition, if you are interested in embedding video on your site, please follow the tutorial at: responsive-video.docx.

If you have any questions, please email me.

M 3/23: Work on your sites
W 3/25: Work on your sites
F 3/27: Work on your sites

Week Twelve: Phone and Tablet Design

Week 12 Video and Assignment

This video for the week of March 30 covers:

• 0:00: Reading for the Week on Mobile Design
• 2:55: Installing the Web Developer Toolbar
• 3:33: Error Checking Steps
• 5:40: Validating HTML using the Web Developer Toolbar
• 8:24: Validating CSS using the Web Developer Toolbar
• 15:53: Additional Error Checking in the Code
• 19:13: 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.

The goal for the end of the week is to complete your portfolio page for all three screen sizes: phone, tablet, and computer. On Monday, I will be providing you with a Final Checklist.

You have two reflections due with your final page. See the assignment page for the reflection prompts and how to submit them.

M 3/30: Work on your sites
Hand out Final Portfolio Page Checklist (.pdf)
W 4/1: Work on your sites
Group 3 Blog 2 Due
F 4/3: Work on your sites
Sunday, April 5: Portfolio Page and Reflections due online by 11:00pm

Week Thirteen: Project 2: Contact and About Pages

Week 13 Video and Assignment

The video for this week covers the following:

• 0:00: Introduction and a review of Project 2: Responsible, Accessible Professional Site assignment (please read this over in full on your own, as well)
• 4:24: How to style links
• 9:33: How to create about.html and contact.html
• 17:05: How to create and embed your form using the free form creating site, Wufoo (you are required to use Wufoo for this)

As I previously announced, we will not be meeting at all this week, as a whole class or in individual meetings. Please complete this work by Wednesday afternoon and if you have any questions, please let me know.

I will be posting another video (or two videos) on Wednesday, which will be much more involved. So, it is important to get the work in the above video completed. Individual meetings will resume Tuesday, 4/14 (Tuesday has a Monday schedule).

M 4/6: Work on your sites
W 4/8: Work on your sites

Week 13 Video And Assignment, Part 2
There are two videos for this week, the first on styling and designing your new index.html page and the second on styling and incorporating the navigation bar. Please start working on these immediately; the videos are in-depth and the work is complicated and will take time. Start with video 1, break the work down into digestible stages, and then move to video 2, doing the same thing. Don’t try to complete it all in one sitting.

In this first video, I discuss the following:

• 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 (see assignment page or code page)
• 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

In the second video, I discuss the following:

• 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)

On Tuesday, 4/14 we will begin our 10 minute conferences again. Please complete the work in these videos prior to that meeting. Go as far as you can. If you get stuck, send me an email and let me know what is happening.

F 4/10: No Class — Easter Break

Week Fourteen: Project 2: Front Page

Week 14 Video and Assignment
No new videos. Just work on your site.

M 4/13: No Class — Easter Break
T 4/14: Class meets, work on your sites
W 4/15: Work on your sites
F 4/17: Work on your sites

Week Fifteen: Project 2 Drafts

Week 15 Video and Assignment
No new videos. Just work on your site.

M 4/20: Conferences
W 4/22: Optional 10-minute conferences
F 4/24: Optional 10-minute conferences

Week Sixteen: Project 2 Conferences; Last week of classes

Week 16 Video and Assignment
No new videos. Just work on your site.

M 4/27: Optional 10-minute conferences
W 4/27: Optional 10-minute conferences

Sunday 5/3 5/5: Final Professional Site and Reflections Due by 11:00pm
Tuesday 5/5 5/6: Final Story of Learning Due by 11:00pm for students taking the class for a grade; not required if taking it Pass/No Pass

 

 

 

 

 

 

Ignore the below content — it is there for Bill’s reference and will be removed as needed.

 

 

 

 

 

 

 

Week Eleven: Responsive Design

Assignment for Monday, 3/23
Please read Marcotte, chapter 1 on responsive design and : on typeface and font for mobile devices.

M 3/23: Marcotte, ch 1 on responsive design, Scacca on typeface for mobile
Portfolio Rough Draft #2 Due by Start of Class

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

W 3/25: More on responsive design, stacking strategies
Group 1 Blog 3 Due
F 3/27: Coding Friday: Quiz #2: CSS, Boxes, and Divs
Sunday, 3/29: Portfolio Final Draft and Reflections due by 11:00pm

Changes to the below schedule are very possible based on where we are as a class

Week Twelve: Begin Unit II, New Home Page / Background Images, Grids?

Assignment for Monday, 3/30
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 3/30: new front page; imagehome-html-and-css.pdf

Assignment for Wednesday, 4/1
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 4/1: more on the new front page
Hand out Responsive, Accessible Professional Site Assignment
Group 2 Blog 3 Due
F 4/2: Coding Friday: Navigation and Footer; nav-contact-sample.pdf

Week Thirteen: Background Images and Professional Site

Assignment for Monday, 4/6
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 4/6:  Work on Professional Site
W 4/8: Work on Professional Site and Mini Tip 1: Responsive Video Embed (responsive-video.docx)
Group 3 Blog 3 Due

Assignment for Friday, 4/10
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 4/10: No Class — Easter Break

Week Fourteen:

M 4/13: No Class — Easter Break
T 4/14: Class Meets — Work on Professional Site and Mini Tip 3: reducing redundancy redundancy.css.pdf; sample why statements 
W 4/15: TBD
F 4/17: TBD

Week Fifteen:

Assignment for Monday, 4/20
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 4/20: Work on Professional Site
W 4/22: Class Canceled for Conferences
F 4/24: Class Canceled for Conferences

Week Sixteen:

M 4/27:
W 4/29: Last Day of Class

TH 4/30: Open Coding Day, Times TBD

TBD: Final Professional Site and Reflections Due by 11:00pm
TBD: Final Story of Learning Due by 11:00pm