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.
• 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.
• Review Ch. 1-3 in Learning Web Design. They talk about the Web Design Process, such as creating wireframes. You should be able to get free online access to this book through Mission’s new online access to Safari Online. Go here for details and to sign up http://libguides.missioncollege.edu/oreilly-safari
  Here is a direct link to the book once you have the safari account.
• Assignment: Post in the "Introductions" discussion forum in Canvas. Give a short introduction to yourself, and about your expectations for the class. You can find the discussion forum under the Discussions link on the left in Canvas. I will check this to verify you are in the class. Make sure to reply to the post as soon as possible to avoid being dropped.
• Take the opening day survey in Canvas under the modules link
• Optional Office hours: Generally 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.
• 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

• 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

• 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. 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
• 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-rows / grid-columns includes information about the repeat function used in this example
  • 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

• 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