GDS 45 - Web Design - Online
Weekly Instructions
Fall 2018 - Section 75216


Aug. 27 - Week 1 Instructions:

  1. Download the syllabus in Canvas from the class home page near the top if you don't have it.
  2. Watch the video orientation. The current syllabus will be slightly different from the one in the video.
  3. Read the General Class Information in Canvas (https://wvm.instructure.com). It may be slightly different than the video or syllabus.
  4. 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 Content Links module. 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.
  5. Assignment - Please take the opening day survey in the week 1 module in Canvas.
  6. Search online for a deal on Creative Cloud Photography plan, which includes subscriptions to Photoshop and Lightroom, which you can use for the class. We do use photoshop in the class. See the syllabus for other options, like if you would like the student rate for the complete Adobe CC subscription. As far as I know at this time, the best deal for the complete Adobe CC can currently be found at http://store.collegebuys.org/
    1. Adobe software like Photoshop and Lightroom is also available in the Academic Support Center on Campus. Check their web site for current hours. http://missioncollege.edu/depts/academic_support/
  7. Read Chapters 1 and 2 in Learning Web Design.
  8. Read the file under Day 1 Terms in the week 1 module.
  9. Assignment 1 - First Page: Create your first web page by watching the video on Creating a basic web page. 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 files. 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.htm. Make sure to read the note on the video page about the hgroup tag. Have fun! Check the calendar for due dates.

Sept. 3 - 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 pages 1-7 in the Principles of Beautiful Web Design. It is about the web design process.
  3. Also take a look at the Phases of production from the book Web Redesign Workflow that works. See it at http://www.gotomedia.com/goto/redesign/
  4. Optional:
    Take a look at this video
    and this page from GDS46 Web Design and Development 2 on the Web Design Process(youtube video).
  5. Assignment 2 - Text Formatting Tags: Create your second web page by watching the text formatting tags video tutorial. Please recreate the page exactly. 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.htm. 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.

Sept. 10 - Week 3 Instructions:

  1. Please take this student survey first this week. It helps us in scheduling classes, funding, etc. If you have already filled it out this semester in another class, you don't need to do it again. Thanks.
    1. https://www.surveymonkey.com/r/GDES2
  2. 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.
  3. Read the rest of Chapter 1(you already read pages 1-7) and Ch. 2 of The Principles of Beautiful Web Design, 3rd Edition. They are about layout and color.
  4. Take a look at the file Dos and Don'ts of web design in the weekly module(Optional).
  5. 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
  6. Watch the video on Web Design Mistakes(youtube video). Some of the featured awesome websites are linked below.
  7. 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
  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. Also comment on posts about websites posted by other students.
  9. Review pages 303-315 in Learning Web Design about color and the hexadecimal system. A bit of the same material is in Ch.2 of The principles of Beautiful Web Design.
  10. Check out these pages on color schemes and color pickers. Some of these are also mentioned in your reading.
    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 and color intro video tutorial. The bullet3.png file needed for the page is in the weekly module. 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.

    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.
    1. Don't forget to zip your folder with your files(see above)
    2. Don't forget 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.
    3. Note: The dl tag in the video used to refer to a dictionary list or definition list. The meaning of the dl tag has been slightly modified to mean a description list in HTML5. Also, the dd tag now is a description or value in a description list.

  12. Start Assignment 4 - 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

    Check the calendar for due dates.


Sept. 17 - Week 4 Instructions:

  1. Finish Assignment 4 - 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
  1. Make sure to take the student survey, if you haven't already. It helps us in scheduling classes.
    1. https://www.surveymonkey.com/r/GDES2
  2. Review Chapters 4 and 5 in Learning Web Design. Chapter 5 covers many of the text tags we have been using.
  3. Make sure you have read Chapters 1 and 2 of The Principles of Beautiful Web Design, 2nd Edition. They are about layout and color.
  4. Read pages 1-16 of the file Building Usable Web Sites(usable_sites.pdf) in the week 4 module.
  5. Watch the video on HTML 5 Semantic Elements. There is no assignment associated with this video, but the information could come up later...hint, hint ;)
  6. Important! Read Ch. 11 of Learning Web Design for an intro to CSS.
  7. 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
  8. Here are some good online references for CSS
  9. Assignment 5 - Basic Page with Containers: Follow along and create the page in the video GDES 45 Basic Page with HTML 5 Containers (youtube video. You will also use the file you create as a starting point for later assignments.
    • 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.
  10. Read pages 17-30 of the file Building Usable Web Sites(usable_sites.pdf) in the weekly module.
  11. Watch the video on RGBa color. There is no assignment to turn in for this video.
    The file in the lessons module on Color using the hexadecimal color or RGB, and background color transparency goes along with the video. Also look at CH. 13 and specifically page 271 of Learning Web Design for a description of RGBa, which can be used to make your background colors partially transparent.

Sept. 24 - Week 5 Instructions:

  1. Review Chapters 6 in Learning Web Design on links.
  2. Assignment 6 - Links and File Paths: Create 2 web pages by watching the Links and File Paths video(This video is on youtube). Recreate the site exactly as the one in the video. Chapter 6 in Learning Web Design also can help. Name the files as in the video. The names of your files must match the names in your links, or the links will not work.
    Make sure to check the code image in the weekly module for differences from the video since there may be a couple of code issues in the video.
    Always make sure to check your file for errors by submitting it to the W3C validation services at http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/
    • To turn in the assignment:
    • Before you zip the folder with your files, test the site before you send it make sure all the links work.
    • 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 your 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.
  3. Check out this page on using the html 5 figure and figcaption tags to place a caption next to an image. Using these tags also gives you more tags to use as hooks for CSS styles. Click the Try it Yourself link near the top to see it in action.
    You can see another example here.
  4. Start Assignment 7 - Resume or Reading Summary. There are examples in the weekly module.
    Full requirements and instructions listed here
    . Check due dates on the calendar. If you have general questions, ask them in the discussion forum in Canvas.
  5. Don't forget, if you have questions, or just interesting links or observations, post them in the discussion forum in Canvas. It is part of your grade ;)