Lessons & Assignments

Week 13: April 17, 2018

No Lesson, Office Hours from 5-7pm

Stop by office hours to ask any questions you might have or get help on your 5D final.

A lot of people requested a lesson on web/ui design but I felt like I couldn't do it justice in a quick half hour session. I've added a TON of resources below about best practices for designing for the web for you to peruse at your own leisure.

5D Tools Final

As I mentioned before, there's no final project for this class and instead the code portion of your 5D Fundamentals final will count as your final project grade. Don't sweat it, as long as you turn in your project and the pages on your site work, you'll get full points.

Please turn in the project folder for your 5D Fundamenetals project to the Dropbox link below. It will be worth 20 points so do not forget to hand it in. If you're working with a partner or in a group, each individual person must submit the project so I can keep track of grades properly.

Due on April 27

Submit Final Project

Week 12: April 10, 2018

Responsive Design Intro and Working Class

  • Announcements
  • Responsive design intro demo
  • Working period

Class Files

Extra Credit: 10pts

Take your New Yorker page and make a responsive layout for it.

You should be aiming for this type of layout but go ahead and keep the same images and copy as your original assignment. Feel free to refer to the live New Yorker site to play around with how the layouts change at smaller sizes but focus on creating the layout at about 600px wide.

Hand in your site files in a .zip folder at the Dropbox link below.

Due on April 20

Submit Extra Credit

Assignment Redos

You have until April 27th to redo an assignment that you'd like a better grade on.

If you missed any assignments, I'll accept a late submission for half credit. Also due by April 27th.

Please label your .zip folder with what assignment you're turning in so I can keep track of them. If you don't name it correctly, I can't count it toward your grade.

Due on April 27

Submit Assignment Redos

Week 11: April 3, 2018

Animations, Transitions & Transforms (and some other misc. goodies)

  • Fill out the survey
  • Animations, Transitions, Transforms
  • Working Class

Class Files

Assignment: Create an interactive/animated online business/contact card

Create a one page website with a business/contact card. Include your name, an avatar photo, email, major, interests, hobbies, and skills. Think of it as a mini online resume.

Please include at least one animation, transform and transition (you can combine them too!). This is a good opportunity to use all the skills you've learned this semester so feel free to get creative and use custom fonts, icons, photos and more if you're feelin' it.

Please make sure you also fill out the survey about what you'd like to cover in our last two classes.

Please hand in your site files in a .zip folder (don't forget your images and fonts if you're using them!)

Due on April 10

Submit Assignment 9

Week 10: March 27, 2018

Exporting Assets for the Web and Hosting Sites Online

  • Announcements
  • Exporting Assets
  • Hosting terms and definitions
  • Hosting with AWS walkthrough

Class Files

Assignment: Finish your site and host it online

Finish your multipage website. Let me know if you have any questions on what you should be working on.

Host your site online with AWS (or another service if that's what you're using). Feel free to make a subdomain or link to a subfolder if you don't want it as your domain's home page/main site. You can remove your site after next class if you have other plans for your domain.

Please turn in all of your site files in a zip folder and a text file with your domain name/url so I can see your hosted site.

Due on April 3

Submit Assignment 8

Week 9: March 20, 2018

Flexbox & Website Review

  • Announcements
  • Remaining class schedule
  • Flexbox
  • Work session

Class Files

Assignment: Create a multipage website, Part 2

Build out the rest of your multipage website based on the discussion we had one on one in class (if you missed class, please email me ASAP so we can discuss what you should be working on).

The completed site hosted online is due on April 3rd.

In preparation for next week's class on hosting with Amazon Web Services (AWS), please create an AWS account and register a domain name through Route 53. Once you create your AWS account, you can buy a domain name using the "Register a Domain Name" link on your Dahsboard page under "Build a Solution".

If you already have a domain name, you can either go through the process of transferring the domain to AWS or purchase an alternative domain through AWS. (If you already have a hosting solution in place, you're all set and can skip this step).

Due on April 3

Submit Assignment 8

Week 8: March 13, 2018

Cancelled - Snow Day

No homework due next week. Keep an eye out for emails about your grade and next steps for your website.

Extra Credit

Complete all or some of the following Code Academy courses for 5 points each:

Please upload a screenshot of your profile showing the completed lesson(s) to the Dropbox link.

Due on March 27

Submit Extra Credit

Week 7: February 27, 2018

Multipage Websites, Navigation and Positioning

  • Announcements
  • Making multipage websites
  • Positioning (Not Layout)
  • Navigation patterns

Class Files

Assignment: Create a multipage website, Part 1

You'll be creating a multipage website over the course of the next couple weeks. It can be the basis of your portfolio site, a fan site of your favorite artist, a blog, an informative site about your favorite cause - the content and design is entirely up to you here.

Your site must include at least three pages that all link to each other.

For the next time we meet, sketch out the content and design for each of the three pages of your website. They can be done with pen and paper or with something like Sketch, Photoshop, Figma etc. - up to you and whatever you're the most comfortable with.

Also, create the three HTML pages and link them together in preparation for adding your content and styles the next time we meet. The links should be in a div with a position set and loosely styled.

Upload your site files and sketches in a .zip file and upload it to the Dropbox link below.

Don't stress too much on your designs! I'm not grading you on your design capabilities here but feel free to ask me questions or for feedback if you're planning on using this for your portfolio or want design specific help.

Due on March 13

Submit Assignment 7

Week 6: February 13, 2018

Custom Fonts and Visual Styles

  • Announcements
  • Floats Review
  • Adding Custom Fonts
  • Visual Styles in CSS

Class Files

Assignment: Complete your New Yorker page

Now that you have your layout all set, finish adding the visual styles to the rest of the page. Please add:

  • Custom fonts. Use both an instance of a local font and a hosted font. You can find the New Yorker custom font in the source files below.
  • Type size and style. Match the headings, subheadings, paragraphs and other pieces of text approximately in their size, weight and color.
  • Line height. Play around with the line-height of paragraph text until it looks about right.
  • Borders and spacing. Again, just approximate the spacing and colors here.
  • Link styles. Using text-decoration and other CSS properties, add a default and a hover state for your links.

As always, upload all of your site files and a screenshot of your page in a zip file to the dropbox link below.

Assignment 6 Source Files

Due on Feb 20

Submit Assignment 6

Week 5: February 6, 2018

Selectors & Layout: Floats

  • Announcements
  • Display and Box Model Recap
  • More on CSS Selectors
  • Layout with Floats

Class Files

Assignment: Finish the New Yorker page layout

Finish adding the remaining content from the "NewYorkerScreenshot_FullPage" screenshot - you can find the remaining images as well as starting HTML/CSS files to use if you need them in the source files below. Using the float method we went over in class, arrange the content into the correct layout. Feel free to use lorem ipsum for the remaining copy on the page. Don't worry about adding the correct visual styles (color, fonts, etc.) yet. We'll work on that next class.

As always, upload all of your site files and a screenshot of your page in a zip file to the dropbox link below.

Assignment 5 Source Files

Due on Feb 13

Submit Assignment 5

Week 4: January 30, 2018

No in person class session today!

HTML Structures and Organization

Please read through the presentation below on HTML structure for common web design patterns. Feel free to email me if you have further questions or if there's anything you didn't quite understand. I'll review in class next week as well.

Next time we meet, we'll learn how to use CSS to create more complex layouts by replicating a page of the New Yorker website. To prep for the exercise, your homework is to begin adding the content to an HTML file.

Class Files

Assignment: Prep for New Yorker assignment

Below you'll find a link to source files containing two screenshots: one of the full page and one for this assignment as well as the images from the page.

Create an HTML file and add the content including images from the screenshot named "NewYorkerScreenshot_Assignment" to your page using the appropriate HTML elements. Group sections of content using divs with your own classes. Don't to worry about CSS yet, we'll do that in class together.

As always, take a screenshot of your page (it will be long! so check out this full page screenshot Chrome extension) and upload the screenshot and site files in a zip folder to Dropbox.

Assignment Source Files

Due on Feb 6

Submit Assignment 4

Week 3: January 23, 2018

The Box Model and Images

  • Announcements
  • Recap
  • The Box Model
  • Adding Images to Your Site

Class Files

Assignment: Create a Cheseburger using HTML & CSS!

Using the source files and image provided in the folder linked below, add margin, padding, widths and background-colors with CSS to transform your plain divs into a cheeseburger.

Try to match this design as closely as possible. I won't be counting pixels but aim for the same general sizes and placement.

Upload a folder containing screenshot of your burger, and all of your site files - including images! - to Dropbox

Source files

Due on Jan 30

Submit Assignment 3

Week 2: January 16, 2018

In Class: The Anatomy of HTML & CSS Files

  • Announcements
  • Vocabulary
  • HTML File Setup
  • CSS File Setup

Class Files

Assignment: HTML/CSS Practice

Building on the files we started in class, add the following content and styles to your site:

  • Change the background-color of the `body`
  • Change the font of both the `h1` and the `p` element
  • The HTML element(s) you would use to add a list with bullets or numbers (you might need to consult one of the reference links below).
  • Use a `span` to change the color of a word in a paragraph
  • Use a `div` with a class to add a border around two adjacent elements

Take a screenshot of your page. Put the screenshot, html and css files in a folder and upload to Dropbox

Due on Jan 23

Submit Assignment 2

Week 1: January 9, 2018

In Class: Introductions & Overview

  1. Introductions
  2. Review Syllabus
  3. Install Text Editor
  4. Vocab

Class Files

Vocab PDF

Assignment: Survey (5pts)

Complete this survey about your coding background and objectives for the course.

Take a screenshot of the "Your response has been recorded" page and upload the image to Dropbox.

Due on Jan 16

Submit Assignment 1

Links & Resources