GDS 46

Web Design and Development 2 - Fall 22 - Section 71573 

Skip to the current week

Weekly Instructions

Aug. 29 - Week 1

Topics: Introduction to the class

Assignments

  • Here is a link to the class in Canvas
  • There is a link to the syllabus on the first page in Canvas.
  • Watch the class intro video - Duration 27:47
    This video is in Panopto, so you may need to be logged into Canvas to see it.  You probably want to use VS Code in the class. You can download it here.
    If you are not familiar with VS Code, watch the video here. VS Code is becoming probably the most popular editor used in web development. I would advise using it for all coding work done in the class. The videos are made using a number of different editors like Dreamweaver and Brackets, but the actual code is the same no matter what editor you use. You CAN use any editor you want in the class.
  • Here is another video on using emmet, specifically in VS Code - Duration 17:36
    • emmet can save you a LOT of time when coding.
  • Review Ch. 1-3 in Learning Web Design. They talk about the Web Design Process, such as creating wireframes. You should be able to get free online access to this book through Mission’s new online access to Safari Online. Go here for details and to sign up http://libguides.missioncollege.edu/oreilly-safari
    Here is a direct link to the book once you have the safari account.
  • 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 in Canvas. 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.
  • Take the opening day survey in Canvas under the modules link
  • Optional Office hours: Generally Mondays 10:00AM - 12:30PM on Zoom and Wednesdays 1:00PM - 2:00PM in-person and through Zoom. Check the home page in Canvas for links to the zoom office hours. You can talk to me live at those times to ask questions, etc.
  • Start Project 1: Bio Page

Additional Info

Review CSS and HTML Basics

CSS Shapes

Sept. 5 - Week 2

Topics: The Web Design Process and some review of Flexbox, CSS Positioning, and Floats

Important Note: Adobe stopped supporting the Brackets code editor a year ago or so. It is now an open source project, so you COULD use it for the the class, but I suggest you use VS Code going forward to do the coding in the class(download here). If you are used to Brackets, here is a video from the GDS 45 class on switching to VS Code from Brackets, and includes some useful VS Code extensions. VS Code and extensions change all the time, so things may change rapidly. VS Code has becomevery popular and seems to be emerging as a standard. The videos in the class were done using different editors like Brackets and VS Code, and maybe others, but remember the code is the same. It's just a different editor.

Assignments

There is some review this week, as well as some new things. We'll be getting everybody up to speed on the Web Design Process, Flexbox, CSS Positioning and Float Based Layouts(Review).

  • Watch the video on The Web Design and Development Process - Methods and Resources - Duration 19:03
  • If you haven't already, read the section on Flexbox in Ch. 16 of Learning Web Design
    • This will provide more background on Flexbox.
    • Do Exercises 16-1 through 16-3 to practice using Flexbox. You will make a menu bar, a flexible menu, and change the order of items. You do not have to turn these in, but the material is important.
  • Assignment:
    Watch the video on Display Options and Flexbox - Duration 33:02
    • You may have seen this video in the GDS 045 class, but this time you will turn in the exercise (Sorry about the review if you have already seen this video, but I want to make sure everybody is on the same page as we get going)
    • For this video, follow along with the video and recreate the page done in the video.
    • The start files are here
    • Drop your zipped site folder into the Canvas drop box in the Assignment module.
    • You can check the Canvas calendar for due dates.
  • Optional:
    Watch this video from GDS 45 on Layout with Flexbox     if you have not already seen this video, and you want to see flexbox used in a complete layout. This is a slightly older video on how to create a fixed layout with Floats, but you may run into sites like this, especially if doing a redesign. Use this start file(right click to download) if you want to follow along.
  • If you have never played it, Flexbox Froggy is a great way to learn flexbox and get a feel for how to use many of the properties related to flexbox.
  • Check out Multicolumn Layout as another method of creating columns
    • Page 420 of Learning Web Design has information on this technique
    • There is also a full article here
    • This is a pretty easy way to make text flow into columns, and can come in handy
  • Optional: Review Ch. 15 of Learning Web Design on Floats and CSS Positioning if you do not feel comfortable with them. Float based layouts are going away, but you MAY need to update a float based layout sometime, so it's good to know, and Positioning is used in specific instances, although not usually for an entire layout. Do the exercises in Ch. 15 if you want to practice CSS Positioning, and if you have not already looked at these. These exercises are optional, and are not to be turned in. The information on float based layouts is for reference only.
  • Look at the information in Ch. 15 of Learning Web Design on CSS shapes, which is pretty cool, although I'm not sure it is being used too much out in the wild... Yet.
  • Complete the Bio Page Project
    • See more details here
    • Extra credit if you use CSS Shapes on the assignment!
    • Don't forget to validate your assignment 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. Make any corrections necessary so you get the happy, green, OK message.
    • To turn in assignments with multiple files or folders, it works best if you put all files in a folder and zip 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. Then when you zip the folder, I will know it is yours. Don't rename any files of folders inside your site folder before sending, as that will probably break things. 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 the zip files into the drop box under the Projects module in Canvas.

Additional Info

Flexbox Resources

CSS Shapes

CSS Positioning Review

Very Optional Floats Review(For historical purposes only)

Sept. 12 - Week 3

Topics: More Flexbox, Intro to CSS Grid and Photoshop Layer Comps

Assignments

Here are some more good videos on Flexbox
CSS Grid
  • CSS Grid is becoming more popular as a method to lay out pages and elements. It's a fairly recent CSS thing, and should perhaps be used with care for a while longer, and perhaps with fallbacks for those browsers that don't support it yet.
  • If you want to watch a video on CSS Grid Basics, Jen Simmons has one here- Duration 15:24
  • Here is a video comparing Flexbox and CSS Grid, also from Jen Simmons - Duration 4:17
  • If you haven't read it already, read pages 446-483 in Learning Web Design on CSS Grid(Ch. 16)
    • Do Exercises 16-4 through 16-6 to practice using CSS Grid. You do not have to turn these in, but the material is important.
  • Make sure to take a look at the CSS Grid Resources in the Additional Info section. There is a lot of good stuff there.
  • Assignment:
    Watch the video on CSS Grid Gallery with Flexbox Fallback - Duration 25:31
    • For this video, follow along with the video and recreate the page done in the video.
    • The start files are here
    • Drop your zipped site folder into the Canvas drop box in the Assignment module.
    • You can check the Canvas calendar for due dates.
    • Hint: This video and code can help with the required gallery in the Artist Assignment
Layer Comps in Photoshop
  • Optional: Watch Adobe video on Layer Comps in Photoshop duration 6:26
    • Layer comps can be good way to save multiple versions of a design in 1 file if you are using Photoshop.

Additional Info

CSS Grid Resources
Other Resources and Links

Sept. 19 - Week 4

Topics: Photoshop Art Boards, Media Queries, and More CSS Grid

Assignments

  • Message Assignment: Log into Canvas, click on the discussions link and reply to the discussion "Well Designed Websites" with the URL of a site you think is well designed, and give us 3 reasons why. Also describe who you think the target audience is. Try to enter your first post by Friday, so everyone will have time to reply. Reply to 1 other person's post with your comment or opinion on their site by Monday.
Photoshop Art Boards
Media Queries
CSS Grid
Continue the Artist Project
  • See the requirements here
  • Don't procrastinate!
  • Wireframes are due soon. There are links on the project page to Figma(online app) and Sketch (mac only, unfortunately), which are popular design tools, that can also be used for wireframing. Figma would be great to use for the wireframes. If you use figma, you can share the wireframes with me instead of uploading them. You can share figma files by clicking the share button in the top right while in figma. See the video Introduction to Figma for Wireframing for tips on using figma.
  • Check the canvas Calendar for due dates.

Additional Info

Photoshop Artboards Resources
Media Queries Resources
Hover Effect Overlay Text Sample Code
CSS Grid Resources(Some the same from last week)

Sept. 26 - Week 5

Topics: Figma, Card Layout and Still More CSS Grid

Assignments

Figma
  • Sign up for a Figma account if you haven't already.
    Use your Mission email address to sign up. It will be free :)
  • You can use figma for some things going forward like wireframes and/or comps.
  • Figma is covered extensively in GDS 072 Digital Imaging and User Interface Design, where there is a much more in depth look at it, and how it can be used for UI/UX. GDS 072 is part of our new User Experience and Interface Design Certificate.
  • If you haven't seen it, watch the Introduction to Figma video from GDS 045 - Duration 17:47
  • Figma does a great job of creating lots of video tutorials on how to use it. The Figma youtube channel is here. Take a look when you have time.
CSS Grid
Artist Project

Additional Info

More CSS Grid Resources
More Figma resources
Developer Tools
Review if necessary

Oct. 3 - Week 6

Topics: Responsive Web Design, Cards with CSS Grid, and Icon Fonts(Font Awesome)

Assignments

  • Read pages 485-513 in Learning Web Design on Responsive Web Design(Ch. 17)
    • This chapter is about Responsive Web Design, which we have kind of been doing already, and will do more of in the next few weeks.
    • Do or review Exercise 17-1 to practice responsive layout. You do not have to turn this in, but the practice helps.
  • If you have not already seen it in GDS 45, watch the video Basic Responsive inline Images(Youtube video) - Duration 5:28
    • If you use narrow columns, it can help prevent your images from leaking out of the columns. This is the most basic information on responsive images, and can easily be added to your Artist projects. We will be doing more advanced work with responsive images soon. There is no exercise due for this video.
  • Watch the video lecture on Creating Equal Height Boxes and Cards. This is actually from GDS 045, but is a little advanced for that class(sorry if you were in that class :). There is a section about using CSS Grid to do the layout for a group of cards. It also shows how you can mix flexbox and grid to create the best solution. Here are the files if you want to follow along.
  • Assignment:
    More cards! Watch the video Cards with CSS Grid - Duration 34:43

The aspect-ratio CSS from the video above is only now becoming well supported, so it might be a little risky to use right now. Shalabh reminded me of another method to crop images to a square or other shape, while hiding parts of the image. I think instagram uses it, or has used it. There is a good article on it here.

Artist Project

Additional Info

Responsive Web Design
More CSS Grid Resources
Color in Design
Jobs

Oct. 10 - Week 7

Topics: More RWD Principals and Personal Project Intro

Assignments

  • Assignment:
    Watch the video RWD Principles and Layout - Duration 46:12
    • Note: This video covere some of the pricipals and techniques involved in responsive design, but there are many more. Obviousely, flexbox, CSS Grid and other techniques also offer ways to make things 'responsive'
    • For this video, follow along with the video and recreate the page done in the video.
    • The start files are here
    • Drop your zipped site folder into the Canvas drop box in the Assignment module.
    • You can check the Canvas calendar for due dates.
Start the Personal Project

Additional Info

More Responsive Web Design Resources
Tools that can be used for creating comps(or wireframes)

Oct. 17 - Week 8

Topics: CSS Subgrid and Basic Responsive Images

Note: Adobe Max online conference is going on this week and is free. It has sessions on all areas of design. You can check out the Adobe Max Conference here.

Assignments

Continue the Personal Project

Additional Info

Responsive Images Articles
Tools that can be used for outputting images in multiple sizes and formats
Salaries and Jobs

Oct. 24 - Week 9

Topics: Advanced Responsive Images

Note: Adobe Max online conference was last week and is free. It has recrorded sessions on all areas of design. You can check out the Adobe Max Conference here.

Assignments

  • Self Quiz
    • Take the Kahoot Quiz Here. The highest score MAY get a bonus :) You can take it as many times as you want to get it all right!
      Use your Mission College email as identification. To take it again, use a new nickname by adding a number to the end of your email like [email protected] - 2
  • Read pages 139-146(Ch. 7 section on Adding SVG Images), and check out Chapters 23, 24 and 25 in Learning Web Design
    • Pages 139-146(Ch. 7) cover using SVG Images on pages, which is becoming very popular
      • Do Exercise 7-2 to practice using SVG Images if you wish
    • Ch. 23 covers Web Image Basics. You probably know a lot of this already, but check it out to make sure you are comfortable with all the details.
      • You could do the exercises in Ch. 23 for practice, but you do not have to turn them in.
    • Ch. 24 covers Image Asset Production and has more information about producing responsive images.
      • Do Exercise 24-3 to practice optimizing images, but you do not have to turn this in.
    • Ch. 25 covers SVGs in depth
    • Make sure to look at the part of Ch. 7 on Responsive Image Markup. It's on page 146 of the printed book(if anyone has that). You could do exercise 7-3 for practice, but you don't have to turn it in. This content is the subject of this weeks exercise.
  • Assignment:
    Watch the video Advanced Responsive Images - Duration 38:22
Continue the Personal Project

Additional Info

More Responsive Image Resources
Using SVGs on the web
Creating SVGs

Oct.  31 - Week 10

Topics: WebFonts, Icon Fonts and Responsive Navigation

Assignments

Complete the Personal Project

Additional Info

Icon Fonts
Responsive Typography
Responsive Navigation
Other Articles

Nov. 7 - Week 11

Topics: Bootstrap, Advanced Selectors, Git, Github, an extra credit project, and the Final Project! (Not all due at once ;)

Assignments

Group Project
  • Start Group Project
    • See the requirements here
    • Group Project Wireframes Due Nov. 21
    • Group Project Prototype with Comps Due Nov. 28
    • Group Project Due for testing Dec. 9
    • Group Project Final Version with Beta Tests and Report Due Dec. 12
  • Note: These dates are on various days of the week, not once a week on Mondays.
  • Also see the Canvas Calendar for due dates
  • There is a discussion in Canvas listing the team members. Please respond there to let me know who is filling the different roles on the team.
  • Watch the video Intro to Git and GitHub - Duration 27:08
    • You don't have to use git or github for the final project, but it does allow for collaboration on code in a project. It does take a bit to learn though, so feel free not to use it right now.
    • You do not have to turn anything in for this video.
  • There are more tools listed later to help with remote collaboration, which is a challenge.
  • Get a free upgraded invision account to use to on the final project and other projects.

Extra Credit Redesign Project

Additional Info

Accessibility
Recommended tools for the Final Project
  • figma
    • You could do both wireframes and comps in figma
  • Invision
    • Good for testing and sharing prototypes
  • dropbox
    • Good for sharing large files
  • google docs
    • good for sharing text files and copy
  • monday
    • May be good for project management(haven't tried this one)
Other Collaborative tools for Web Developers
Other Collaborative tools for Web Designers
Bootstrap Resources
Advanced Selector Resources

Nov. 14 - Week 12

Topics: Tailwind CSS, CSS Transitions and Animation

Assignments

Continue Group Project
  • Continue Group Project
    • See the requirements here
    • Group Project Wireframes Due Nov. 21
    • Group Project Prototype with Comps Due Nov. 28
    • Group Project Due for testing Dec. 9
    • Group Project Final Version with Beta Tests and Report Due Dec. 12
    • Note: These dates are on various days of the week, not once a week.
    • Also see the Canvas Calendar for due dates

Continue Extra Credit Redesign Project

Additional Info

Links about Web Animation
Layout

Nov. 21 - Week 13

Topics: Introduction to Javascript and CSS Custom Properties

Assignments

Continue Group Project

Continue Extra Credit Redesign Project

Additional Info

Javascript
Figma
InVision
Useful Techniques

Nov. 28 - Week 14

Topics: More Javascript, CSS Processors and the Parallax Effect

Assignments

Continue Group Project
  • Continue Group Project
    • See the project requirements here
    • Group Project Wireframes Due Nov. 21
    • Group Project Prototype with Comps Due Nov. 28
    • Group Project Due for testing Dec. 9
    • Group Project Final Version with Beta Tests and Report Due Dec. 12
    • Note: These dates are on various days of the week, not once a week.
    • Also see the Canvas Calendar for due dates

Continue Extra Credit Redesign Project

Additional Info

CSS Processors
Parallax Effect on Websites

Dec. 5 - Week 15

Topics: Javascript and User Testing

Assignments

  • Finish reading Chapter 22 in Learning Web Design on Using Javascript.
  • Watch the video on Javascript Variables and Conditional Statements - Duration 40:45
    • For this video, follow along with the video and recreate the pages done in the video.
    • The start files are here
    • You do not have to turn this in, but some of the info may be on the final exam(sorry again).
Continue Group Project
  • Complete Group Project
    • See the project requirements here
    • Group Project Wireframes Due Nov. 21
    • Group Project Prototype with Comps Due Nov. 28
      • These will include your comps. See above for links to using invision to create the prototype.
    • Complete Group Project Testing by Dec. 9
    • Complete any changes to the Group Project site as a result of your testing results
    • Group Project Beta Tests, Beta Test Summary and Final Version Due Dec. 12. Testing information is below.
    • Note: These dates are on various days of the week, not once a week.
    • Also see the Canvas Calendar for due dates

Beta test the site

User Testing tools for Web Designers and Developers

Complete Extra Credit Redesign Project

Exit Survey

  • Take the class exit survey in the Exercises module for more extra credit.

Additional Info

User Testing Resources

Dec. 12 - Week 16

Topics: Final Projects Due and Final Exam

Assignments

  • Final version of Group Project Due
  • 2 Beta Tests per person Due
  • 1 Beta test summary report per group due
  • Fill out the Final Project Peer Review Survey located in the Projects module in Canvas

Final Exam and other Information

  • Take the class exit survey in the Exercises module for more extra credit.
  • Final Exam - Available from 12:00 AM Thursday Dec. 16 to 11:59 PM Friday Dec. 18 PM(Open for about 48 hours)
    • The Final Exam can be taken in Canvas at any time between those listed above.
    • Let me know if you cannot take it at that time
    • The test is open book, but Do NOT colloborate on the exam or get help from another person.
    • There are about 50 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.
    • Important note: There may be questions on the exam that were from videos marked "Optional".
    • Log in to Canvas at the time listed above and look under the modules link for the exam.
    • You have 2 hours to complete the exam.
    • Click the submit button only when you are finished.
  • If you haven't already, take a look at these Certificates(You already have taken at least one class for them!)
    1. Web Design Certificate
    2. Web Developer Certificate
    3. UX and Interface Design Certificate
    4. GDS Department Website. We have classes on Javascript Wordpress, Photoshop and more.
  • Follow us on Instagram at:
    https://www.instagram.com/designatmission/
  • We are on Twitter too. https://twitter.com/designatmission
  • Make sure to like our facebook page at http://www.facebook.com/missioncollegedesign
  • Thanks for taking the class and I hope it was a little fun.

Class Links

Outside Links