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 - Fifth 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

Sept. 21 - Week 4

Topics: CSS Grid and Media Queries

CSS Grid

• CSS Grid is becoming very popular as a method to lay out pages and elements. It is a modern CSS layout system for arranging content in both rows and columns. You would probably use Grid when the layout needs coordinated control in two dimensions (rows and columns), and you would use Flexbox when you are thnking about one dimension, such as a row OR a column. CSS Grid and Flexbox work well together rather than competing with one another.
• If you haven't read it already, read Ch. 18 in Learning Web Design on CSS Grid
  • Optional: Do some of the exercises in Learning Web Design for practice in using  CSS Grid. You do not have to turn these in, but the material is important.
• 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
• Optional: Take a look at Ch. 5 of the book Responsive Web Design with HTML5 and CSS - Fifth Edition on Layout with CSS Grid. You should have access to the book through your O'Reilly account. You can access O'Reilly books here for free. Go here for more details http://libguides.missioncollege.edu/oreilly-safari
• Highly suggested:Play Grid Garden is a game to learn CSS Grid from those that brought you Flexbox Froggy . What! We have to play a game? YES! It's fun ;) and it will help you get better at CSS Grid.
• Make sure to take a look at the other CSS Grid Resources in the Additional Info section. There is a lot of good stuff there.
• Links related to the CSS Grid Gallery video from this week
  • This code is adapted from Rachel Andrew's Header, footer, centre panel containing as many items as fit
  • A Complete CSS Grid Layout Guide
  • Repeat CSS function
  • grid-auto-columns
  • grid-auto-rows
  • Auto-Sizing Columns in CSS Grid: 'auto-fill' vs 'auto-fit'
  • An Introduction to the `fr` CSS unit
• More resources on CSS Grid
• Assignment:
  Watch the video on Introduction to CSS Grid - Duration 37:38
  • 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.
• Highly suggested: For help with a gallery for the Artist Project, watch the video on CSS Grid Gallery with Flexbox Fallback - Duration 25:31
  • For this video, you CAN follow along with the video and recreate the page done in the video, if you wish.
  • The start files are here
  • You do not have to complete this exercise, but again, this video and code can help with the required gallery in the Artist Assignment
  • It is a slightly older video, so some of the fallback code is probably not necessary, but will cause no harm if you include it

Assignments

• Assignment: 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.

Media Queries

• Media queries adapt CSS to screen size, orientation, and user preferences. Start with a usable narrow-screen layout, then add breakpoints when the content needs more space—not for specific devices. Use relative units such as rem and test between breakpoints.
• If you are fuzzy on media queries, here is a quick intro, Learn CSS Media Query In 7 Minutes - Duration 7:11
• Here is another quick intro, Tutorial: Learn how to use CSS Media Queries in less than 5 minutes - Duration 4:29
• Optional: For more in-depth uses, watch CSS Media Queries & Responsive Web Design tutorial for Beginners - Duration 27:02
• Optional: Watch the video Media Queries - Duration 35:46
  • This is an older video from me with background on using media queries. It should still be OK as far as accuracy.
  • Download the source files here and follow along with the video if you wish. You do not have to turn this exercise in.

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 Wireframing in Figma for tips on using figma.
  Here is the link to our Figma Team this semester. You should see a project there for Artist Project Wireframes.
• Check the canvas Calendar for due dates.

Additional Info

• Review image file formats for the web here if necessary

Media Queries Resources

• Using media queries from MDN web docs
• Responsive Web Design - Media Queries from W3schools
• CSS Media Queries - Examples from W3schools
• CSS @media Rule from W3schools
• Media queries from web.dev
• Responsive web design basics from web.dev

Hover Effect Overlay Text Sample Code

• You might need to hunt through these files a little to see what works

More CSS Grid Resources

• Learn CSS Grid. This is a pretty neat collection of tips and techniques with CSS grid.
• CSS Grid Layout documentation from MDN Web Docs
• 8 Common Website Layouts Built with CSS Grid

Photoshop Artboards Resources

• How to Use Artboards in Photoshop (UX / UI / Web Design in Photoshop) video - Duration 28:28

Oct. 5 - Week 6

Topics: Responsive Web Design and More CSS Grid

Responsive Web Design

• Important! Reading: Chapter 19 in Learning Web Design on Responsive Web Design
  • 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.
• Highly suggested: Reading: Check out Ch. 1, "The Essentials of Responsive Design" in the book "Responsive Web Design with HTML5 and CSS - Fifth Edition". This newer text goes over more basics of responsive design. You should be able to access the book through your free student O'reilly account.
• 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.
• Optional: video: Check out the video 5 simple tips to making responsive layouts the easy way - Duration 15:53 from Kevin Powell. There are some more good videos from him on responsive design over the next couple of weeks.
• Some of you probably need to use a hamburger menu for responsive navigation on the Artist Project. Here is a video from later on that.
• Optional: 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. You will see a later video about doing cards with CSS Grid.  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.

Assignments

• Extra Credit:
  Watch the video on CSS Grid 3: Explicit vs Implicit Grids, Subgrid and Grid Template Areas - Duration 26:48
  • 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.
• Highly suggested: For even more practice,  watch the video on CSS Grid Layout with Grid Areas, Nested Grids, and Float Fallback - Duration 29:39
  • For this video,  you CAN follow along with the video and recreate the page done in the video.
  • The start file is here
  • This exercise is optional practice since you are finishing the Artist site this week. It's VERY good to know this information, however.
    Also, the float and flexbox fallback code is probably not necessary anymore, but fallbacks in general can be a good idea with newer CSS features.

Artist Project

• See the requirements here
• Due Soon! Check the Canvas Calendar for due dates.

Additional Info

Responsive Web Design

• Video: A practical guide to responsive web design - Duration 23:13 from Kevin Powell
• Video: Are you writing responsive CSS the wrong way? - Duration 14:14
  • This is another video from Kevin Powell referencing CSS Zengarden and how you could apply RWD principles to make a version of the page.
• HTML Responsive Web Design from W3 Schools
• Responsive Web Design Basics from Google
• Responsive Web Design by Ethan Marcotte May 25, 2010 - The Origin Story
• BTW here is Ethan Marcotte's personal site, built using CSS grid

More CSS Grid Resources

• The Holy Grail Layout with CSS Grid from CSS Tricks
• The Auto-Flowing Powers of Grid’s Dense Keyword from CSS-Tricks
• Video: Floats, Flexbox, Grid? The progression of CSS layouts - Duration 26:59
• Video: Responsive CSS Grid with NO MEDIA QUERIES! - Duration 20:03
• Video: The Magic of CSS Grid AUTO-FIT vs AUTO-FILL - Duration 11:24

Color in Design

• 12 colours and the emotions they evoke - A web designer's guide to using colour to target key audiences. By Jerry Cao

Jobs

• Check out this Salary Guide
  • Glossary of job descriptions

Oct. 12 - Week 7

Topics: More RWD Principals, Figma links, More CSS Grid, and Personal Project Intro

More Responsive Web Design

• Highly suggested: Make sure to take another look at Ch.19 of Learning Web Design, which is all about RWD
• More Suggested Reading: Review Ch. 2, "Writing HTML Markup" in the book "Responsive Web Design with HTML5 and CSS - Fifth Edition". This chapter is hopefully review for you :)
• Reading: Look more closely at Ch. 3, "Media and Container Queries" in the same book "Responsive Web Design with HTML5 and CSS - Fifth Edition". This chapter should be SOME review and some NEW (Container Queries, which are pretty cool). We will see more about Container Queries later. They are fairly bleeding edge.

Links to resources and tutorials about Figma and Design

• Here is a link to the GDS 072 class from Spring 23 with links to tons of videos and articles about Figma and design in general. Feel free to take a look in your free time ;) especially if you are having trouble using Figma for wireframes. I think some of you have taken GDS 072, and some haven't, but the videos and links are available to you. You might want to bookmark this one, even some of the material is getting a little dated.
• Again, here are the links to Introduction to Figma and Introduction to Wireframing in Figma

Assignments

• This week, choose at least 1 of the following 2 exercises to do. If you do both, 1 will be extra credit. It's important to know the material in the RWD Principles and Layout exercise, but it may be mostly review for you. The Cards with CSS Grid exercise lets you apply some of the things you have been doing in other exercises with CSS Grid. It's important to know the material in both videos, even if you don't do both exercises.
• Assignment:
  Watch the video RWD Principles and Layout - Duration 31:28
  • Note: This video covers some of the principals and techniques involved in responsive design, but there are many more. Obviously, 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.
• Assignment:
  More cards! Watch the video Cards with CSS Grid - Duration 34:43
  • This one is a little older, but is still accurate.
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here.It has been updated slightly from the one in the video.
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • Here are some of the links in the video
    • Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit
    • Auto-placement in CSS Grid Layout
    • object-fit
    • aspect-ratio
    • Designing An Aspect Ratio Unit For CSS
    • Aspect Ratio Boxes
    • Ultimate CSS Gradient Generator
    • Font Awesome
    • I have updated the start file slightly from the one in the video to make some small changes and corrections.

Start the Personal Project

• See the requirements here
• Here are example wireframes and other student work.
• If you use Figma for the Wireframes and/or Comps, please turn in exported image files in Canvas and put a COPY of your figma file in our class Figma team, in the appropriate project.
  • Here is a link to the figma project for your wireframes OR comps this semester
• Here is the link to some sample wireframes and comps from previous semesters
• Check the Canvas Calendar for due dates.

Additional Info

More Responsive Web Design Resources

• this is responsive by Brad Frost
• Responsive Patterns by Brad Frost
• Responsive Resources by Brad Frost
  • This one has links to more resources than you can use ;)
• You can see how your page would look on different devices by using these browser features(instructions are linked below)
  • Chrome Device Mode
  • Firefox Responsive Design Mode

Tools that can be used for creating comps(or wireframes). You probably already know this, but...

• Figma - This is now kind of an industry standard.
  • Figma Resources
  • Figma Guides and Best Practices
• Photoshop
  • Some still use Photoshop for designing pages
  • See the earlier Layer Comps in Photoshop video here - duration 6:26
• Sketch 3
  • Sketch is a very popular tool for front end design, but has lost market share to Figma.
  • Here is a link to the education store discount
  • Intro to Sketch - Beginners guide to Sketch Basics (youtube video)

Oct. 26 - Week 9

Topics: Container Queries and Advanced Responsive Images

• Watch the video Design Will Never Be The Same - Duration 37:38
  • Post important or interesting points from the video in the discussion forum Design Will Never Be The Same
    • Post 1 or 2 points from the video that you thought were important or interesting by the first due date
    • Comment on at least 1 point by others by the 2nd due date
    • The forum is under the lessons link in Canvas

Important Note: This Week, you can do EITHER the Container Queries Exercise OR the Advanced Responsive Images Exercise

Container Queries

• Suggested Reading: Look at Ch. 3, "Media and Container Queries" in the book "Responsive Web Design with HTML5 and CSS - Fifth Edition".
• Important! This week, you can do Assignment Option 1 about Container Queries, OR, option 2 about Advanced Responsive Images. This is an older video, but is still accurate.
• Assignment Option 1 (see above):
  Watch the video Container Queries - Duration 24:45
  • 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.
  • Here are some sites shown in the video. You might want to check them out first :) See more in the Additional Info section.
    • CSS container queries
    • CSS Viewport Units: vh, vw, vmin, and vmax

More Responsive Images

• Optional: Images and File Types
  Duration 47:07
  • This would be good to look at if you don't feel like you know a lot about exporting images. This is a new, updated video from the beginning class, GDS 045.
  • The video shows how to export different types of images. Here are the files if you want to follow along.
• Important! Check out Ch. 7 of Learning Web Design on adding images and the 3 other chapters 26-28 on Image Optimization, SVGs and more topics.   
  • Check out the section of Ch. 7 covering using SVG Images on pages, which is becoming very popular
    • Do Exercise 7-2 to practice using SVG Images if you wish
  • Ch. 26 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. 26 for practice, but you do not have to turn them in.
  • Ch. 27 covers Image Asset Production and has more information about producing responsive images.
    • Do Exercise 27-1 to practice optimizing images, but you do not have to turn this in.
  • Ch. 25 covers SVGs in depth
  • Important! If you didn't already, make sure to look at the part of Ch. 19 in Learning Web Design on Responsive Image Markup.   You could do exercise 19.1 for practice, but you don't have to turn it in. This content is the subject of this weeks exercise.
• Assignment Option 2 (see above):
  Watch the video Advanced Responsive Images - Duration 38:22
  • 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.
  • Here are some sites shown in the video. See more in the Additional Info section.
    • Using responsive images in HTML from MDN
    • The anatomy of responsive images

Continue the Personal Project

• See the requirements here
• Here is the link to the figma project where you can share your wireframes
• Check the Canvas Calendar for due dates.

Additional Info

Container Queries and Container Query units

• An Interactive Guide to CSS Container Queries
• Article: CSS Container Queries from CSS Tricks
• Article: Getting started with CSS container queries

More Responsive Image Resources

• Learn Images Course
  • It covers SVG, raster formats like JPEG, PNG, and WebP, and a deep dive into responsive images.
• Optional Video: srcset and sizes attributes - [ images on the web | part one ] - Duration 30:07
• Optional Video: Reduce image size: use srcset to automatically choose the right image - Duration 3:33
• The anatomy of responsive images
• The Picture element
• Responsive images

Using SVGs on the web

• Including vector graphics in HTML from MDN
• Vector images from web.dev Learn Images
• SVG Tutorial from MDN (optional, more in depth)

Creating SVGs

• BOXY SVG SCALABLE VECTOR GRAPHICS EDITOR
• Inkscape
  • A free vector tool for SVGs
• SVGOMG
  • Optimizing tool for SVGs
• Adobe Illustrator
  • Can make SVGs, but it is a very deep program
• SVGs can also be animated!
  • svgator to animate SVGs