GDS 46

Web Design and Development 2 - Fall 21 - Section 71712

Skip to the current week

Weekly Instructions

Aug. 30 - Week 1

Topics: Introduction to the class

Assignments

  • 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 26:28
    The video mentions using Brackets for coding, but Adobe is ending support for that app. You probably want to use VS Code instead, which is becoming sort of a standard. You can download it here.
    If you are not familiar with VS Code, watch the video here. VS Code is becoming 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 patter what editor you use. You CAN use an editor you want in the class.
  • 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 Mondays 4:30PM - 6:00PM and Tuesdays 10:30AM - 12:30PM through Zoom. Check the Announcements section 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

Additional Info

Review CSS and HTML Basics

CSS Shapes

Sept. 6 - Week 2

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

Important Note: Adobe has stopped supporting the Brackets code editor as of last week(Sept. 1), and has made it complicated to download now, if you don't already have it, so I suggest you use VS Code going forward to do the coding in the class(download here). Sorry about the abrupt change. So, here is a video from the GDS 45 class on switching to VS Code from Brackets, and includes some useful VS Code extensions. VS Code and extensions change all the time, so things may change rapidly. However, VS Code is becoming very popular and seems to be emerging as a standard. The vidoes in the class were done using different editors like Dreamweaver, Brackets and VS Code, but remember the code is the same. It's just a different editor.

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, CSS Positioning and Float Based Layouts(Review).

  • Watch the video on The Web Design and Development Process - Methods and Resources - Duration 19:03
  • If you haven't already, read the section on Flexbox in Ch. 16 of Learning Web Design
    • This will provide more background on Flexbox.
    • Do Exercises 16-1 through 16-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.
  • Assignment:
    Watch the video on Display Options and Flexbox - Duration 33:02
    • You may have seen this video in the GDS 045 class, but this time you will turn in the exercise (Sorry about the review if you have already seen this video, but I want to make sure everybody is on the same page as we get going)
    • 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.
  • 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. 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.
  • 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.
  • Check out Multicolum Layout as another method of creating columns
    • Page 420 of Learning Web Design has information on this technique
    • There is also a full article here
    • This is a pretty easy way to make text flow into columns, and can come in handy
  • Optional: Review Ch. 15 of Learning Web Design on Floats and CSS Positioning if you do not feel comfortable with them. Float based layouts are going away, but you MAY need to update a flaot based layout sometime, so it's good to know. Do the exercises there if you want to practice layout with floats, and if you have not already looked at these. These exercises are optional, and are not to be turned in. There are more resources on float based layout in the Additional Info section.
  • Look at the information in Ch. 15 of Learning Web Design on CSS shapes, which is pretty cool, although I'm not sure it is being used too much out in the wild... Yet.
  • Complete the Bio Page Project
    • See more details here
    • Extra credit if you use CSS Shapes on the assignment!
    • 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

CSS Shapes

CSS Positioning Review

Floats Review

Sept. 13 - Week 3

Topics: More Flexbox, Intro to CSS Grid and Photoshop Layer Comps

Note: Tuesday online Office Hours are moving to Friday 10:30-12:30 for this week only.

Assignments

Here are some more good videos on Flexbox
CSS Grid
  • CSS Grid is becoming more popular as a method to lay out pages and elements. It's a fairly recent CSS thing, and should perhaps be used with care for a while longer, and perhaps with fallbacks for those browsers that don't support it yet.
  • 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
  • If you haven't read it already, read pages 446-483 in Learning Web Design on CSS Grid(Ch. 16)
    • Do Exercises 16-4 through 16-6 to practice using CSS Grid. You do not have to turn these in, but the material is important.
  • Make sure to take a look at the CSS Grid Resources in the Additional Inof section. There is a lot of good stuff there.
  • Assignment:
    Watch the video on CSS Grid Gallery with Flexbox Fallback - Duration 25:31
    • 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.
    • Hint: This video and code can help with the required gallery in the Artist Assignment
Layer Comps in Photoshop
  • Optional: Watch Adobe video on Layer Comps in Photoshop duration 6:26
    • Layer comps can be good way to save multiple versions of a design in 1 file if you are using Photoshop.

Additional Info

CSS Grid Resources
Other Resources and Links

Class Links

Outside Links