GDS 46

Aug. 31 - Week 1

Topics: Introduction to the class

Assignments and Basic Information

• 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 25:58
• 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 probably the most popular editor used in web development. I would advise using it for all coding work done in the class. Some videos may be made using a number of different editor , but the actual code is the same no matter what editor you use. You CAN use any editor you want in the class.
• Highly suggested: Here is another video with more examples of using emmet, specifically in VS Code - Duration 17:36
  • emmet can save you a LOT of time when coding.
• Highly suggested: 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 online access to Safari Online. Here is the link to access the books. More details are here http://libguides.missioncollege.edu/oreilly-safari
  Highly suggested: 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: Mondays 3:30PM - 5:15PM and Wednesdays 10:30AM - 12:15PM online and in GC321B, unless otherwise note . 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.
• Assignment: Start Project 1: Bio Page
  • Create 1 web page about yourself. You only need to make 1 page.
  • 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 often change.
  • Here are example wireframes and other student work.
  • Extra credit if you use CSS Shapes on the assignment!
    • Here is an article on CSS Shapes from the book resources page
  • Wireframes are due first.
    • Here is a link to the Figma Team for Fall 26
    • Here is a link to the Figma Project where you can work on your Figma Wireframes, assuming you are using Figma for the wireframes. There is a start file there you can use. Duplicate it to start. Do not edit the original. If you have trouble with this link, try joining the team first at the link above.
    • Here is a video on Introduction to Figma - Duration 32:30
    • Here is a video from GDS 045 on using figma for wireframes if you would like to use figma, which is kind of the indiustry standard for wireframes. The interface has changed recently, so it will look a bit different, but the principals are the same.
    • You are only doing 1 page, but it would be good to do a mobile version and desktop version of your page.
    • There are lots of videos on using figma to make wireframes here
    • Here is a link to the page detailing how you can get a free upgrade to your figma account for students.
    • Here again are example wireframes and other student work.
  • See more instructions here

Additional Info

Review CSS and HTML Basics

• Watch videos from GDS 45 if you do not feel comfortable with some beginning concepts.  MOST of the GDS 045 and 046 videos are on youtube and public and can be found here. If you took the class recently, you may still have access. We may also use some GDS 045 videos for review or context throughout the semester.
• Review CSS basics if necessary here (optional) - Duration 29:26
  • 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.

CSS Shapes

• Here are a couple of links from the book on using CSS Shapes
  • CSS Shapes at the Experimental Layout Lab of Jen Simmons (labs.jensimmons.com/#shapes)
  • “A Redesign with CSS Shapes” by Eric Meyer (alistapart.com/article/redesign-with-css-shapes)
• Other links on CSS Shapes
  • Using CSS Shapes for Interesting User Controls and Navigation

Sept. 7 - Week 2

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

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, and CSS Positioning.

The Web Design Process

• Watch the video on The Web Design and Development Process - Methods and Resources - Duration 21:10
  • Here is a link to the page on the web design and development process. It has links to many resources.

NEW! Copilot as Tutor

Check out this page if you want to use copilot as a tutor in VSCode, which is allowed in the class. We are NOT using it to write whole pages or sections of pages. See the page above for details.

Flexbox

• If you haven't already, read chapter 17 on Flexbox in Learning Web Design
  • This will provide more background on Flexbox.
  • Remember you have free access to the book through Mission College here.
  • Optional: Do Exercises 17-1 through 17-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.
• Optional: If you are not familiar with the display property, you may want to Watch this short video on the Display Property, Learn CSS Display Property In 4 Minutes - Duration 4:14
• If you don't feel real comfortable with flexbox, you may want to watch these videos from GDS 045, especially the first one.
  • Introduction to Flexbox - Duration 22:37
  • Flexbox Container Properties - Duration 21:39
  • Flex Item Properties - Order and Alignment - Duration 14:27
  • Flex Item Properties - flex-grow, flex-shrink, and flex-basis - Duration - 27:39
• Assignment:
  Watch the video on Responsive Flexbox Layout Patterns - Duration 28:12
  • For this video, follow along with the video and recreate the page done in the video.
  • This exercise was extra credit later in the GDS 045 class, so you MAY have done it already. If so, you can turn in the file that you made.
  • 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.
    
• 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.
• Optional:
  Watch this video from GDS 45 on Responsive Layout with Flexbox and CSS Grid if you have not already seen this video, and you want to see Flexbox and CSS Grid used in a complete layout. We will be doing alot more on Grid soon. Use this start file(right click to download) if you want to follow along.
• Optional: Take a look at Ch. 4 of the book Responsive Web Design with HTML5 and CSS - Fourth Edition on Fluid Layout and Flexbox. You should have access to the book through your O'Reilly account. Login to Oreilly here. Go here for more details on how to access Oreilly http://libguides.missioncollege.edu/oreilly-safari

Multicolumn Layout

• Optional: Check out Multicolumn Layout as another method of creating columns
  • The section of Learning Web Design on Multicolumn layout in about halfway through Chapter 19, and has information on this technique. You may have to search the online version of the chapter, since there are no page numbers.
  • There is also a full article here
  • This is a pretty easy way to make text flow into columns, and can come in handy

CSS Positioning and Floats

• Optional: Review Ch. 16 of Learning Web Design on Floats and CSS Positioning if you do not feel comfortable with them. Float based layouts are not best practice anymore, but you MAY need to update a float based layout sometime, so it's good to know, and can still be used to wrap text around an image. Positioning is used in specific instances, although not usually for an entire layout. Do the exercises in Ch. 16 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.

CSS Shapes

• Look at the information in Ch. 16 of Learning Web Design on CSS shapes, which is pretty cool.
  • Here is an article on CSS Shapes from the book resources page
  • Here is a video from Jen Simmons on using CSS Shapes. There are more links in the book. Extra credit if you use CSS Shapes on the Bio Page Assignment!

Bio Project

• Assignment: Complete the Bio Page Project
  • See more details here
  • Finish the wireframe if you haven't already.
    • Remember, you can turn them in by submitting an image of the wireframe, and putting a copy of your project in the Figma Team Bio Page Wireframes Project.
      • Here is a link to the team to join in Fall 26
      • Here is a link to the Figma Project where you can work on your Figma Wireframes, assuming you are using Figma for the wireframes. There is a start file there you can use. Duplicate it to start. Do not edit the original.
      • Look for the Bio Page Wireframe Project there
  • Here are example wireframes and other student work.
  • Extra credit if you use CSS Shapes on the assignment!
    • Here is an article on CSS Shapes from the book resources page
  • 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

• A Complete Guide to Flexbox
  • Lots of people use this one
• Flexbox.io
  • A free 20 video course just on flexbox
• CSS Flexbox from W3Schools
• Basic concepts of flexbox from Mozilla
• Flexbox Froggy
  • A game to learn Flexbox. If you haven't played it before, you should. It's fun and helps with understanding flexbox.

CSS Shapes

• Here are a couple of links from the book on using CSS Shapes
  • Here again is an article on CSS Shapes from the book resources page
  • CSS Shapes at the Experimental Layout Lab of Jen Simmons (labs.jensimmons.com/#shapes)
  • “A Redesign with CSS Shapes” by Eric Meyer (alistapart.com/article/redesign-with-css-shapes)

CSS Positioning Review

• Here is a video on CSS Positioning from GDS 45, if you are fuzzy on what that is.
• CSS Positioning is discussed near the middle of Ch. 16 of Learning Web Design

Very Optional Floats Review(For historical purposes only)

• Note: Floats are no longer current to use for layout, but you may end up redesigning a site that uses them sometime, so it might be good to know.
• Here is a video on the basics of floats if you are not already comfortable with how they work.
• Watch this video on Layout with CSS Floats if you do not feel comfortable with layout using floats. 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.
• Here is an even simpler video on float layout from GDS 45
• Clearfix for Floats: Check out this page on using clearfix. Clearfix methods are used to contain floated elements in designs so they don't leak out of the container they are in. This can occur any time you are using floats, not just in float based layouts. The Learning Web Design book has information on Clearfix in Chapter 16. Here is a page from CSS Tricks on clearfix.
  • Stop Using the Old “Clearfix” (Some think it is bad)

Sept. 14 - Week 3

Topics: Finishing Flexbox, Design Principals, Starting CSS Grid, Information Architecture

Assignments

Finish the Bio Project. Remember, it's only 1 page :) Check the Calendar for Due dates.

Here are some more good videos on Flexbox, if you haven't seen them already

• Watch: Flexbox design patterns you can use in your projects - Duration 15:32
• Optional: Do you understand how Flexbox does what it does? - Duration 7:55
• Optional: Learn Flexbox in 15 Minutes - Duration 15:11

A little more Flexbox

• Assignment:
  Watch the video on Cards with Flexbox - Duration 19:42
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • The start file is slightly different from the one in the video to account for a couple of corrections to the .stats CSS rules and a missing div tag.
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • You can check the Canvas calendar for due dates.

Design Principals and Information Architecture

• Contrast, Repetition, Alignment, and Proximity are important design principals used in web design. If you haven't seen it already, watch the short video Intro 4 Foundational UI Design Principles | C.R.A.P. - Duration 9:15
• Assignment: Watch Information Architecture in UX design - Duration 3:32. A good, short video with simple definitions and techniques
• Optional: Watch What Is Information Architecture? (UX Design Guide) - Duration 17:19 - Mental Models and other topics in IA

Getting started with an Introduction to CSS Grid - we will start using it more next week

• If you can, check out the video Learn CSS Grid the easy way - Duration 37:03
• Look at A Complete Guide to Grid from CSS-Tricks
• Optional: Another video you might look at is Learn CSS Grid in 20 Minutes - Duration 18:34
• Try to take a look at Ch 18 in Learning Web Design on CSS Grid

Wireframing in Figma (for help with the Artist Project wireframes)

Here are some resources again on wireframing in Figma. These are also in the instructions pages in different places, but I thought I would link them again.

• Here is the video again, Introduction to Wireframing in Figma..
• Here is a start file you can use (from the video).
• Basics of Figma video from Figma Education

Artist Project

• Assignment: Start Artist Project - See the requirements here.
  • Sketches are due first (There are examples in the Discussion in Canvas)
  • Here is a good video from 2025 for beginners with Figma, covering many of the basics. It is a little long (1:10), but it's very good to know this. Just be aware that Figma changes all the time, which can be good and bad :)
  • 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. Again, figma is updated fairly often, so things have changed a bit.
  • Here is the link again to the figma team with projects.
    
  • Here is the link to the Fall 26 Artist Project Wireframes Project where you can put your figma wireframes, so I and others can see them there. You could work on them there, or save a copy there when you are ready to turn them in. 
    • Make sure you sign up for an education account before accessing.
  • Here are example wireframes and other student work
  • Check the Canvas Calendar for all due dates

Additional Info

• Review image file formats for the web here if necessary (from GDS 045)

More Information Architecture (from GDS 072)

• Information Architecture Essentials
  • Video series/class in Information Architecture
  • Lots of detail here if you have the time
  • Accessible through your Oreilly Online account
• The Easier Way to Create IA: Establish Information Priority - Duration 5:50 - An example of techniques for figuring out information priority
• Chris How - Digital Experiences and Information Architecture - Duration 39:18 - More in-depth discussion on the different ways you can organize information
• Information Architecture & Sketching for UI/UX Projects | Behind the Design - Duration 6:44 - A bit of a case study in building an app and the IA process

CSS Grid Resources

• A Complete Guide to Grid from CSS-Tricks
• Layout Land Videos on Youtube
• Grid by Example by Rachel Andrews
  • Videos for CSS Grid
  • Examples
  • Patterns(these are nice)
• CSS Grid Class by Web Bos
  • Videos from the same guy who did flexbox.io
• CSS Grid Playground from mozilla
• Ten modern layouts in one line of CSS
  • Pretty cool stuff, a lot using CSS Grid. We may look at similar code later.

Other Resources and Links

• Check out http://www.caniuse.com to see more about support for CSS Properties
• Figma blog. Lots of good articles.
• Check out draw.io for information architecture and sitemaps
• Local events on Web Design and Development from meetup.com