GDS 46

Web Design and Development 2 - Fall 18 - Section 76700

Weekly Instructions


Aug. 27 - Week 1

Topics: Introduction to the class

Assignments

  • Here is a link to the syllabus
  • Watch the class intro video - Duration 26:28
  • 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
  • Start Project 1: Bio Page.
    • Create 1 web page about yourself. You only need to make 1 page.
    • You can include biographical information, hobbies, or anything else you would like the class to know about you.
    • Do sketches(optional) a wireframe(required) and a comp(optional) first
      • The wireframe is due next week. More info on the wireframes and links to samples are below.
      • The actual web page is due in 2 weeks.
    • You can use these web page layout templates and code images as a starting point for the actual HTML and CSS of the page if you wish. They are from the GDS 45 class. They are images of the templates and code only, not text files of the code. You would still need to type the code ;) Links to the videos on how to code these templates are here:
    • You can also use your own code(even better).
    • You can make the page as elaborate as you want. You are the client on this one(and me).
    • If you do use one of the templates, make sure to take that basic layout into account in your wireframe.
    • To do and turn in:
      • At least 1 wireframe is due next week
        • Since there is only 1 page in the assignment, you can do only 1 wireframe if you wish, or, you can do more to show different layouts for mobile and desktop, if you are doing different layouts for each.
        • Here are examples of what we are looking for as far as the Bio Page Wireframe/s. There is a desktop and and mobile version to show responsive adjustments, although, again, you do not have to create 2. It might be good though, to show both versions. Your's could be much better!
        • You can see more good wireframe examples here
        • Us myBalsamiq(or another app if you wish) to create 1 or more wireframe/s for the bio page.
        • I will try to send everyone in the class an upgraded myBalsamiq membership after the class starts.
        • If you have never seen it, you can watch a video on Using myBalsamiq for Wireframes - Duration 22:32
        • Drop the wireframe into the drop box under the modules link in Canvas. It can by jpeg, png file, or pdf.
      • The actual web page is due in 2 weeks. It's only 1 page :)
        (Don't wait until next week to get started on production)
      • NEW!
        Extra credit if you use CSS Shapes on the assignment
        (maybe around a circular image of yourself?)

Additional Info

Review CSS and HTML Basics

Sept. 3 - Week 2

Topics: The Web Design Process

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

  • Watch the video on The Web Design and Development Process - Methods and Resources - Duration 19:03
  • Review Ch. 15 of Learning Web Design on Floats and CSS Positioning if you do not feel comfortable with them. 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.
  • Clearfix
    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 on page 398 in Ch. 15. Here is a page from CSS Tricks on clearfix.
  • There is also new material on page 399 on wrapping text with CSS shapes, which is pretty cool, although I'm not sure it is being used too much out in the wild... Yet.
  • Complete the Boo Page Project(See Week 1)
    • See week 1 for details on the assignment.
    • 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

Floats
CSS Shapes
CSS Positioning

Week 3 - Sept. 10

Topics: Flexbox

Assignments

More Flexbox (Some is review)
  • Read pages 419-446 in Learning Web Design on Flexbox(Ch. 16)
    • 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
    • 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.
  • 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
  • Start Artist Project - See the requirements here.
    • Sketches are due next week
    • Check the Canvas Calendar for more due dates

Week 4 - Sept. 17

Topics: CSS Grid and Photoshop Layer Comps

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. Reply to 1 other person's post with your comment or opinion on their site.
Layer Comps in Photoshop
  • 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.
CSS Grid
  • CSS Grid will become more popular as a method to lay out pages and elements. It is fairly new, and should perhaps be used with care for a while, 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
  • 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.
  • 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
Continue the Artist Project

Additional Info

CSS Grid Resources

Week 5 - Sept. 24

Topics: Photoshop Art Boards, Media Queries, and More CSS Grid

Assignments

Photoshop Art Boards
Media Queries
CSS Grid
Artist Project

Week 6 - Oct. 1

Topics: RWD, Basic Responsive Images, and Still More CSS Grid

Assignments

  • Read pages 485-513 in Learning Web Design on Responsive Web Design(Ch. 17)
    • 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.
    • Do Exercise 17-1 to practice responsive layout. You do not have to turn this in, but the practice helps.
  • 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.
  • Extra Credit Assignment:
    Watch the video CSS Grid Layout with Grid Areas, Nested Grids, and Float Fallback - Duration 29:39
    • This exercise is extra credit, since I know you are completing the Artist Project right now.
    • 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.
Artist Project

Week 7 - Oct. 8

Topics: RWD Principals and Personal Project Intro

Assignments

  • Assignment:
    Watch the video RWD Principles and Layout - Duration 46:12
    • 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.
Start the Personal Project

Additional Info

More Responsive Web Design Resources
Tools that can be used for creating comps

Week 8 - Oct. 15

Topics: Basic Responsive Images and CSS Sprites

Assignments

Continue the Personal Project

Additional Info

Responsive Images Articles
Tools that can be used for outputting images in multiple sizes and formats
Salaries and Jobs

Week 9 - Oct. 22

Topics: Advanced Responsive Images

Assignments

  • Read pages 139-146(Ch. 7), and check out Chapters 23, 24 and 25 in Learning Web Design
    • Pages 139-146(Ch. 7) cover using SVG Images on pages, which is becoming very popular
      • Do Exercise 7-2 to practice using SVG Images if you wish
    • Ch. 23 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. 23 for practice, but you do not have to turn them in.
    • Ch. 24 covers Image Asset Production and has more information about producing responsive images.
      • Do Exercise 24-3 to practice optimizing images, but you do not have to turn this in.
    • Ch. 25 covers SVGs in depth
  • Assignment:
    Watch the video Advanced Responsive Images - Duration 38:22
Continue the Personal Project

Additional Info

More Responsive Image Resources
Using SVGs on the web
Creating SVGs

Week 10 - Oct. 29

Topics: WebFonts and Responsive Navigation

Assignments

  • Read pages 264-265(Ch. 12) on Web Fonts in Learning Web Design
    • Make sure you are comfortable with the rest of the content in Ch. 12 on formatting text
  • Extra Credit Assignment:
    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.
  • Read pages 502-506(Ch. 17) on Fluid Typography and responsive navigation patterns in Learning Web Design
    • Remember, exercise 17-1 has a method to create basic responsive navigation.
    • See the Additional Info section for resoureces on Responsive Typography
  • Assignment:
    Watch the video Responsive Navigation - Duration 24:45
Complete the Personal Project

Week 11 - Nov. 5

Topics: Bootstrap and Final Project

Group Project
  • Start Group Project
    • See the requirements here
    • Group Project Wireframes Due Nov. 16
    • Group Project Prototype with Comps Due Nov. 26
    • Group Project Due for testing Dec. 9
    • Group Project Final Version with Beta Tests and Report Due Dec. 12
  • Note: These dates are on various days of the week, not once a week.
  • Also see the Canvas Calendar for due dates
  • There is a discussion in Canvas listing the team members. Please respond there to let me know who is filling the different roles on the team.
  • Get a free upgraded Invision account.
    • I can get everyone upgraded invision accounts. Invision is a prototyping and collaboration tool for designers. You have to sign up for the account before it can be upgraded at https://www.invisionapp.com/. After you sign up, post your account email and other info in the discussion forum called Invision account information in Canvas. You just need to put your name, the email you used to sign up with and an expected graduation date. See the discussion forum for instructions.

Extra Credit Redesign Project

Assignments

  • This week, you can choose which weekly assignment to turn in, although you can turn in both if you wish. Turn in at least 1 of the following 2 assignments into the Canvas drop box.
  • Assignment Option 1: Watch the video Introduction to Bootstrap - Duration 41:44
  • Assignment Option 2: Watch the video on Advanced Selectors - Duration 35:30
    • For this video, follow along with the video and recreate the page done in the video.
    • The start files are here
    • See Appendix C in Learning Web Design for a list of advanced selectors.
    • Drop your zipped site folder with EITHER Option 1 OR Option 2 into the Canvas drop box in the Assignment module.

Additional Info

Recommended tools for the Final Project
  • Invision
    • Good for testing and sharing prototypes
  • dropbox
    • Good for sharing large files
  • google docs
    • good for sharing text files and copy
  • monday
    • May be good for project managment(haven't tried this one)
Other Collaborative tools for Web Developers
Other Collaborative tools for Web Designers
Bootstrap Resources
Advanced Selector Resources

Week 12 - Nov. 12

Topics: CSS Transitions and Animation

Assignments

  • Read Ch. 18 of Learning Web Design on Transitions, Transforms, and Animation
  • Do exercises 18-1 and 18-2 in Learning Web Design. They should be fun!
  • Watch the video on Intro to CSS Transforms and Transitions - Duration 37:28
    • Assignment: For this video, follow along with the video and recreate the page done in the video.
    • The video uses dreamweaver to code the page, but brackets or any editor should be fine.
    • Feel free to not include the vendor prefix code versions after the first one(You will know what I mean when you see it). The CSS is now well supported.
    • The start files are here
    • Drop your zipped site folder into the Canvas drop box in the Assignment module.
Continue Group Project
  • Continue Group Project
    • See the requirements here
    • Group Project Wireframes Due Nov. 16
    • Group Project Prototype with Comps Due Nov. 26
    • Group Project Due for testing Dec. 9
    • Group Project Final Version Due Dec. 12
    • Note: These dates are on various days of the week, not once a week.
    • Also see the Canvas Calendar for due dates

Continue Extra Credit Redesign Project

Week 13 - Nov. 20

Topics: Introduction to Javascript

Assignments

  • In this class, I just wanted to give you a little intro to javascript, so that it is not completely unfamiliar. There is a dedicated javascript class(GDS 89) which covers it in much more detail. If you know HTML, CSS and Javascript well, you have the main skills to be a front-end web developer!
  • Read Chapter 21 in Learning Web Design on Introduction to Javascript.
  • Watch video on Intro to Javascript - Duration 32:45
    • Assignment: 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.
  • Optional: Watch the video on Intro to Jquery and Jquery UI in Dreamweaver - Duration 39:42
    • This is an older video, but Jquery UI is still in use and can do some cool things like tabbed content and accordians, similar to some of the bootstrap components.
    • There are no start files for this one. You start from scratch.
Continue Group Project

Continue Extra Credit Redesign Project

Week 14 - Nov. 26

Topics: More Javascript and CSS Processors

Assignments

Continue Group Project
  • Continue Group Project
    • See the project requirements here
    • Group Project Wireframes Due Nov. 16
    • Group Project Prototype with Comps Due Nov. 26
      • These will include your comps. See above for links to using invision to create the prototype.
    • Group Project Due for testing Dec. 9
    • Group Project Final Version Due Dec. 12
    • Note: These dates are on various days of the week, not once a week.
    • Also see the Canvas Calendar for due dates

Continue Extra Credit Redesign Project

Additional Info

CSS Processors

Week 15 - Dec. 3

Topics: Javascript and User Testing

Assignments

  • Finish reading Chapter 22 in Learning Web Design on Using Javascript.
  • Watch the video on Javascript Variables and Conditional Statements - Duration 40:45
    • For this video, follow along with the video and recreate the pages done in the video.
    • The start files are here
    • You do not have to turn this in, but some of the info may be on the final exam(sorry again).
Continue Group Project
  • Complete Group Project
    • See the project requirements here
    • Group Project Wireframes Due Nov. 16
    • Group Project Prototype with Comps Due Nov. 26
      • These will include your comps. See above for links to using invision to create the prototype.
    • Complete Group Project Testing by Dec. 9
    • Complete any changes to the Group Project site as a result of your testing results
    • Group Project Beta Tests, Beta Test Summary and Final Version Due Dec. 12. Testing information is below.
    • Note: These dates are on various days of the week, not once a week.
    • Also see the Canvas Calendar for due dates

Beta test the site

Complete Extra Credit Redesign Project

Exit Survey

  • Take the class exit survey in the Exercises module for more extra credit.

Week 16 - Dec. 10

Topics: Final Projects Due and Final Exam

Assignments

  • Final version of Group Project Due
  • 2 Beta Tests per person Due
  • 1 Beta test summary report per group due

Final Exam and other Information

  • Take the class exit survey in the Exercises module for more extra credit.
  • Final Exam 5:00 - 7:00
    • The Final Exam will be taken on Canvas at 5pm Thursday, Dec. 13.
    • The exam uses proctorio, which is an exam proctoring system in Canvas. You need a working webcam and the Chrome Browser to take the exam. You can install the proctorio extension in chrome at any time before the exam. Here are some instructions.
    • Let me know if you cannot take it at that time
    • The test is open book!
    • There are about 50 questions.
    • The questions are multiple choice, matching and true false.
    • The questions will cover information found in the videos, exercises, and files used throughout the course.
    • Log in to Canvas at 5:00PM and look under the modules link for the exam.
    • You have 2 hours to complete the exam. Click the submit button only when you are finished.
  • If you haven't already, take a look at the Web Design Certificate and the Web Developer Certificate on the GDS Website. We have classes on Dreamweaver, Jquery, Wordpress, Photoshop and more.
  • Follow us on Instagram at:
    https://www.instagram.com/designatmission/
  • Make sure to like our facebook page at http://www.facebook.com/missioncollegedesign
  • We are on Twitter too. https://twitter.com/designatmission
  • Thanks for taking the class and I hope it was a little fun.

Class Links

Outside Links