GDS 45 - Web Design -Mon/Wed Class
Weekly Instructions
Spring 2020- Section 30941

Hi. Welcome to this new online version of the class to use while Mission in-person classes are suspended

March 9 - Week 7 Instructions:

  1. Watch the quick intro video here.
  2. Please check in to the web design class by posting something to the discussion forum called "General or technical questions forum". I want to make sure everybody is now good to go in the online version of the class. You can post a comment, question, or interesting web design link or tidbit. Please try to comment by Friday night, and try to have a good weekend :).
  3. I am now planning on having a brief live online class meeting on Mondays and Wednesdays at 10:00AM during our normal class time. These are also office hours, so you can ask questions.

    You should see the meeting links in the conferzoom link in Canvas on the left

    Here is a link to the recordings of the live meetings.
    The first one has some issues since I didn't record right away and my internet went down for a minute.
    • I will go over the material for the week and lecture a little bit.
    • Please attend online if possible.
    • It will get you some extra credit points!
    • It will be using ConferZoom which is in Canvas.
    • Click on the link for ConferZoom in Canvas a bit before to setup zoom and login to the meeting.
    • Here is a link to the recordings of the live meetings. The first one has some issues since I didn't record right away and my internet went down for a minute.
    • Other online office hours location and times to be announced.
  4. For turning in Assignments in Canvas:
    To turn in assignments with multiple files or folders, it works best if you put all files in a folder and zip the folder. To zip a folder on a PC, create a 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 "compress (zipped) folder". On a mac, control click or right click on the folder and select "compress". Name the folder before compressing it, so I can see who's it is when it is uncompressed.
  5. Read Ch. 3 in The principles of Beautiful Web Design on texture.
  6. Be familiar with the information in Chapters 11 and Chapter 12 of Learning Web Design. They have more information on css and using css to format text.
  7. For practice, complete Exercises 12-1 through 12-6 from Learning Web Design. They are related to using selectors and formatting text which we covered. You do not have to turn in these files.
  8. Assignment 9 - CSS for text formatting: Create a web page by watching the video CSS for text formatting.
    Use this start file which has much of the code for the page(right click to download)    . Please recreate the page exactly. Make sure to validate HTML and CSS.     Drop your files into the Assignment drop box in Canvas. (Check due dates on the Canvas calendar.)
  9. Review Chapters 7, 23 and 24 of Learning Web Design. They have more information on web graphics and how to optimize them.
  10. Don't worry about Assignment 10. You kind of already did it Monday.
  11. Assignment 11 - Background Images (Optional Extra Credit):
    Watch and follow along with the video on Background image placement to recreate the page. Download the start files here. Be sure to include all image files with your submission. The images will not show up for me unless you send it along with your html files. See page 324 of Learning Web Design for more information. Drop your files into the Assignment 11 drop box. This assignment is optional and is worth 5 points extra credit. Check due dates on the Canvas Calendar.
  12. Discussion:
    Find a site on the web that uses background images in an interesting, creative way. In the discussion forum in the weekly module, post the URL of the site, and tell us why you think it is interesting. Also comment on a site posted by someone else. The discussion forum is called "Sites with interesting use of background images".
  13. Continue working on your 2 page website, now due March 30. Generally, check the Canvas calendar for updated due dates.

March 16 - Week 8 Instructions:

  1. Check out this page using opacity. View the source to see how it works.
  2. Check out this page using attribute selectors. View the source to see how it works.
  3. Be familiar with Ch. 13 of Learning Web Design. It covers more selectors, gradient backgrounds, opacity, and other goodies. Pay special attention to the Opacity attribute on page 315 of the print version and the Attribute Selectors on page 323 of the print version.
  4. There is a file in the weekly module on how to use min-width and max-width to limit the possible widths of your design, and also how to center your design. It should be somewhat of a review. It has comments to explain what's going on, and it could be very useful on some assignments, like the 2 page site;)
  5. Optional: Watch the video on Tables : Create a web page like the one in the video lecture by watching the video tutorial Tables and Practice with Background Images. You can use the image shown in the video for background images, or one of your own. Download the image to use for the exercise here. Always make sure to validate on http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/. This exercise is optional, but some of the information may be on the final. There is nothing to turn in for this assignment.
    1. For more information on tables, read Chapter 8 of Learning Web Design.
  6. Optional:Watch the video on Adding Text to an Image in Photoshop.
    Here is the start file if you want to follow along. You do not have to turn anything in for this exercise.
  7. Watch the video on the CSS Box Model.
    Here are the files if you want to follow along.     It will help with layout, borders, etc.
  8. Be familiar with the information in Chapter 14 of Learning Web Design. It has more information on the css box model.
  9. Complete Exercises 14-1 through 14-3 from Learning Web Design. They are related to the CSS box model and borders. You do not have to turn in these files, but will help a lot on later assignments.
  10. Optional: CSS Floats - Recreate the page from the video CSS Floats Basics.
    Use these start files which have much of the code for the page(right click to download). The start file may be slightly different from the video, accounting for some errors that were corrected. Don't worry about it. This is an optional exercise, and you do not have to turn in these files.
  11. Assignment 12(Don't worry about Assignment numbers) - 2 Column Layout with floats:
    Watch the video on Basic 2 Column Responsive Layout.
    Here is the start file(right click to download). Recreate the page in the video using the start file. The CSS float video on the video page can help if you are confused about floats. You an use the finished version of this exercise or the basic 2 column layout exercise as a start for Assignment 13. Make sure to validate HTML and CSS. Drop your files into the Assignment drop box. (Check due dates on the calendar.)
    Extra Credit:After creating the 2 column layout using floats by following the video above, complete the Basic 2 Column Responsive Layout with Flexbox exercise. Turn in BOTH versions in your submission for extra credit.
  12. Assignment: Take the Midpoint Survey in the weekly module
  13. Continue - 2 Page Site - This is listed as Assignment 13, but don't worry about the Assignment number: Create a 2 page web site about an item in the news. An item in the news would be something like elections, or a budget crisis. Create and use at least 1 "hero" image for the site. See this article for more info on "hero" images. Try to create a design that is both attractive visually and easy to use. For a layout, you can start with the basic templates we have done in class, GDES 45 Basic Page with HTML 5 Containers or Basic 2 Column Responsive Layout, or, create one from scratch on your own. If you want to try to use more advanced CSS to layout the page, you can look ahead to Chapter 15-18 in Learning Web Design. However, we will not completely cover some of these techniques for CSS layout together until later. This assignment will be graded both on the requirements below and on the design. There are examples in the weekly module and here. Remember, the images will not show up for me unless you send them along with your html files, so zip the whole folder with your site. Always make sure to validate on http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ before submitting. This is a longer term assignment. Check due dates on the calendar. The CSS Float video on the video page can help if you are still fuzzy on floats and want to use them to make columns for Assignment 10. Check the calendar for due dates.
    1. Requirements:
    2. 2 linked web pages are required.
    3. Create and use at least 1 "hero" image.
      • It can be in the header or the top of the body.
      • It can be either an inline image or a background image.
      • It can be from a stock photography site.
      • Do not use an image as you found it. Resize and optimize the image as needed.
    4. Use at least one other inline image in the content area. Remember to optimize your images. See Ch. 24 of Learning Web Design for more information on optimization.
    5. Use at least 1 background image(see Ch. 13 of Learning Web Design and the Background image placement video more info on positioning background images will be covered soon)
    6. Put some(or all) of your CSS styles in an external style sheet, and use external styles for most of your styles. See page 348 of Learning Web Design for and the Locations for CSS and basic selectors video for info on external style sheets.

March 23 - Week 9 Instructions:

  1. Here is a link to the files from the live demos this week.
  2. Watch the video on Basic Inline Responsive Images.
    • If you use narrow columns, like in the 2 column layout we did earlier, it can help prevent your images from leaking out of the columns.
    • There is no exercise due for this video.
  3. Optional Discussion:
    Check out this list of website galleries. Post the URL of a site that you liked from one of the galleries by Thursday, and tell us why. Also comment on a site posted by someone else by Monday, an see if you agree with their assessment and observations.
  4. Make sure you are familiar with the information in Chapter 15 of Learning Web Design. It has more information on the css positioning and CSS Floats.
  5. Watch the video on CSS Positioning.
    • Here is a page on CSS positioning mentioned in the video.
    • There is no exercise due for this video, but you do need to know the material.
    • Not in the video is sticky positioning, which makes the element change between relative and fixed. You can use it to make top navigation bars that do not scroll offscreen when the page is scrolled. Check it out in your Learning Web Design book and here.
  6. Watch this video on Using Web fonts. (There is a little surprise in this one. See if you can find it.) You do not have to turn anything in for this video, but it will help if you want to use custom web fonts. Feel free to use web fonts aon Assignemnt 13, but it is not required.
  7. Finish Assignment 13 - 2 Page Site: Create a 2 page web site about an item in the news. An item in the news would be something like elections, or a budget crisis. Create and use at least 1 "hero" image for the site. See this article for more info on "hero" images. Try to create a design that is both attractive visually and easy to use. For a layout, you can start with the basic templates we have done in class, GDES 45 Basic Page with HTML 5 Containers (youtube video) or Basic 2 Column Responsive Layout (youtube video), or, create one from scratch on your own. If you want to try to use more advanced CSS to layout the page, you can look ahead to Chapter 15-18 in Learning Web Design. However, we will not completely cover some of these techniques for CSS layout together until later. This assignment will be graded both on the requirements below and on the design. There are examples in the weekly module and here. Remember, the images will not show up for me unless you send them along with your html files, so zip the whole folder with your site. Always make sure to validate on http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ before submitting. This is a longer term assignment. Check due dates on the calendar. The CSS Float video on the video page can help if you are still fuzzy on floats and want to use them to make columns for Assignment 10.
    1. Requirements:
    2. 2 linked web pages are required.
    3. Create and use at least 1 "hero" image.
      • It can be in the header or the top of the body.
      • It can be either an inline image or a background image.
      • It can be from a stock photography site.
      • Do not use an image as you found it. Resize and optimize the image as needed.
    4. Use at least one other inline image in the content area. Remember to optimize your images. See Ch. 24 of Learning Web Design for more information on optimization.
    5. Use at least 1 background image(see Ch. 13 of Learning Web Design and the Background image placement video more info on positioning background images will be covered soon)
    6. Put some(or all) of your CSS styles in an external style sheet, and use external styles for most of your styles. See page 348 of Learning Web Design for and the Locations for CSS and basic selectors video for info on external style sheets.

March 30 - Spring Break! Try to relax.

I hope you are all well. We'll start again next week. If you are behind, you can catch up this week.

April 6 - Week 10 Instructions:

Live topics for Monday and Wednesday

  1. Intro Critique exercise
  2. Intro Animation Exercise
    • Look at examples
    • Demo Video Animation
    • Demo Frame Animation
  3. Look at Assignment 13
  4. Fitts law video
  5. The Cascade
  6. Review Ch. 14 of Learning Web Design
  7. Equal Height Boxes
    • Files are in the weekly module in Canvas
  8. Print styles
    • Files are in the weekly module in Canvas
  9. Selectutorial

On your own

  1. Read Ch. 4 in The Principles of Beautiful Web Design on typography.
  2. Watch the video lecture on Creating Equal Height Boxes and Cards. There is no assignment for this video(yay!), but some information may be on the final exam(boo!). Here are the files if you want to follow along.
  3. There is a new optional video on Photoshop Basics for beginners here..
    It could help with Assignment 14.
  4. Watch the video on Creating an animated gif from a video.
  5. Watch the video on Creating animated gifs in Photoshop, and follow along using the start files. This will help with Assignment 14. Do not turn this in.
  6. Assignment 14 - Creating an Animated Gif: Your assignment is to create your own animated gif using Photoshop that will promote a product for sale. Do not recreate the exact animation from the practice video, and do not create a gif from a video as in the second video. You can also look at the animated_gifs.pdf file in the weekly module, and Photoshop help under animation for tips. The requirements are below. There are samples to view in the weekly module. Drop your psd of your file and the final gif file into the Assignment 14 drop box. (Check due dates on the calendar.)
  7. Assignment 15: Using the file web_critique_criteria4_responsive_horizontal.pdf as a guide, evaluate another student's Assignment 13(2 page site) submission. The critique help file is in the weekly module.
    Here is the link to the Assignment files to use. There is another copy in the module in case the dropbox.com version isn't working. Critique the person's submission who is below yours. If you are at the bottom of the list, do the person's at the top. Look at their pages and come up with 5-10 comments, observations or suggestions to give them feedback on their design. The idea is to help them see the design with a fresh perspective, and improve their future designs. Again, you can use the file web_critique_criteria4_responsive_horizontal.pdf to help with ideas of things to talk about. Post your comments in the Assign. 15: Discussion Forum for critique of Assign. 13 in the weekly module. Make sure to say in your post title who's pages you are evaluating. You can also take a look at other submissions to see what other students did. (Check due dates on the calendar.)
  8. Check out this article if you are interested.
    This is how you’re going to become a UX designer

April 13 - Week 11 Instructions:

Live topics for Monday and Wednesday - Recordings of the live meetings are here

  • Intro Final Project - 30 min
  • Intro Lists for Navigation - 10 min
  • More web fonts - 20 min
  • Look at Assignment 14 Animations - 30 min
  • Meta tags - 15 min
  • More pseudo-classes intro like nth child from Ch. 13 - 15 min
  • Talk about Flexbox a little with some review of Ch. 16 of Learning Web Design - 15 min

On your own

  1. Mission College tutoring is now online, and there is tutoring for our department if you need it.
  2. Make sure you have read Ch. 4 in The Principles of Beautiful Web Design on typography.
  3. Create a free account at figma.com. You can use it to do wireframes for the final project. Here is the video Introduction to Figma for Wireframing.
  4. Get a free upgraded invision account to use to create prototypes for later projects.
  5. Write a post about something interesting you learned from Ch. 4 in The Principles of Beautiful Web Design, and post it in the discussion forum called "Post on Chapter 4 here", which is in the weekly module. Also, comment on at least one other person's post.
  6. Check out the first half of CH. 16 in Learning Web Design on Flexbox. We will be using flexbox a bit going forward for layout. Look at Exercise 16-1 for another example of using flexbox to create a navigation bar.
  7. Optional: Check out flexbox.io for more videos on Flexbox, which is becoming popular for layout.
  8. Assignment 16-1 - Lists for Navigation: Create a web page by watching video tutorial Lists as Navigation(the first one). Use this start file(right click to download). Please recreate the page exactly. Make sure to validate as always. You can validate CSS here. Validate HTML here. Drop your finished file into the Assignment 16 drop box. (Check due dates on the calendar.)
  9. Assignment 16-2 - Extra Credit - Lists for Navigation 2: Continue with your finished file from the previous exercise(16-1), and complete the 2nd video tutorial on List as Navigation 2 with inline-block and flexbox. Please recreate the page exactly. Make sure to validate as always. You can validate CSS here. Validate HTML here. Drop your finished file into the same Assignment 16 drop box.(Check due dates on the calendar.)
  10. Final Project: Begin Final Project.
    Make sure to check requirements and specifications in the edit project description(click here for description). Watch the video description here and on the video page.
    See samples of comps, creative briefs and final projects in the weekly module. There is a drop box for the comps or briefs in the lessons module. Don't worry about Beta Testing, although it is a great idea to show your design to others throughout the design process to get feedback from fresh eyes. (Check due dates on the calendar.) See assignment 17 below for an assignment related to the final project.
  11. Start Assignment 17: Turn in a Creative Brief, at least 5 Wireframes, OR at least 3 Comps for the final Project

April 20 - Week 12 Instructions:

Live topics for Monday and Wednesday - Recordings of the live meetings are here

Here are the weekly live demo files used in live class

On your own

  1. Make sure to read Chapter 16 of Learning Web Design, especially the first half on Flexbox. You might want to go through exercises 16-1 to 16-3, which would probably help with the final project. You do not have to turn these in though. BTW, we go over CSS Grid, which is the second part of the chapter, in the intermediate class. It is the wave of the future!
  2. Download this bonus chapter on using floats for layout if you want to use floats on your final project. It has some templates that could help you. As of now, floats are going away as a method of layout, but they are still all over the web. They are slowly being replaced by flexbox, CSS Grid and other newer layout techniques. You are welcome to use Flexbox or CSS Grid on the project, but we will not be getting to CSS Grid in this class.
    Detailed information on CSS Grid is in Learning Web Design Ch. 16. It is covered in the GDS 46 Web Design and Development 2 class.
  3. Optional:
    For the basics on using floats for layout, Watch the video Page Layout with Floats - Basics. It covers the basics of floats for layouts.
  4. Optional:
    Watch the video Page Layout with Floats - Example Fixed Layout. This is a slightly older video on how to create a fixed layout with Floats. Use this start file(right click to download) if you want to follow along.
  5. Optional:
    Watch this video on Media Queries. We used them a bit in some of the videos on layouts, and will use them more this week. The information will help with Assignment 18 and probably your Final Project. Download the source files here and follow along with the video if you wish. Dreamweaver is used in the video, but that is not important.
  6. To become familiar with Flexbox, watch this video on Display Options and Flexbox. It is a little advanced, but it will help with the exercise from this week which uses Flexbox. Download the source files here and follow along with the video if you wish. You do not have to turn this page in. Dreamweaver is also used in the video, but it can be done in any editor.
  7. Assignment 18 - Page Layout with Flexbox: Create a web page by watching the video tutorial on Responsive Layout with Flexbox. Please recreate the page exactly. Use this start file(right click to download). Drop your finished file into the Assignment 18 drop box. Make sure to validate as always. You can validate CSS here. Validate HTML here(Check due dates on the calendar.
  8. All 5 videos can help with the final project page layout, but you are only required to watch Display Options and Flexbox and Responsive Layout with Flexbox.
  9. Finish Assignment 17: Turn in a Creative Brief, 5 Wireframes, or 3 Comps for the final Project.
  10. Assignment 17.5: Create a prototype of your Final Project site using invision and wireframes(from mybalsamiq, figma, etc). or comps(from photoshop, sketch, etc).
  11. Continue Final Project: Final Project. Make sure to check requirements and specifications in the project description(click here for description). There is a video description of the assignment on the video page. See samples of comps, creative briefs and final projects in the weekly module. There is a drop box for the comps, wireframes or or briefs in the lessons module. Don't worry about Beta Testing, although it is a great idea to show your design to others throughout the design process to get feedback from fresh eyes. Don't forget to validate HTML and CSS at http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/. (Check due dates on the calendar.)(Check due dates on the calendar.)

April 27 - Week 13 Instructions:

Live topics for Monday and Wednesday - Recordings of the live meetings are here

Here are the weekly live demo files used in live class

On your own

  1. Review the video lecture on Creating Equal Height Boxes and Cards if it will help you with the final project. Here are the files if you want to follow along.
  2. Read Chapter 9 of Learning Web Design. It has more information on Forms.
  3. This is now Optional/Extra Credit. You do need to know the material to create the required form for the final project, but you do not need to turn this in.
    Assignment 19 - Creating html Forms: Create 1 web page by watching the video tutorial on Creating html Formsand duplicating the procedure. Use this start file(right click to download). Recreate the page exactly. Drop your file into the Assignment 19 drop box. Make sure to validate HTML using http://validator.w3.org/ and CSS with http://jigsaw.w3.org/css-validator/ (Check due dates on the calendar.)
  4. This is now Optional/Extra Credit. You do need to know the material to create the required form for the final project, but you do not need to turn this in.
    Assignment 20:Watch the video on Styling html Forms. Recreate the page exactly starting with your assignment 19 ending file. Chapter 19 of Learning Web Design has more information on styling forms. Drop your file into the Assignment 20 drop box. Make sure to validate HTML using http://validator.w3.org/ and CSS with http://jigsaw.w3.org/css-validator/ (Check due dates on the calendar.)
  5. All of you probably have to fill out forms often online. Post a screenshot or URL of at least one good or badly designed form in the discussion forum called "Form Experiences" by Saturday, and tell us why you think it's good or bad. Comment on the post of at least one other student by the Due Date. It is in the weekly module.
  6. You can leave constructive feedback for other students in the invision prototypes links in the Assignment 17.5 discussion forum. You just log into your invision account to leave comments in other invision prototypes. It's not required, but is nice :)
  7. Continue Final Project. Make sure to check requirements and specifications in the project description(click here for description). There is a video description of the assignment on the video page. See samples of comps, creative briefs and final projects in the weekly module. There is a drop box for the comps or briefs in the lessons module. Don't worry about Beta Testing, although it is a great idea to show your design to others throughout the design process to get feedback from fresh eyes. The dropbox is under the lessons link. Don't forget to validate HTML and CSS at http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/. (Check due dates on the calendar.)

May 4 - Week 14 Instructions:

Live topics for Monday and Wednesday - Recordings of the live meetings are here

Here are the weekly live demo files used in live class

On your own

  1. Check out Chapter 16 on CSS Layout with Flexbox and Grid, and Chapter 17 on Responsive Web Design. This can help with the Final Project
    1. You have already used Flexbox and done some responsive web design on exercises 16 and 18. I am not requiring any more assignments on these areas right now, since you have already done a lot in this class :) However, CSS Grid is the next frontier in CSS Layout, and is just now starting to be used in the wild, so it would be good to start getting familiar with it.
    2. Optional:Work through the exercises in those Chapters to become more familiar with the techniques.
    3. There are good intro videos on CSS Grid here
    4. Here is a page(still in development) on CSS Grid.
  2. Check out Ch. 18 of Learning Web Design on Transitions, Transforms, and Animation
  3. Do exercises 18-1 and 18-2 in Learning Web Design. They should be fun! You do not have to turn these in.
  4. Assignment 21: Watch the video on Intro to CSS Transforms and Transitions - Duration 37:28
    • Assignment: For this video, follow along with the video and recreate the page done in the video.
    • The video uses dreamweaver to code the page, but brackets or any editor should be fine.
    • Feel free to not include the vendor prefix code versions after the first one(You will know what I mean when you see it). The CSS is now well supported.
    • The start files are here
    • Drop your zipped site folder into the Canvas drop box in the Weekly module.
  5. Watch the short video on Rounded Images with CSS - Quick Tip. There is no assignment for this video(too easy), but some information may be on the final exam. It might help with your projects. Here is the file if you want to download it.
  6. Watch the short video on CSS Gradients - Quick Tip. There is also no assignment for this video(also too easy), but some information may be on the final exam. It can also help with your projects. Here are the files if you want to download them.
  7. Complete Final Project. Make sure to check requirements and specifications in the project description(click here for description). There is a video description of the assignment on the video page. See samples of comps, creative briefs and final projects in the weekly module. There is a drop box for the comps or briefs in the lessons module. Don't worry about Beta Testing, although it is a great idea to show your design to others throughout the design process to get feedback from fresh eyes. The dropbox is under the lessons link. Don't forget to validate HTML and CSS at http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/. (Check due dates on the calendar.)
  8. Usability Testing: There is no formal beta test on the Final Project required this semester, although it is a good idea to show your designs to other people throughout the design process to see ways to improve your design.
    You can also use this form for ideas on what to ask.
    Also, check out the following links to learn about usability testing. I would especially look at the Steve Krug Video and book below.
    Assignment: Informal User Testing:
    After looking at some of the information below on User Testing, ask someone to take a look at your site in progress and give you feedback. Post at least one thing you learned in the discussion forum titled "Feedback from informal user testing"

    Useful files to evaluate/test your website

    Usability Testing videos and links

May 11 to May 22 - Weeks 15 and 16 Instructions:

Live topics for Monday and Wednesday - Recordings of the live meetings are here

Here are the weekly live demo files used in live class

On your own

  1. Watch the short video on Rotating Web Elements - Quick Tip. There is no assignment for this video(too fun), but some information may be on the final exam. It could also help with your projects. Here are the files if you want to follow along.
  2. Watch the short video on CSS Opacity vs RGBA - Quick Tip. There is no assignment for this short video(nice teacher), but some information may be on the final exam. It could perhaps help with your projects. Here are the files if you want to follow along.
  3. Review Chapter 19 in Learning Web Design. It has more information on CSS techniques like image replacement and CSS sprites.
  4. Optional - Watch the video on CSS Techniques and Image Maps. There is also no assignment for this video, but check out the last part about CSS Transforms and Transitions. Here are the files if you want to download them.
  5. Watch the video lecture on embedding Audio and Video. There is no assignment for this video(yay again!), but some information may be on the final exam(boo again!).
    1. See the page on audio embedding
    2. See the page on video embedding
  6. Assignment 22:
    Using the file web_critique_criteria4_responsive_horizontal.pdf as a guide, evaluate another student's Final Project in teh Assignment 21 Discussion Forum.
    After the due date for the final project, use the same procedure as assignment 15. Here is the link to the final project submissions to use. You will need to click the download button in the dropbox window to download the folder, and then open them on your own computer. Take a look at other students' final projects in the drop box, and post your comments about their design in the Assignment 21 Discussion Forum. Critique the persons submission who is in the folder below yours. If you are at the bottom of the list, do the person's at the top. Look at their pages and try to address all the areas on the critique file with observations or suggestions to give them feedback on their design. The idea is to help them see the design with a fresh perspective, and improve their future designs. Post your comments in the Assignment 21 Discussion Forum for critique of Final Project in the weekly module. Make sure to say in your post title who's pages you are evaluating. You can also post comments about other projects in the folder. (Check due dates on the calendar.)
  7. Watch the video lecture Web hosting and FTP programs. There is no assignment for this video, although it will help with the extra credit video assignment below.
  8. Extra Credit Assignment: After watching the videos on video embedding and hosting, create a page with a video that has you in it. This is a challenge where you will need to figure out a few things on your own.
    • You will need to use a phone or other camera to shoot the video.
    • Transfer the file to your computer by email, google drive, dropbox, etc.
    • You will need a free hosting account from somewhere like 000webhost.com
    • You can use VLC, handbrake or any other app to convert the video to the required file types(see below).
    • Embed a video on a web page with h.264/mp4 compression
    • Use the html5 video tag as in the example page.
    • You do not need anything else on the page beyond the video.
    • Post the URL of the page in the dicussion forum called
  9. Take the class exit survey in the weekly module for more extra credit.
  10. Check out the final exam info below.
  11. Any late assignments must be turned in by May 22.
  12. If you haven't already, take a look at the Web Design Certificate and the Web Developer Certificate on the GDS Website. We have classes on Javascript Wordpress, Photoshop and more.
  13. Follow us on Instagram at:
    https://www.instagram.com/designatmission/
  14. We are on Twitter too. https://twitter.com/designatmission
  15. Make sure to like our facebook page(if anybody still does that) at http://www.facebook.com/missioncollegedesign.
  16. Take the Final Exam.
  17. Thanks for taking the class, and I hope you enjoyed it.

  18. The Final Exam

    • The Final Exam will be taken in Canvas on Wednesday, May 20 between 6AM and 11PM. You can take it at any time in that time window. Let me know if you cannot take it that day.
    • Here is a link to the first class webpage before we switched to online, to use as a guide for the final exam.
    • The exam uses proctorio, which is an exam proctoring system in Canvas. You need a working webcam and the Chrome Browser to take the exam. Install the proctorio extension in chrome well before the exam to make sure everything is working. Here are some instructions for Proctorio.
    • The test is open book and open internet, but it is timed(2 hours from when you start)!
    • Do NOT colloborate on the exam or get help from another person.
    • There are 60 questions.
    • The questions are multiple choice, matching and true false.
    • The questions will cover information found in the videos, exercises, and files used throughout the course.
    • Login to Canvas and look under the Modules link for the exam and instructions.
    • You have 2 hours to complete the exam.
    • Click the submit button only when you are finished.