GDS 46

Aug. 23 - 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 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 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.
• 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 new online access to Safari Online. Go here for details and to sign up 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: Generally Monday and Wednesdays 10:30AM - 12:15PM on zoom and in GC321B. 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 Project where you can put a COPY of your Figma Wireframes, assuming you are using Figma for the wireframes.
    • 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

• Most, but maybe not all of the main GDS 46 videos can be found in this youtube playlist, but you should use this page to access ALL the videos.
• Watch videos from GDS 45 if you do not feel comfortable with some beginning concepts. Here is a link to all the GDS 45 Beginning Web Design Videos from Spring 24. Newer videos are in Canvas in the GDS 045 classes. If you took the class, you should still have acccess. We may also use them 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.

Dreamweaver

• Some of the videos may use Dreamweaver, but Dreamweaver is no longer required for the course. If you do want to use Dreamweaver while creating your pages, you can. Here are links to some videos on using Dreamweaver. They are not being updated, so the interface may be slightly different that the current one. These are older, optional videos for those who want to use Dreamweaver in the class. I'm assuming you will be using VSCode, however.
  • Introduction to the Dreamweaver interface V2 - Duration 35:24 - The starting file is linked here if you want to follow along with the video
  • GDES 46 Creating a site in Dreamweaver - Duration 23:08
  • GDES 46 Using the Files Panel in Dreamweaver - Duration 22:52
  • The Document Window and Live View in Dreamweaver - Duration 32:58
  • Creating a basic Page with Dreamweaver - Duration 31:14 - The source files are here if you want to follow along with the video
  • Assets Panel, Images and Smart Objects in Dreamweaver - Duration 33:03 - The start files are here if you want to follow along with the video
  • Text in Dreamweaver - Duration 31:52 - Download the source files here and follow along with the video if you wish
  • The CSS Designer Panel in Dreamweaver - Duration 39:51 - Download the source files here and follow along with the video if you wish
  • Tables in Dreamweaver - Duration 29:48 - Download the source files here and follow along with the video if you wish
  • Coding in Dreamweaver - Duration 31:50
  • Rollovers in Dreamweaver using Behaviors - Duration 15:29 - Download the source files here and follow along with the video if you wish
  • Dreamweaver Library Items, Snippets, and Templates - Duration 37:43 - Download the source files here and follow along with the video (if you want to)
  • There may be more videos on using Dreamweaver that will be available later in the semester when applicable.

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. 1 - 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 19:03
  • Here is a link to the page in the video on the web design and development process. It has links to many resources.

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. They are newish as of Fall 23, so you probably haven't seen them. Hopefully a lot of it would be review :)
  • 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 Layout with Flexbox if you have not already seen this video, and you want to see flexbox used in a complete layout. 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. Go here for 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 25
      • 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. 8 - Week 3

Topics: Finishing Flexbox, Design Principals, Starting CSS Grid, Information Architecture and Photoshop Layer Comps

Assignments

Finish the Bio Project. Remeber, 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
  • 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 pages 446-483 in Learning Web Design on CSS Grid(Ch. 16)

Optional: Layer Comps in Photoshop

• Optional: Check out this help page on Layer Comps in Photoshop
  • Layer comps can be good way to save multiple versions of a design in 1 file if you are using Photoshop.

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 very good video from 2024 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 25 Artist Project Wireframes Project so you can save a COPY of your figma wireframes, so I and others can see them there.
    • 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.
• More resources on CSS Grid

Other Resources and Links

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

Sept. 15 - Week 4

Topics: CSS Grid, Media Queries and Photoshop Art Boards

CSS Grid

• CSS Grid is becoming very popular as a method to lay out pages and elements. It's a more recent CSS thing than Flexbox, but browser support is good. It can be used with fallbacks for those browsers that don't support it yet, which would be people using old browsers, but is becoming less necessary.
• 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 - Fourth Edition on Layout with CSS Grid. You should have access to the book through your O'Reilly account. Go here for details and to sign up http://libguides.missioncollege.edu/oreilly-safari
• Highly suggested:Play Grid Garden is a game to kearn CSS Grid form 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 Guide to Grid
  • 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

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

Photoshop Art Boards

• Watch the video on Design with Artboards in Photoshop from Adobe - Duration 3:57
  • Photoshop is still used sometimes to design pages, but Figma is more the standard now.
• More videos in the Additional info section

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
• Responsive Web Design Basics from Google

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

Sept. 22 - Week 5

Topics: Figma and 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.
• New version. If you haven't seen one yet, watch the Introduction to Figma - 2024 - Duration 32:30
• 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

• Watch 3 short videos on the flexibilty of CSS Grid from Jen Simmons
  • Video: Min & Max Content Sizing in CSS Grid - Duration 7:41
  • Video: FR Units in CSS Grid - Duration 8:21
  • Video: MinMax in CSS Grid in CSS Grid - Duration 4:36
• Assignment:
  Watch the video on CSS Grid 2: Grid Lines and Names, the Repeat Function, and Responsive Grids - Duration 25:24
  • 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 more practice,  watch the video on CSS Grid Layout Using Grid Line Numbers, Names, and Spans - Duration 25:24
  • This is an older video that includes some fallback code which is probably not necessary anymore. 
  • For this video, you CAN follow along with the video and recreate the page done in the video. It is not required.
  • The start files are here
  • Some of these exercises are based in part on examples here and patterns here by Rachel Andrew.
  • Note: There is a missing closing } at the end of the styles in the video. Go ahead and add it.

Artist Project

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

Additional Info

More CSS Grid Resources

• Grid Examples is a collection of sites using CSS Grid
• Here is Eric Meyer's site done with CSS Grid, and here is an article about how he converted it, Practical CSS Grid: Adding Grid to an Existing Design. A nice story :)

More Figma resources

• Figma Youtube Channel from above
• Desktop App for macOS
• Desktop App for Windows
• Figma Downloads
• Figma Community

Developer Tools

• Watch Chrome Dev Tools 101: A Beginner's Guide to Using Dev Tools - Duration 17:24
• Watch How to debug CSS with Firefox Developer Tools - Duration 41:49

Review if necessary

• Review the video for The CSS Box Model if necessary here (optional) - Duration 31:22
• Review the video for Background Images if necessary here (optional) - Duration 33:03

Sept. 29 - 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 - Fourth 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
• 10 Web Skills that Pay - An Article from Creative Bloq - you are already doing some of them!

Oct. 6 - 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 - Fourth Edition". This chapter is hopefully review for you :)
• Reading: Look more closely at Ch. 3, "Media Queries And Container Queries" in the same book "Responsive Web Design with HTML5 and CSS - Fourth Edition". This chapter should be SOME review and some NEW (Container Queries, which are pretty cool). We may 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.
• Especially helpful might be 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
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here
  • 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
    • You probably noticed the mistake in the video. I should have used .stats instead of #stats for the stats sections, since you can only use an ID once on a page. I changed the start file, so you should be ok to start. Just make sure to use .stats instead of #stats in your code. We will see who reads this note ;)
    • 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.

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. 13 - Week 8

Topics: CSS Subgrid and Basic Responsive Images

Note: The Adobe Max online conference is happening soon or just happened, and it is free to watch the sessions. It has sessions on all areas of design. You can check out the Adobe Max Conference here.

Subgrid

• We did a little subgrid in the 3rd CSS Grid Exercise, but we'll look at it a bit more this week.
• Check out this article about subgrid called Learn CSS Subgrid
  • Subgrid is a newer part of CSS Grid that is not really ready to be used because of lack of browser support in Chrome, but it will be coming and helps when you want nested grids that follow the master grid.
• Watch the helpful short video on subgrid, "Easy and more consistent layouts using subgrid" - Duration: 8:00
• Here are a couple more videos on subgrid. For some reason(I can't figure out why) support is lagging on Chrome, so this is still in the 'future' category.
  • Creating a robust grid system using subgrid
  • You can't do this without subgrid
  • There are more resources in the additional info section, including some from the following video
• Assignment:
  Watch Cards with CSS Subgrid - Duration 11:01
  • For this video, follow along with the video and recreate the page done in the video.
  • Here is the start file to use.
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • You can check the Canvas calendar for due dates.

Images and Responsive Images

• Suggested Reading: Look at Ch. 9, "Responsive Images" in the book "Responsive Web Design with HTML5 and CSS - Fourth Edition". This chapter is hopefully review for you :)
• Optional but encouraged: Review the following videos from GDS 045 about images for image basics
  • Images and File Types
    Duration 47:07
    • This video shows how to export different typoes of images. Here are the files if you want to follow along.
  • Background Images
    Duration 33:08
  • Basic Inline Images
    Duration 34:10
  • Processing and Exporting an Image - Duration 32:02. This one goes over some ways to clean up images.
  • Exporting from Bridge Using the Export Panel - Quick Tip - Duration 5:49 This is another way to export images to use on pages.
• Review parts of Ch. 27 in  Learning Web Design on Responsive Image Markup
  • This chapter covers some aspects of Responsive Images.
  • Remeber, the minimal thing is to add
    max-width:100%;
height:auto;
    to your images
• Extra Credit Assignment:
  Watch the video Basics of Responsive Images - Duration 37:55
  • 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.
  • You don't HAVE to do this one, but you do need to know the material.
  • See the Additional Info section for apps that you can use to export images.
• Watch the video Luke Wroblewski - Mobile Design Essentials Part 1 - Conversions@Google 2015 - Duration 1:18:53
  • Post important or interesting points from the video in the discussion forum Luke Wroblewski Video Comments
    • Post 1 or 2 points from the video that you thought were important or interesting
    • Comment on at least 1 point by others
    • The forum is under the lessons link in Canvas
    • This video is a few years old, but has some good insight into mobile design.
• Very Optional Exercise - Watch the video CSS Sprites - Duration 25:47
  • For this video, follow along with the video and recreate the page done in the video.
  • The start files are here
  • You do not have to turn in this exercise!

Continue the Personal Project

• See the requirements here
• Finish your wireframes which are due pretty soon.
• Check the Canvas Calendar for due dates.

Additional Info

More Subgrid resources

• CSS Subgrid - from 12 Days of Web
• CSS subgrid - from web.dev
• What is CSS Subgrid? A Practical Tutorial

Responsive Images Articles

• Responsive Images - from mdn Web docs
• Responsive Images - from web.dev
  • This is a good article with some tips, although I don't aggree with everything in it :)
• Responsive Images 101, Part 1: Definitions

Tools that can be used for outputting images in multiple sizes and formats

• Figma
  • Here is a video from Figma on importing and exporting images.
  • Here is a page on Guide to exports in Figma
• Photoshop generator to create images from layers in different versions
  • Photoshop generator tutorial article
  • Video Generate Image Assets AS YOU WORK! - Photoshop CC Tutorial (youtube video)
• Sketch
  • Sketch can output multiple versions of images
  • Video Exporting Assets in Sketch 3 (youtube video)

Salaries and Jobs

• Look at a Salary Guide for Creatives
  • Glossary of job descriptions

Oct. 20 - Week 9

Topics: Container Queries and Advanced Responsive Images

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 Queries and Container Queries" in the book "Responsive Web Design with HTML5 and CSS - Fourth Edition".

Important! This week, you can do Assignment Option 1 about Container Queries, which is fairly new, OR option 2 about Advanced Responsive Images. This is an older video, but is still accurate. I may add more material on Responsive Images later in the week.

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 cehcck them out first :) See more in the Addition 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 s 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 Addition Info section.
    • Responsive Images: Use Cases and Documented Code Snippets to Get You Started
    • 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

• Article: CSS Container Queries from CSS Tricks
• Article: Getting started with CSS container queries

More Responsive Image Resources

• 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
• Swapping Images with the Sizes Attribute

Using SVGs on the web

• The complete guide to SVG
• Everything You Need To Know About SVG
• Using SVG
• SVG ON THE WEB A Practical Guide

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!
  • Animating SVG Files With SVGator
  • svgator to animate SVGs

Oct.  27 - Week 10

Topics: Responsive Typography, WebFonts, Responsive Navigation and Icon Fonts

Responsive Typography

• If you are not already comfortable with the general principles of Typography, take a look at What Is Typography, and Why Is It Important? A Beginner’s Guide - 14 min read
• Read the section on Web Fonts in Ch. 12 in Learning Web Design if you don't know about using custom fonts on the web.
  • Make sure you are comfortable with the rest of the content in Ch. 12 on formatting text
• See the Additional Info section for resources on Responsive Typography, especially the first video
• Optional Reading: There is a section on Web Typography in the "Responsive Web Design with HTML5 and CSS - Fourth Edition" book.
• Extra Credit Assignment:
  Watch the video Responsive Typography with CSS Custom Properties and clamp - Duration 39:27
  • I know you are completing the Personal Project, so this exercise is extra credit!
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here
  • A bit aboput clamp is in last week's Conttainer Queries video.
  • Even if you don't do this extra credit assignment, it has important information to know, so maybe you might just watch it on high speed playback. I can't gurantee your safety if you do though :)
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
• Here is an article on using Google Fonts, which is also covered a little in the previous video, and in the video below.
• Bonus Exercise (No points):
  Watch the video Using Web Fonts - Duration 20:08
  • I know you are completing the Personal Project, so this exercise is extra credit!
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
• See more links to resources about Responsive Typography in the Additional Info section.

Responsive Navigation

• Hopefully you already have been using these, but make sure to check your sites in mobile design/RWD modes in browsers
  • Simulate Mobile Devices with Device Mode in Chrome DevTools
  • Responsive Design Mode (in firefox)
• Read the sections on Fluid Typography and Responsive Navigation in Ch. 19 of  Learning Web Design
  • Exercise 19-2 has a method to create basic responsive navigation.
• Highly Suggested: Watch the video Responsive Navigation - Duration 24:45
  • This optional (no points) exercise can help with creating responsive navigation for your site.
  • Start at 15:10 in the video to see responsive navigation with a hamburger menu/toggle to display navigation on mobile.
  • For this video, follow along with the video and recreate the page done in the video.
  • The start file is here - if you want to follow along
  • Here is the article A Brief Overview On Responsive Navigation Patterns mentioned in the video.
  • Here is the tutorial that the exercise page is based on.
    How to Build a Responsive Navigation Bar using CSS Flexbox and Javascript
  • You do not have to turn this exercise in.
  • Here is another video on creating Basic Responsive Navigation Panels.
    It is an older video covering some of the examples in more depth.
    • Here are the start files for this optional/older one if you want to take a look.
• See more links to resources about Responsive Navigation in the Additional Info section, including a nice tutorial for another hamburger menu.

Continue the Personal Project

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

Additional Info

Responsive Typography

• Article: Modern Fluid Typography Using CSS Clamp
  • This is the one with the scary math from the video :)
• Article: A guide to responsive typography
  Creating an efficient typography design system to adopt responsive web design.
• Video: Truly Fluid Typography with 1 CSS PROPERTY!
• Video: Responsive Typography with CSS Clamp
• Responsive And Fluid Typography With vh And vw Units
• Precise control over responsive typography
• The rules of responsive web typography
• 9 responsive typography tips

Responsive Navigation

• How to create Responsive Top Navigation from W3 Schools
• Here is another one with a dropdown from W3 Schools (no, they are not paying me)
• Older but still relevant articles
  • Responsive navigation patterns by Brad Frost
  • Complex navigation patterns for responsive design by Brad Frost
  • Adventures in Responsive Navigation
    • This one has some very nice examples and code, although a bit dated
  • Hamburger Menus and Hidden Navigation Hurt UX Metrics
  • How to build a responsive navbar with a toggle menu using Flexbox

Icon Fonts

• Icon Fonts are Awesome from CSS-Tricks
• Font Awesome. A very popular way to add icons to your website.
• Video: How to use font awesome icons in 2020
• The 50 Best Free Icon Fonts for UI Design
• Bye the way, I used fontawesome for the cool Jedi icon at the top of this page. Didn't know I was secretly a Jedi, did you? ;)

Other Articles

• My Head Hurts! Cognitive Friction in the Age of Mobile
• Optional: Check out this article, Here’s How to Become a UX Designer in 2023, if you are interested.