GDS 45 - Web Design and Development 1 - Online
Weekly Instructions
Spring 2024 - Section 33646

Jan. 29 - Week 1 - Instructions: Introductions

  1. Important Note: Some of the material is optional, extra credit, or highly suggested, for those who may have more time to get into things. I will indicate whether something is optional, extra credit, or highly suggested on the individual items. If an item is NOT marked optional, extra credit, or highly suggested, you can assume it is required.  SOME of the material from highly suggested items and optional items MAY show up on quiz. Please post questions in the Question discussion forum if you have questions about individual items. Thanks. It will be fun, I promise :)
  2. 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
  3. 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.
  4. Watch the video orientation. The current syllabus will be slightly different from the one in the video. You can watch this one on high speed playback if you want ;)
  5. See the class links sidebar on this page for Canvas and online learning related links.
  6. Read the General Class Information in Canvas (https://wvm.instructure.com). It may be slightly different than the video or syllabus.
  7. 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.
  8. Generally Mon 10:30AM - 12:00PM, online and in GC321B, and Thursdays 11:00AM – 1:00PM online only. Here is the link to optional office hours. It's also on the Home Page for the class in Canvas. You can talk to me live at those times to ask questions, etc.
  9. 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.
  10. Assignment - Please take the opening day survey in the week 1 module in Canvas.
  11. There is tutoring for some of our classes if you need it.
  12. 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 $50/semester at http://store.collegebuys.org/
    • Please let me know if you do not have adequate computer hardware, internet access, or can't afford the $50 for the Adobe software.
    • If you ordered Adobe Creative cloud from collegebuys.org, there is a pdf with instructions on accessing your account in the Content Links Module, and the Week 1 Module in Canvas. It is also here.
  13. Highly suggested: Read Chapter 1 in Learning Web Design. You should be able to get FREE ACCESS to the books from Oreilly Safari Books Online. See below.
  14. Check out the file Day 1 Terms here and in the week 1 module.
  15. Optional Video: Intro to Visual Studio Code.- Duration 28:38
    The first assignment below also has the basics of using VSCode, so this video is optional. This one has a bit more information on using VSCode code, which is the text editor I would suggest using to make your pages. You CAN use other editors though.
    1. Here is another short video on getting started with Visual Studio Code called Learn Visual Studio Code in 7min (Official Beginner Tutorial) - Duration 7:16
  16. Assignment 1 - First Page: Create your first web page by watching the video GDS45 Assign1 - Creating a Basic Web Page (Duration 1:03:27). Note: Some videos will be on youtube and others will be in Panopto as we transition to Panopto.
    Here is the link to the same Assignment 1 video on youtube, in case MC-Panopto is causing you problems. It was down sometime on Thursday
    • You should use VS Code to do the coding in the class. You can download VS Code here. 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.
    • 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 drop box in Canvas in the weekly module in Canvas. Include your name in the file name as in firstname_lastname_page1.html.
    • Check the calendar for due dates.
    • Have fun!

Feb. 5 - Week 2 - Instructions: Block and Inline Tags

  1. Highly suggested: Take a look at Chapters 2 and 3 in Learning Web Design. If you have time to read it, that would be great, but it's good to know the basics, at least, of what's in the Chapters. 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. Optional: Take a look at this page on HTML5 Semantic Elements.
  5. Optional: If you have time this week, watch section 1 from the course Interaction Design for the Web from Linkedin Learning. It's about 15 minutes total.
  6. Highly Suggested: Take a look at these articles on Information Architecture and the UX Process.
  7. 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 information 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: Most 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.

Feb. 12 - Week 3 - Instructions: Web Design Mistakes, Lists, CSS Styles and Colors

  1. Highly Suggested: Look at Chapters 4 and 5 in Learning Web Design. It is about basic tags for text. There is information related to the exercise this week. Do the Ch. 5 exercises for practice if you wish. You do not have to turn these in.
  2. Highly Suggested: 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. Watch the video on Web Design Mistakes(youtube video). Some of the featured awesome websites are linked below.
  4. Highly suggested: Check out these example bad websites for things not to do.
    1. http://www.angelfire.com/super/badwebs/
    2. http://www.arngren.net/
    3. 19 Examples of Bad Website Design in 2022 [+ What They Got Wrong]
    4. 22 Examples Of Bad Websites 2023
  5. Highly suggested: 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.
  6. Assignment: 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. Please to reply to someone who has no replies yet.
  7. Highly suggested: 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.
  8. Watch the video on Color and Color Schemes.
    The sites below are in the video.
  9. Optional:Watch section 1 on How Brains Work from Interaction Design for the Web from Linkedin Learning
    • I am going to refer you to some optional videos from Linkedin Learning(formerly Lynda.com) in the course.
  10. 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. There is a picture of the files panel in the start files, with the 3 files you should submit in the folder. 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.

Feb. 19 - Week 4 - Instructions: CSS Fundamentals and a Basic Layout

  1. Note: 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 grade book 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 for some classes(if you have other classes). There is no tutor for this specific class this Fall, but I am available for no added fee ;)
  3. Highly suggested: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. Optional: 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
  6. Here are some good online references for CSS
  7. Assignment 4 - Simple 1 Column HTML Template Follow along and create the page in the video Simple 1 Column HTML Template - Duration 31:04. You can also use the file you create as a starting point for some later assignments. Don't forget to validate your file before you turn it in! http://validator.w3.org/
    • Important! For this assignment, you start with the ending file from the lists exercise, probably from last week. If you do not have that file, because a dragon ate your computer, there is an image of the code to start with in the Canvas Module for this week. About the first 5 minutes of the video is adapting the file from the lists video to a starting point for the template in this video. You're best bet is to start with what you did in the lists video, however.
    • Extra Credit!:
      Add one heading and one extra paragraph after the Lipsum text about something fun you did over the Summer. Use at least an H2 tag, the p tag, and the strong tag.
    • 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.

Feb. 26 - Week 5 - Instructions: Color, Links, and File Paths

  1. Optional: Videos: There are some good videos on Interaction Design for the Web on lynda.com.
  2. Highly suggested: Watch the video RGB and 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 the printed version of Learning Web Design for a description of RGBa, which can be used to make your background colors partially transparent. Search for RGBa in the online version of the book.
  3. Highly suggested: Reading this week: Review Chapters 6 in Learning Web Design on links. It will help on the links assignment.
  4. Assignment 5 - Links and File Paths: Create 2 web pages by watching the Linking Web Pages video. Recreate the site exactly as the one in the video. Chapter 6 in Learning Web Design also can help.

    Here are the start files you can use. I have adjusted the due date for this one since the start files will not be available until Tuesday.

    Name the files and folders as in the video. The names of your files and folders must match the names in your links, or the links will not work. Always make sure to check your file for errors by submitting it to the W3C validation services at http://validator.w3.org/.

    • 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.
  5. Highly suggested: 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.
  6. Extra Credit this term: Start Assignment 6 - Resume or Reading Summary. There are examples in the weekly module.
    Full requirements and instructions listed here    .
    Soon we will be seeing how to add images, so you will know how to do that. This is a good chance to practice some of the things we have been doing in the follow along exercises. Check due dates on the calendar. This exercise will be worth 12.5 points extra credit this term :)
    If you have general questions, ask them in the discussion forum in Canvas.
  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 ;)

March 4 - Week 6 - Instructions: CSS Locations and Images

  1. Look over this page that talks about the 3 places you can put CSS styles
    • Inline - by using the style attribute inside HTML elements
    • Internal - by using a <style> element in the <head> section
    • External - by using a <link> element to link to an external CSS file
  2. Optional: For more information on where to put CSS styles, watch at least the first 5:10 of the video on Locations for CSS and basic selectors. This will show you where you can put CSS, including external CSS files. It can also help with the assignment with external style sheets. There is no assignment to turn in for this video. It should be a bit of a review... mostly.

  3. Highly suggested: Watch the video on Basic CSS Selectors - Duration 26:48. You do NOT have to do the follow-along part of the exercise, but you can if you want to. Use this start file which has much of the code for the page(right click to download) if you want to do the follow along exercise.

  4. Check out this page on image file formats.
    • Optional: Here is a video on Images and File Types, which goes over the image file types above, and how to export them, etc. You will see this video again later as an exercise, but you can check it out now if you have time.
  5. Highly suggested: Chapters 7 and 23-25 of Learning Web Design have more detail on images.
  6. Highly suggested: Read Chapter 24 of Learning Web Design for more detail on optimizing images.
    • Do exercises 24-1 and 24-2 to practice image optimization.
    • You do not have to turn these in.
  7. Optional: Check out this page on scanning if you don't feel comfortable with scanning.
  8. Optional: Here is a video on scanning that might help too.
  9. Optional: Check out this page with a salary guide put out by The Creative Group. It has information about salaries for designers and developers. You can make money doing this stuff!
  10. Highly suggested: Watch the short video: Exporting from Bridge Using the Export Panel - Quick Tip This is another way to export images to use on pages.
  11. Extra Credit this term: Finish Assignment 6 - Resume or Reading Summary. There are examples in the weekly module.
    Full requirements and instructions listed here    . The requirements were updated with links to a video about putting images on your page. Check due dates on the calendar.
    • Make sure to zip the whole site folder to attach to your submission. Don't submit separate files, because the links will probably not work. This exercise will be worth 12.5 points extra credit this term :)
    • If you have general questions, ask them in the discussion forum in Canvas.
  12. Assignment 7 - Background Images: Recreate the page in the video by watching the video Background Images video - Duration 33:08.
    • Recreate the page like the one in the video, although you can use a different image than the one in the video.
    • Chapter 7 in Learning Web Design also can help.
    • Make sure to start with the valid template page from Assignment 4, with corrections made if needed.
    • Create the folder structure you see in the sidebar in VSCode from the video. Basically, you make 3 folders inside your assignment folder. See the video for details.
    • Of course, always make sure to check your files for errors by submitting it to the W3C validation services at http://validator.w3.org/.
    • To turn in the assignment:
      • Before you zip the folder with your files, test the site before you send it make sure everything works, and validate the pages to catch errors.
      • 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.
  13. Optional this week:Watch the video on Basic Inline Images - Duration 34:10

March 11 - Week 7 - Instructions: Text Formatting, Image Preparation and Background Images

  1. Highly suggested: Read Ch. 3 in The principles of Beautiful Web Design on texture.
  2. Highly suggested: 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.
  3. Optional: 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.
  4. Highly suggested: Watch the video on CSS for Text Formatting - Duration 35:34. You do NOT have to do the follow-along part of the exercise, but you can if you want to. Use this start file which has much of the code for the page(right click to download) if you want to do the follow along exercise. This video has valuable information about text formatting, some of which might end up on a quiz :|
  5. Highly suggested:Watch the video What is UI vs. UX Design? - Duration 5:44
  6. Assignment 8 - Basic Inline Images: Recreate the page in the video by watching the video Basic Inline Images video - Duration 34:10.
    • Recreate the page like the one in the video, although you can use a different image than the one in the video.
    • As with the background images video, chapter 7 in Learning Web Design also can help.
    • Make sure to start with the finished Background Images exercise file. If you don't have it for some reason, there is an image of the code in the Canvas module for this week.
    • Of course, always make sure to check your files for errors by submitting it to the W3C validation services at http://validator.w3.org/.
    • Turn in the assignment the same way you turned in the Background Images exercise:
      • Before you zip the folder with your files, test the site before you send it make sure everything works, and validate the pages to catch errors.
      • 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. Do one or both of the following exercises (9 and/or 10) for extra credit.
    If you do both, you will get some more extra credit!     Is that extra, extra credit? :) You don't have to do these, but you should know how to position background images and optimize images.
    1. Assignment 9 - Image preparation and optimization: Clean up and optimize the image_processing_start.psd image by following the procedure in the 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 some general steps, but follow the order in the video. Drop your finished, optimized, image file into the Assignment 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. Assignment 10 - Background Images:
      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, or it will not show up on my end. 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 drop box. Even if you don't do this one, you should know the material. You may just want to watch it even if you don't do this one. Check due dates on the calendar.
    3. Again, you can do 9 OR 10, but you can do both for more extra credit! There is one Assignment in Canvas where you can put one or both exercises. If you do both, put them both in the same zipped folder. If you don't do them, you should at least know the material somewhat. Thanks.
  8. Highly suggested: Review Chapters 7, 23 and 24 of Learning Web Design. They have more information on web graphics and how to optimize them.
  9. Assignment - Discussion:
    Find a site on the web that uses background images or video in an interesting, creative way. In the discussion forum in the weekly module, post the URL of the site by Thursday, and tell us why you think it is interesting. Also comment on a site posted by someone else by Monday. Try to reply to someone who has no replies yet if you can. The discussion forum is called "Sites with interesting use of background images".

March 18 - Week 8 - Instructions: CSS Box Model and Flexbox

  1. Important! 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. , and there may be quiz questions based on it :(
  2. Highly suggested: Be familiar with the information in Chapter 14 of Learning Web Design. It has more information on the CSS box model.
  3. Optional: 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.
  4. Optional: Check out Adobe Max videos. This conference has a lot of content on using Adobe software.
  5. Check out this page using opacity. View the source to see how it works.
  6. Optional: Check out this page using attribute selectors. View the source to see how it works.
  7. Highly suggested: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.
  8. Important! Check out the first half of CH. 16 in Learning Web Design on Flexbox. We will be using flexbox going forward for layout. Look at Exercise 16-1 for an example of using flexbox to create a navigation bar. We will also use it on Assignment 12 below. You will see more content later on flexbox, but it will be good to start learning it now.
  9. You can also take a look at A Complete Guide to Flexbox, which lot of people use to help with knowing how it works and all the possibilities.
  10. Important! Watch the video on Introduction to Flexbox - Duration 22:36
    There is nothing to tun in for this one, but it has important basic information on flexbox, which we will spend some time on.
  11. Assignment 11 - Two Column Layout with flexbox: Watch the video on Simple 2 Column Responsive Layout with Flexbox
    Here are the start files (right click to download). Recreate the page in the video using the start file. You can 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.)
  12. Assignment: Take the Midpoint Survey in the weekly module
  13. 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.
  14. 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.
  15. Optional: Check out this codepen demo on the Overflow property. It can be used to create scrolling boxes, among other things.
  16. Optional: Cascade test in codepen On this one, you can uncomment the CSS line by line to help see how the cascade works. Cascade is the C in CSS, by the way.
  17. Very Optional: Watch 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.

March 25 - Week 9 - Instructions: Photoshop Basics, Exporting Images and File Types, CSS Positioning, Web Fonts, and a Quiz

  1. Highly suggested: Read the article Exploring the Gestalt Principles of Design. It talks about some design principals also in Ch. 1 of the The Principles of Beautiful Web Design.
  2. Highly suggested: If you are not familiar with Photoshop, watch the video Photoshop Basics for Beginners. It could help with later assignments.
  3. Optional: Watch the video on Basic Inline Responsive Images. This should be review.
    • 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.
  4. Assignment 12 - Images and File Types (Extra Credit but important to know)
    Watch and follow along with the video on Images and File Types - Duration 47:07 to recreate the page. Download the start files here. I included a new start file, so you can skip some of the copying from the content file. This is a test to see who is reading actual directions ;) Be sure to include all image files with your submission, or it will not show up on my end. The images will not show up for me unless you send it along with your html files. Drop your files into the Assignment drop box. You don't have to do this one, but it does go over image file types and how to export them. It probably would be relevant for someone looking for a job as a Web Production Artist. Even if you don't do this one, you should know the material. Check due dates on the calendar.
  5. Make sure you are familiar with the information in Chapter 15 of Learning Web Design. It has more information on CSS positioning and CSS Floats. Doing the exercises in the chapter helps too, although it is not required.
  6. 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 off screen when the page is scrolled. Check it out in your Learning Web Design book and here.
  7. 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, which you probably do ;) Feel free to use web fonts on Assignment 13, but it is not required.
  8. Optional: Here is an article on using Google Fonts, which is also covered in the video above.
  9. Assignment - Take the Midterm Quiz in the Weekly module in Canvas:
    • This quiz is open book, open note and open internet. Do NOT use other people as a resource however, so take the quiz by yourself. Thanks.
    • Almost all questions are from the videos such as CSS Positioning and CSS for Text Formatting, Images and File Types, as well other videos.
    • You get one attempt.
    • Good luck!
  10. Start Assignment 13 - Two page site:
    Full requirements and instructions listed here    . Check due dates on the calendar.
    • Spring break is coming, and this is an assignment that takes time, so you have extra time for this one.

March 27 (Week 9.5) - Spring Break! - Some optional things this week!

  1. Make sure to take the quiz if you haven't already, and continue to work on Assignment 13. Assignment 13 is one that takes some time, so don't wait until the last minute.
  2. Optional this week, since it is Spring Break. If you are not familiar with Photoshop, watch the video Photoshop Basics for Beginners. It could help with later assignments.
  3. Please let me know if you don't have access to Photoshop yet.
  4. Relax and have some fun this week, if possible, and we will continue next week.

April 8 - Week 10 - Instructions: Typography and More Flexbox

  1. Important! Watch this short video on 4 design principals that apply to web design, and other design disciplines, called 4 Foundational UI Design Principles | C.R.A.P. - Duration 9:15
  2. Important! Read Ch. 4 in The Principles of Beautiful Web Design on typography.
  3. If you haven't already, 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 an example of using flexbox to create a navigation bar.
  4. Check out A Complete Guide to Flexbox from CSS Tricks. All the cool people use it as a reference about flexbox.
  5. Important! (believe it or not) Play Flexbox Froggy. It's a fun but nerdy game that will really help you learn Flexbox.
  6. Optional: Check out flexbox.io for more videos on Flexbox, which is becoming more popular for layout.
  7. Assignment 14 - Flexbox Container Properties: Watch the Flexbox Container Properties - Duration 21:39, video tutorial. Please recreate the page exactly.
  8. Optional: For more information on Flexbox, watch the video on Flex Item Properties - Order and Alignment - Duration 14:27
  9. Take a quick look at figma. We will be using it later for things like wireframing.
  10. Important! Make sure to check your sites (like Assignment 13) in mobile design modes in browsers using the built in browser tools, although we haven't done a lot of Responsive Web Design yet, except for changing the number of columns, and using basic responsive images.
  11. Here are some ways to check contrast for accessibility. This is mostly to help the vision impaired read your pages, which is good.
  12. Highly suggested: Check out the video on using browser tools and browser extensions to verify contrast is OK on your pages, so your text is readable to ALL your users.
  13. Optional: Watch the another short video on Checking Contrast with Chrome Devtools, which often allows you to check contrast right inside Chrome.
  14. Finish Assignment 13 - Two page site
    Full requirements and instructions listed here    .
    • Refer to the Web Critique file here and in Canvas to self-critique your site and look for ways to improve the design before submitting it.
    • Check due dates on the calendar.
  15. Very Optional: Watch the video lecture on Creating Equal Height Boxes and Cards. It is a little advanced, but it may be useful now. 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.

April 15 - Week 11 - Instructions: Figma, Navigation Bars, Animated gifs and Final Project Start

  1. Make sure you have read Ch. 4 in The Principles of Beautiful Web Design on typography.
  2. Assignment - Discussion: 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. Try to reply to someone without any replies if you can.
  3. Assignment 15: Using the file web_critique_criteria4_responsive_horizontal.pdf as a guide, evaluate another student's Assignment 2 page site submission. The critique help file is in the weekly module. Here is the link to the files to use for the critique. There are instructions in the Assignment 15 forum on how to download folders if you have trouble. The student folders will be numbered, and please 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 comments, observations or suggestions to give them feedback on their design. The outline of what to comment on is in the discussion. 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.)
  4. Optional: Check out this article, Here’s How to Become a UX Designer in 2023, if you are interested.
  5. Optional: For even more information on Flexbox, watch the video on Flex Item Properties - flex-grow, flex-shrink, and flex-basis - Duration 27:39
  6. Important Note:
    For this term you can do EITHER Assignment 16A about creating Animated gifs, OR Assignment 16B which is about making navigation bars, for Extra Credit. You do need to know the techniques in both videos and exercises, but you only need to turn in 1 for Extra Credit. You choose! Assignment 16B is farther below.
  7. Optional: Watch the video on Creating an animated gif from a video.
  8. Highly suggested:Watch the video on Creating movement in animated gifs with Photoshop, and follow along using the start files. Another demo is below on a different way to do the assignment. Both of these videos will help with Assignment 14. Do not duplicate any of the demo examples. You do not have to turn in this practice example.
  9. Highly suggested:Watch the video on Slideshow style animated gifs in Photoshop, and follow along using the start files. Both of these videos will help with Assignment 14B. Do not duplicate any of the demo examples. You do not have to turn in this practice example.
  10. Here are some Stock photo companies and articles if you are having trouble finding images for assignments.
  11. Assignment 16A - Creating an Animated Gif (You can do EITHER Assignment 16A OR Assignment 16B for Extra Credit): 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 videos, and do not create a gif from a video as in the other 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.)
  12. Assignment 16B - Navigation Bars 1 (You can do EITHER Assignment 16A (above) OR Assignment 16B for Extra Credit. You DO NOT have to turn in either one, if you are too lazy ;).
    Watch the video Navigation bars 1.
    Here is the start file(right click to download). Recreate the page in the video using the start file. Please recreate the page exactly. Make sure to validate as always. Drop your files into the Assignment drop box. Check due dates on the Canvas calendar.
  13. Important! Assignment Begin Final Project
    Make sure to check requirements and specifications in the project description(click here for description). Watch the video description here and on the video page. Requirements might have changed slightly from the video, so make sure to check the requirements on the web page for current requirements.
    See samples of final projects in the weekly module. There is a drop box for the wireframes or comps or briefs in a weekly module, but it may be a future module(Check the calendar). 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.
  14. Note: You will probably be using Figma for Assignment 17 and 17.5. Figma was just updated June 2023, and it looks a little different from the videos, but you should be able to use it in the same ways for Assignments 17 and 17.5.
  15. Assignment 17 (Part of the Final Project): Turn in at least 10 Wireframes, OR at least 6 Comps for the final Project. To be clear, It's 10 Wireframes OR 6 Comps, and you do need 10 Wireframes OR 6 Comps to do Assignment 17.5 afterwards.
  16. Important! Here is a link to a playlist of 20+ videos about using Figma from the Spring 23 version of GDS 072, Digital Imaging and User interface Design class. You can look there for tutorials on many aspects of using Figma. Figma is updated fairly often, so things will change.
  17. Remember, you should probably use figma to do wireframes for the final project. If you haven't already, create a free account at figma.com if you haven't already. Here is the video Introduction to Figma for Wireframing.

April 22 - Week 12 - Instructions: The Display property, Media Queries, More Flexbox Layout and Prototyping

  1. Optional: Check out the typography links in the sidebar for more info on typography, especially the first one.
  2. Highly suggested: 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!
  3. CSS Display Property
  4. Highly suggested: 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.
  5. Assignment 17.5 (Part of the Final Project): Create a prototype(or prototypes, see below)of your Final Project site using figma OR invision and your wireframes(from figma, illustrator etc) or comps(from figma, photoshop, sketch, etc).
  6. Assignment 18A - Responsive 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.(Check due dates on the calendar)
  7. Assignment 18B - Responsive Flexbox Layout Patterns (extra credit): Follow along with the video tutorial on Responsive Flexbox Layout Patterns. This is actully an exercise from GDS 046 - Web Design and Development 2, but it could be very helpful when you are working on layouts for the final project. This is extra credit in this class, however. Please recreate the page exactly. Use this start file(right click to download). Drop your finished file into the Assignment 18B drop box. Make sure to validate as always. (Check due dates on the calendar)
  8. All of the videos above can help with the final project page layout, but you are only required to watch Responsive Flexbox Layout Patterns and Responsive Layout with Flexbox.
  9. Assignment 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, 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/. (Check due dates on the calendar.)(Check due dates on the calendar.)