GDES 45 - Web Design - Online
Weekly Instructions
Spring 2018- Section 31404


Week 1 (Jan. 29) 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. Reply to my post in the "Current Discussion and Question Forum" discussion  in Canvas, and give a short introduction about yourself. You can find the discussion forum in Canvas under the discussions link on the left or the Content Links module in Modules. It has the title "Introductions". I will check this to verify you are in the class. Please do not start a new post, but reply to my post.
  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.

Week 2 (Feb. 5) Instructions:

  1. Read Chapter 3 and 4 in Learning Web Design.
  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. 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 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 Ch10 of Learning Web Design for some of the differences, especially pages 181-185.

Week 3 (Feb. 12) 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 tags for text.
  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.
  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 265-274 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. Later, we will go over specifying color with RGB.
  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/create/color-wheel/
      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 at:
      http://validator.w3.org/
      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. You can begin 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.


Week 4 (Feb. 19) Instructions:

  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. Finish Assignment 4 - Reading Summary. Check due dates on the calendar.
    • 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.
  6. 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 ;)
  7. Read Ch. 11 of Learning Web Design for an intro to CSS.
  8. Learning Web Design exercises 11-1 and 11-2: Complete Exercises 11-1 and 11-2 from Learning Web Design using the same code as in the Lecture video from this week. 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/4e/materials/index.html.
    Here is a link to a page on CSS on that is mentioned in the video
  9. Here are some good online references for CSS
  10. 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.
  11. Start Assignment 6 - 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.

Week 5 (Feb. 26) Instructions:

  1. Read pages 17-30 of the file Building Usable Web Sites(usable_sites.pdf) in the weekly module.
  2. Finish Assignment 6 - 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.
  3. 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.
  4. Review Chapters 6 in Learning Web Design on links.
  5. Assignment 7 - 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.
  6. 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.
  7. 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 ;)

Week 6 (March 5) Instructions:

  1. Watch the video on Locations for CSS and basic selectors. There is no assignment to turn in for this video. It should be a bit of a review. It can also help with the Assignment 10 external style sheets.
  2. Watch this video on image file formats and/or
    review this web page on image file formats.
  3. Read Chapters 7 and 21 of Learning Web Design for more detail on images.
  4. Check out this page on scanning if you don't feel comfortable with scanning.
  5. Check out this page with a salary guide put out by The Creative Group. It has information about salaries for designers and developers.
  6. Assignment 8 - Adding Images to a Web Page: Recreate the page in the video by watching Adding Images to a Web Page(This video is on youtube). Recreate the page like the one in the video, although you can use different images than the ones in the video. Chapter 7 in Learning Web Design also can help. Make sure to start with the valid links site files from Assignment 7, with corrections made if needed. Of course, always make sure to check your files 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 everything works.
    • Remember, to turn in assignments with multiple files or folders, it works best if you put all files in a folder and zip the folder. Also remember 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.
  7. Read Chapter 22 of Learning Web Design for more detail on optimizing images.
  8. Begin Assignment 10 - 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 template we have done in class, GDES 45 Basic Page with HTML 5 Containers (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 14-16 in Learning Web Design. However, we will not completely cover 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. The drop box will be in a later module, since you have some time for this assignment. 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.
    1. Assignment 10 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.
    5. Use at least 1 background image(more info on positioning background images will be covered soon)
    6. Use some styles from an external style sheet, and use external styles for most of your styles.

Week 7 (March 12) Instructions:

  1. Assignment 9 - Image preparation and optimization: Clean up and optimize the image_processing_start.psd image by following the procedure in the Lecture video Processing and Exporting an Image. The original image is here and in this week's lessons module. It will not display in Canvas, but you can click on the filename to download. Here is the webpage in the video with the general steps, but follow the order in the video. Drop your finished, optimized, image file into the Assignment 9 drop box. You only need to submit the regular, full size optimized file, image_processing_2.jpg, from the video, not the smaller .5x version or the PSD file. Check due dates on the calendar.
  2. Review Chapters 21 and 22 of Learning Web Design. They have more information on web graphics and how to optimize them.
  3. Assignment 11(Optional Extra Credit):
    Watch and follow along with the video on Background image placement(on youtube) 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 284 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 calendar.
  4. 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".
  5. Check out this page using opacity. View the source to see how it works.
  6. Check out this page using attribute selectors. View the source to see how it works.
  7. 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 275 and the Attribute Selectors on page 281.
  8. 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 assignment 10 ;)
  9. Optional: Watch the video on Tables : Create a web page like the one in the video lecture by watching the video tutorial Tables and Intro to 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.
  10. Continue Work on Assignment 10 - 2 Page Site: See description and requirements above. It is due April 2 after Spring Break.

Week 8 (March 19) Instructions:

  1. Watch the video on Adding Text to an Image in Photoshop(youtube video).
    Here is the start file if you want to follow along. You do not have to turn anything in for this exercise.
  2. 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.
  3. Be familiar with the information in Chapter 14 of Learning Web Design. It has more information on the css box model.
  4. Complete Exercises 14-1 through 14-3 from Learning Web Design. They are related to the CSS box model. You do not have to turn in these files.
  5. Assignment 12 - 2 Column Layout with floats:
    Watch the video on Basic 2 Column Responsive Layout (youtube video).
    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, but I wanted to get this one out there so you could use it to make columns for Assignment 10 if you want. Make sure to validate HTML and CSS. Drop your files into the Assignment drop box. (Check due dates on the calendar.)
  6. Post the URL of a CSS or Web Site Gallery in the discussion forum in in the weekly module in Canvas. The discussion is titled "Web Gallery Sites". An example would be https://siiimple.com/. Also, look at the galleries posted by others, reply to their post by posting the URL of a site you saw in their gallery that you liked, and tell us why.
  7. Assignment: Take the Midpoint Survey in the weekly module
  8. Continue Work on Assignment 10 - 2 Page Site: See description and requirements above. It is due April 2 after Spring Break.

March 26 - Spring Break!

  1. Watch the video on Basic Inline Responsive Images(Youtube video). 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.
  2. Finish Assignment 10 - 2 Page Site: See description and requirements above. It is due April 2 after Spring Break.
    • 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.

Week 9 (April 2) Instructions:

  1. Read Ch. 3 in The principles of Beautiful Web Design on texture.
  2. Watch the Five Essential Principles of Interaction Design Video. It has lot of good tips about designing a good experience for the user, and examples of wireframes.
  3. 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.
  4. Complete Exercises 12-1 through 12-7 from Learning Web Design. They are related to using selectors and formatting text which we covered last week. You do not have to turn in these files.
  5. Assignment 13 - CSS for text formatting: Create a web page by watching the video tutorial on 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. (Check due dates on the calendar.)
  6. Be familiar with the information in Chapter 15 of Learning Web Design. It has more information on the CSS Positioning and CSS Floats.
  7. Recreate the page from the video on CSS floats: 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. You do not have to turn in these files, but it will really help with float based layouts going forward.
  8. For extra practice, complete Exercise 15-1 from Learning Web Design. It is related to CSS floats. You do not have to turn in these files.

Week 10 (April 9) Instructions

  1. Read Ch. 4 in The Principles of Beautiful Web Design on typography.
  2. 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.
  3. Watch the video on css positioning.
  4. Watch the video on creating animated gifs in Photoshop, and follow along using the start files. Do not turn this in.
  5. Watch the video on creating an animated gif from a video.
  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.)
    • Requirements:
    • You may use an image of the product from a website or catalog as a component of your animation, but you must create your own original animation.
    • The size should be 970x250 as in the video.
    • The animation must be a minimum of 4 frames and must be an appropriately small file size(less than 200k).
    • Remember, gifs work better with images that have fewer colors.
    • Try to communicate your information effectively and efficiently.
    • Don't use the Photoshop Artboards for this one. They seem to cause problems sometimes with the export.
    • Refer to animated_gifs.pdf from Learning Web Design 2 and Photoshop help under frame animation for help.
  7. Assignment 15: Using the file web_critique_criteria3.pdf as a guide, evaluate another student's Assignment 10(2 page site) submission. The critique help file is in the weekly module. The submissions for Assignment 10 are here. 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_criteria3.pdf to help with ideas of things to talk about. Post your comments in the Assign. 15: Discussion Forum for critique of Assign. 10 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.)

Week 11 (April 16) Instructions:

  1. Make sure you have read Ch. 4 in The Principles of Beautiful Web Design on typography.
  2. 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.
  3. Assignment 16-1 - Lists for Navigation: Create a web page by watching video tutorial on Lists for 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.)
  4. 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 Lists for Navigation. 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.)
  5. Optional: Check out flexbox.io for more videos on Flexbox, which is becoming more popular for layout.
  6. Final Project: Begin Final Project.
    Make sure to check requirements and specifications in the project description(click here for description). Watch the 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. (Check due dates on the calendar.) See assignment 17 below for an assignment related to the final project.
  7. Start Assignment 17: Turn in a Creative Brief, Wireframes, or Comps for the final Project.
    Optional video "Using mybalsamiq for Wireframes" - Youtube video(for help with Assignment 17) Duration 22:32
    You do not have to do all 3, although it would be beneficial to you to do them all. See instructions on the Final Project Page. See samples of comps, creative briefs and final projects in the weekly module. There are links to example wireframes on the project page. Drop your image files for comps or wireframes, or your Word or PDF file of your creative brief into the Assignment 17 Drop Box which will be posted next week. Check the calendar for due dates.