GDS 45 - Web Design - Online
Weekly Instructions
Fall 2021 - Section 71710 - Asynchronous


Aug. 30 - Week 1 Instructions:

  1. Note: If you have not done this already, try to figure out a regular(maybe daily)time when you can work on the class. It can help in online classes. Procrastinating is not advised ;)
    There are some other good tips for online learning here at
    8 STRATEGIES FOR GETTING THE MOST OUT OF AN ONLINE CLASS
  2. Login to Canvas (https://wvm.instructure.com) and download the syllabus in Canvas from the class home page near the top if you don't have it.
  3. Watch the video orientation. The current syllabus will be slightly different from the one in the video.
  4. See the class links sidebar on this page for Canvas and online learning related links.
  5. Read the General Class Information in Canvas (https://wvm.instructure.com). It may be slightly different than the video or syllabus.
  6. Please let me know if you are confused or having trouble with the material. Your first option is to post in the question discussion forum in Canvas. Click on Discussions on the left in Canvas to find the forum. If your question is more personal, you can message me through Canvas (https://wvm.instructure.com), by logging in, clicking on the class, clicking on the inbox link on the left, and creating a message. It's like email inside the class.
  7. Optional Office hours: Generally Mondays 4:30PM - 6:00PM and Tuesdays 10:30AM - 12:30PM through Zoom. Check the Announcements section in Canvas for links to the zoom office hours. You can talk to me live at those times to ask questions, etc.
  8. Assignment:
    Post in the
    "Introductions" discussion forum in Canvas. Give a short introduction to yourself, and about your expectations for the class.
    You can find the discussion forum under the Discussions link on the left or the Week 1 module under the Modules link. I will check this to verify you are in the class. Make sure to reply to the post as soon as possible to avoid being dropped.
  9. Assignment - Please take the opening day survey in the week 1 module in Canvas.
  10. Mission College tutoring is now online, and there is tutoring for some of our classes if you need it.
  11. We do use photoshop a bit in the class. See the syllabus for more options, but as far as I know at this time, the best deal for the complete Adobe CC can currently be found for $40/semester at http://store.collegebuys.org/
    • Adobe software like Photoshop and Lightroom are usually available in the Academic Support Center on Campus(not currently available due to Covid-19). Check their web site for current hours. http://missioncollege.edu/depts/academic_support/
    • Please let me know if you do not have adequate computer hardware, internet access, or can't afford the $40 for the Adobe software.
  12. Read Chapters 1 and 2 in Learning Web Design. You should be able to get FREE ACCESS to the books from Oreilly Safari Books Online. See below.
  13. Read the file under Day 1 Terms in the week 1 module.
  14. Assignment 1 - First Page: Create your first web page by watching the 2 videos on Intro to Visual Studio Code(Duration 28:38) and Creating a basic web page (Duration 50:51). The videos were made in the opposite order, but the software situation changed this week(see below).
    • Update Sept. 1, 2021: Well, it looks like as of today, Brackets is now harder to download, since Adobe ended support today, so you should use VS Code to do the coding in the class. You can download VS Code here. I would watch the video on VS Code first and then use it to code this exercise, even though they were made in the reverse order. You should probably use VS Code on all the future exercises since it is becoming very popular, although technically you could use ANY text editor for the exercises. The videos were made with a variety of editors, but remember that the code is the same, no matter what editor you use. Sorry about the awkward transition today though.
    • Please recreate the page exactly. In later assignments, you will have more creative freedom.
    • Before you send me your files, always make sure to check your file for errors by submitting it to the W3C validation service at:
      http://validator.w3.org/. Click on Validate File by Upload near the top, then click the browse button, locate your file, and submit. It will point out some coding errors, if you have any. Another thing to do is to view the code source in Firefox(PC:control-U/Mac:command-u). Mistakes will often show up there in red text.
    • After correcting any mistakes, submit your final file. Drop the file in the Assignment 1 drop box in Canvas in the weekly module. Include your name in the file name as in firstname_lastname_page1.html.
    • Check the calendar for due dates.
    • Have fun!

Sept. 6 - Week 2 Instructions:

  1. Read Chapter 3 and 4 in Learning Web Design. Do the Ch. 4 exercises for practice if you wish. You do not have to turn these in.
  2. Read the pages in the short section in CH. 1 in the Principles of Beautiful Web Design on the Design Process. If you are reading the online version, you can read up until the "Defining Good Design" heading.
  3. Optional:
    Take a look at this video on the web design process
    and this page from GDS46 Web Design and Development 2 on the Web Design Process(youtube video).
  4. Assignment 2 - Block and Inline Tags: Create your second web page by watching the Semantic Markup with Block and Inline Tags video tutorial. Please recreate the page exactly. It has a LOT of things in it, and is a little long because of that, so feel free to stop in the middle somewhere and do it in phases.
    • Here are the files to start with.
    • You can use VS Code to make this file.
    • There is an image of the code in the Canvas module for this week, in case you want to compare your code to code in the video. Don't just copy the code from the image though, as you will miss a LOT of information :)
    • Don't forget to validate as you did with assignment 1 by checking the file at:
      http://validator.w3.org/
    • Click on Validate File by Upload near the top, and then click the browse button, locate your file, and submit.
    • Drop your file in the Assignment 2 drop box. Name the file page2.htm with your name in the file name as in firstname_lastname_page2.html.
    • Check the calendar for due dates.

      Important note on the videos: Some videos and files are in html5, while some might occasionally be in XHTML. It's a good idea to know both syntaxes, since you will see both on the web and both are viable. They are not all that different. Check out page 761 of Learning Web Design for xhtml markup requirements. This is in Appendix D for those using the online version of the book.

Sept. 13 - Week 3 Instructions:

Note: Tuesday online Office Hours are moving to Friday 10:30-12:30 for this week only.

  1. Read Chapter 5 in Learning Web Design. It is about basic tags for text. Do the Ch. 5 exercises for practice if you wish. You do not have to turn these in.
  2. Read the rest of Chapter 1(you already read pages 1-7) and Ch. 2 of The Principles of Beautiful Web Design. They are about layout and color.
  3. Optional: Take a look at the file Dos and Don'ts of web design in the weekly module.
  4. You can also check out these articles (Optional):
    1. Biggest Mistakes in Web Design 1995-2015 - from Web Pages That Suck where you learn good web design
    2. Checklist of bad web design Part Two from Web Pages That Suck Learn good web design by looking at bad web design
  5. Watch the video on Web Design Mistakes(youtube video). Some of the featured awesome websites are linked below.
  6. Check out these example bad websites for things not to do.
    1. http://www.angelfire.com/super/badwebs/
    2. http://www.arngren.net/
    3. http://www.supervideo.com/
    4. http://www.gatesnfences.com/
    5. 20 Examples Of Bad Web Design
  7. Check out this site on Accessibility for Designers. Accessibility is very important, often deals with making sites easier to "see" for the vision impaired, and is mandatory on some some sites, such as government sites. Also see the section on "ONE WEB FOR ALL (ACCESSIBILITY)" in Chapter 3 of Learning Web Design.
  8. Find a website you think is poorly designed and talk about why you think it is poorly designed. Post/reply under the forum Poorly Designed Websites in the weekly module in Canvas. Try to post your first post by Friday, then comment on posts about websites posted by other students by the due date.
  9. Review pages 303-315 in Learning Web Design about color and the hexadecimal system. You can search for it in Ch. 13 if you are looking at the online version of the book. A bit of the same material is in Ch.2 of The principles of Beautiful Web Design.
  10. Watch the video on Color and Color Schemes.
    The sites below are in the video.
    1. http://www.color-wheel-pro.com/color-schemes.html
    2. https://color.adobe.com
      This is a cool color picker and theme collection from adobe.
    3. http://colorschemedesigner.com/
  11. Assignment 3 - Lists: Create a web page by watching the Lists, Styles, Colors and More video tutorial.
    • Here are the files you need to start with.
    • For this assignment, please recreate the page exactly. In later assignments, you will have more creative freedom. Drop your files into the Assignment 3 drop box. Don't forget to include the bullet3.png file with your submission. If you forget, I won't see it.
    • To turn in assignments with multiple files or folders, it works best if you put all files in a folder and zip the folder. Canvas has changed how I receive files from students in submissions that are zipped. Because of this, it is important to name your folder correctly BEFORE you zip it to send, so I know who's folder it is. Please name you folder like this firstname_lastname_assignX where X is the assignment number. Then when you zip the folder, I will know it is yours.
    • Make sure to validate your files BEFORE you send them at:
      http://validator.w3.org/
      This will affect your grades, as I will do it too, and see if you have any errors that show up. Check the calendar for due dates.
    • Don't forget to zip your folder with your files. To zip the folder: To zip a folder on a PC, create the folder with your name on it like this firstname_lastname_assignX and put the files needed in it, then right click, select "send to," and finally "compresses (zipped) folder". On a mac, control click or right click on the folder and select compress. Remember to name the folder before compressing it, so I can see who's it is when it is uncompressed.
  12. Start Assignment 5 - Reading Summary which is:
    • Create 1 basic web page on your own with at least 6 different facts, opinions, or bits of information from the week 1 reading Ch 1-3 in Learning Web Design. Try to take at least 2 items from each chapter. Use the tags we we have gone over (html, head, body, h1, p, br, etc.). Check out Ch. 4 and 5 in Learning Web Design for help. There are samples to look at in the weekly module. Make sure to validate HTML at http://validator.w3.org/. You can validate CSS at http://jigsaw.w3.org/css-validator/. You should validate both to see if you can catch errors.
      Note:The validators may give you multiple error messages for 1 mistake, so you may not have as many errors as you think.
      Here are some examples to look at.
      They are also in the weekly module in Canvas.
    • I would suggest collecting the copy(text) you want to use in the assignment now, and create the page later using the template we are going to create in Assignment 4(next week). You can also create your own html page without using the template. Either is fine.

      Requirements:
      You must use the following tags, elements, or css styles at least once.

      1. a heading, h1 for example
      2. blockquote
      3. strong
      4. background-color
      5. a list

Sept. 20 - Week 4 Instructions:

  1. I am posting the new weekly materials for the following weeks a little early(Saturday or Sunday), so you can see a bit ahead. Make sure to check the calendar for due dates. Assignments should also show up under your To Do list on the canvas home page. Also, I usually finish grading within a week after the due date, often earlier, so check the gradebook for grades and comments periodically. I think you may get notifications on grades too, depending on your Canvas settings.
  2. Mission College tutoring is now online, and there is tutoring for this class if you need it.
  3. Reading this week(I know I listed a lot, but do what you can when you have time):
    1. Important! Take a look at Ch. 11 of Learning Web Design for an intro to CSS.
    2. Take a good look at Chapters 1 and 2 of The Principles of Beautiful Web Design. They are about layout and color.
    3. For more detail and background, review Chapters 4 and 5 in Learning Web Design. Chapter 5 covers many of the text tags we have been using.
  4. Watch the video on HTML5 Semantic Elements. There is no assignment associated with this video, but the information could come up later...hint, hint ;)
  5. Optional: Learning Web Design exercises 11-1 and 11-2: Complete Exercises 11-1 and 11-2 from Learning Web Design. You do not have to turn this exercise in, but you do need the information for later assignments. All book related files can be downloaded from http://www.learningwebdesign.com
    Here is a link to a page on CSS
  6. Here are some good online references for CSS
  7. Assignment 4 - Basic Page with Containers: Follow along and create the page in the video GDES 45 Basic Page with HTML 5 Containers. You can also use the file you create as a starting point for later assignments. Don't forget to validate your file before you turn it in! http://validator.w3.org/
    • Note: You can remove type="text/css" from the style tag in this exercise and if you see it other videos. It now causes a warning in the validator and is no longer required. I will not count it as a mistake either way, but you don't need to include it. Also, add the viewport meta tag so your page will scale better on mobile. It was not added in this video, but was in the Assignment 3 video. Always make sure it is present on your pages.
    • To turn in the assignment:
    • To turn in assignments with multiple files or folders, it works best if you put all files in a folder and zip the folder. Canvas has changed how I receive files from students in submissions that are zipped. Because of this, it is important to name your folder correctly BEFORE you zip it to send, so I know who's folder it is. Please name you folder like this firstname_lastname_assignX where X is the assignment number. Then when you zip the folder, I will know it is yours.

      To zip the folder: To zip a folder on a PC, create the folder with your name on it like this firstname_lastname_assignX and put the files needed in it, then right click, select "send to," and finally "compresses (zipped) folder". On a mac, control click or right click on the folder and select compress. Remember to name the folder before compressing it, so I can see who's it is when it is uncompressed.
    • Drop your zipped files into the Assignment drop box.
    • Check due dates on the calendar in Canvas.
  8. Finish Assignment 5 - Reading Summary which is:
    • Create 1 basic web page on your own with at least 6 different facts, opinions, or bits of information from the week 1 reading Ch 1-3 in Learning Web Design. Try to take at least 2 items from each chapter. Use the tags we we have gone over (html, head, body, h1, p, br, etc.). Check out Ch. 4 and 5 in Learning Web Design for help. There are samples to look at in the weekly module. Make sure to validate HTML at http://validator.w3.org/. You can validate CSS at http://jigsaw.w3.org/css-validator/. You should validate both to see if you can catch errors.
      Note:The validators may give you multiple error messages for 1 mistake, so you may not have as many errors as you think.
      Here are some examples to look at.
      They are also in the weekly module in Canvas.

      Requirements:
      You must use the following tags, elements, or css styles at least once.

      1. a heading, h1 for example
      2. blockquote
      3. strong
      4. background-color
      5. a list