GDS 46

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

NEW! Copilot as Tutor

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

Flexbox

• If you haven't already, read chapter 17 on Flexbox in Learning Web Design
  • This will provide more background on Flexbox.
  • Remember you have free access to the book through Mission College here.
  • Optional: Do Exercises 17-1 through 17-3 to practice using Flexbox. You will make a menu bar, a flexible menu, and change the order of items. You do not have to turn these in, but the material is important.
• Optional: If you are not familiar with the display property, you may want to Watch this short video on the Display Property, Learn CSS Display Property In 4 Minutes - Duration 4:14
• If you don't feel real comfortable with flexbox, you may want to watch these videos from GDS 045, especially the first one.
  • Introduction to Flexbox - Duration 22:37
  • Flexbox Container Properties - Duration 21:39
  • Flex Item Properties - Order and Alignment - Duration 14:27
  • Flex Item Properties - flex-grow, flex-shrink, and flex-basis - Duration - 27:39
• Assignment:
  Watch the video on Responsive Flexbox Layout Patterns - Duration 28:12
  • For this video, follow along with the video and recreate the page done in the video.
  • This exercise was extra credit later in the GDS 045 class, so you MAY have done it already. If so, you can turn in the file that you made.
  • The start files are here
  • Drop your zipped site folder into the Canvas drop box in the Assignment module.
  • You can check the Canvas calendar for due dates.
    
• If you have never played it, Flexbox Froggy is a great way to learn flexbox and get a feel for how to use many of the properties related to flexbox.
• Optional:
  Watch this video from GDS 45 on Responsive Layout with Flexbox and CSS Grid if you have not already seen this video, and you want to see Flexbox and CSS Grid used in a complete layout. We will be doing alot more on Grid soon. Use this start file(right click to download) if you want to follow along.
• Optional: Take a look at Ch. 4 of the book Responsive Web Design with HTML5 and CSS - Fourth Edition on Fluid Layout and Flexbox. You should have access to the book through your O'Reilly account. Login to Oreilly here. Go here for more details on how to access Oreilly http://libguides.missioncollege.edu/oreilly-safari

Multicolumn Layout

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

CSS Positioning and Floats

• Optional: Review Ch. 16 of Learning Web Design on Floats and CSS Positioning if you do not feel comfortable with them. Float based layouts are not best practice anymore, but you MAY need to update a float based layout sometime, so it's good to know, and can still be used to wrap text around an image. Positioning is used in specific instances, although not usually for an entire layout. Do the exercises in Ch. 16 if you want to practice CSS Positioning, and if you have not already looked at these. These exercises are optional, and are not to be turned in. The information on float based layouts is for reference only.

CSS Shapes

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

Bio Project

• Assignment: Complete the Bio Page Project
  • See more details here
  • Finish the wireframe if you haven't already.
    • Remember, you can turn them in by submitting an image of the wireframe, and putting a copy of your project in the Figma Team Bio Page Wireframes Project.
      • Here is a link to the team to join in Fall 26
      • Here is a link to the Figma Project where you can work on your Figma Wireframes, assuming you are using Figma for the wireframes. There is a start file there you can use. Duplicate it to start. Do not edit the original.
      • Look for the Bio Page Wireframe Project there
  • Here are example wireframes and other student work.
  • Extra credit if you use CSS Shapes on the assignment!
    • Here is an article on CSS Shapes from the book resources page
  • Don't forget to validate your assignment by checking the file at: http://validator.w3.org/ Click on Validate File by Upload near the top, and then click the browse button, locate your file, and submit. Make any corrections necessary so you get the happy, green, OK message.
  • To turn in assignments with multiple files or folders, it works best if you put all files in a folder and zip the folder. It is important to name your folder correctly BEFORE you zip it to send, so I know who's folder it is. Please name you folder like this firstname_lastname_assignX. Then when you zip the folder, I will know it is yours. Don't rename any files of folders inside your site folder before sending, as that will probably break things. To zip a folder on a PC, create the folder with your name on it like this firstname_lastname_assignX and put the files needed in it, then right click, select "send to," and finally "compresses (zipped) folder". On a mac, control click or right click on the folder and select compress. Remember to name the folder before compressing it, so I can see who's it is when it is uncompressed.
  • Drop the zip files into the drop box under the Projects module in Canvas.

Additional Info

Flexbox Resources

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

CSS Shapes

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

CSS Positioning Review

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

Very Optional Floats Review(For historical purposes only)

• Note: Floats are no longer current to use for layout, but you may end up redesigning a site that uses them sometime, so it might be good to know.
• Here is a video on the basics of floats if you are not already comfortable with how they work.
• Watch this video on Layout with CSS Floats if you do not feel comfortable with layout using floats. This is a slightly older video on how to create a fixed layout with Floats, but you may run into sites like this, especially if doing a redesign. Use this start file(right click to download) if you want to follow along.
• Here is an even simpler video on float layout from GDS 45
• Clearfix for Floats: Check out this page on using clearfix. Clearfix methods are used to contain floated elements in designs so they don't leak out of the container they are in. This can occur any time you are using floats, not just in float based layouts. The Learning Web Design book has information on Clearfix in Chapter 16. Here is a page from CSS Tricks on clearfix.
  • Stop Using the Old “Clearfix” (Some think it is bad)