Spring 2015

Course Description

Prerequisites: 50:080:213, 331, or permission of instructor. May be repeated for credit with permission of instructor.

Students will learn basic design and front-end development techniques to create their own portfolio site. Building upon basic design skills, the students will also create a variety of other interactive assignments.

Course Objectives

  • To understand web technology
  • To gain web/interactive design skill sets
  • To complete two web design assignments

Grading Policy

  • Participation/Attendance — 20 pts
  • Course Assignment #1 — 30 pts
  • Course Assignment #2 — 50 pts

Contact Information

Downloads

Links

Inspiration

Reading

Resources

Helpful Sites

Lectures
Week
01
Back
to Top

Topics Covered

Weekly Assignment

Find two sites that you like (visuals, functionality, etc.) and be prepared to talk about each site next week.

Weekly Reading

Week
02
Back
to Top

Topics Covered

Weekly Assignment

Create at least 3 sketched layout variations for your portfolio homepage and work page. Be prepared to explain in a critique next week.

  • Must include Logo and some type of navigation
  • If you plan on creating a single page, or scrolling site, you must still have a dedicated page for each project
  • Example
  • Grid PSD

Weekly Reading

Week
03
Back
to Top

Topics Covered

Weekly Assignment

  • Continue to refine your sketches to prepare for creating wireframes next class.
  • Begin working on logo options (2-3 options)
    • Can be your name, your company name, initials, iconography, etc.
    • Focus on just B&W for now.

Weekly Reading

Week
04
Back
to Top

Topics Covered

Weekly Assignment

  • Continue to refine your logos based on feedback and begin adding color and finalizing
    • Choose colors that will ultimately be used throughout your portfolio site
  • Finalize your sketches/wireframes in preparation for moving onto aesthetics next week
  • Begin Codecademy Web Fundamentals Lesson
    • Focus only on Introduction to HTML (HTML Basics I & Build Your Own Webpage)

Week
05
Back
to Top

Topics Covered

  • Logo critiques
  • Final sketches/wireframes critiques
  • Began creating our practice website
    • Download Site Assets
    • Ordered/Unordered Lists
    • Nested Lists
    • Divs and Spans
    • In-line styling
      • Font size, color and family
      • Background Color
      • Text alignment
      • Italic and bold text
      • Element width and height
      • Margin vs Padding — Example
      • Element borders

Weekly Assignment

  • If necessary, continue to finalize your logos
  • Begin designing your portfolio website
  • Continue Codecademy Web Fundamentals
    • Focus only on HTML Structure: Using Lists (HTML Basics II & Social Networking Profile)

Week
06
Back
to Top

Topics Covered

  • Using GitHub
    • Creating a personal URL
    • Cloning a repository to your computer
    • Creating a README file using Markdown
    • Pushing and Pulling from GitHub
  • Internal styling
  • Website folder and file structure

Weekly Assignment

  • Continue designing your portfolio website
    • We will have our first critique of progress next week
  • Continue Codecademy Web Fundamentals
    • Focus on Introduction to CSS (CSS: An Overview & Designing a Button for Your Website)
    • HTML Structure: Tables, Divs, and Spans is optional but highly recommended

Weekly Reading

Week
07
Back
to Top

Topics Covered

  • Portfolio Critique #1
  • Building a resumé with HTML
    • Learned multi-column layouts
    • Practiced external stylesheets

Weekly Assignment

  • Continue designing your portfolio website
  • Continue Codecademy Web Fundamentals
    • Focus on CSS Classes and IDs (CSS Selectors & Sorting Your Friends)

Weekly Reading

Week
08
Back
to Top

Topics Covered

Weekly Assignment

  • Begin Assignment #1 (Due 4/1)
    • Recreate a company homepage using HTML & external CSS stylesheets
    • Grading Breakdown: 65% (Visual similarity to PSD design) / 35% (Code and file structure)
    • Download Sixbase PSD
    • Download Assets
  • Continue designing your portfolio website

Week
9
Back
to Top

No Class (Spring Break)

  • Continue Assignment #1
  • Continue working on Portfolio
Week
10
Back
to Top

Topics Covered

Weekly Assignment

  • Continue Assignment #1 (Due Wednesday 4/1)
    • Email me a link to your GitHub page no later than 5pm
    • Include a screenshot of your current Codecademy Progress
  • Continue designing your portfolio website
  • Finish Codecademy Web Fundamentals
    • Focus only on CSS Element Positioning (CSS Positioning & Build a Resume)

Weekly Reading

Week
11
Back
to Top

Topics Covered

Weekly Assignment

  • Begin Assignment #2 (Due 5/4)
    • Begin building your portfolio website
    • Start with your homepage & navigation
  • Continue designing your portfolio website

Weekly Reading

Week
12
Back
to Top

Topics Covered

  • Created a Lightbox
  • Learned How to Use Google Fonts
  • Worked on portfolio site
  • Download Files

Weekly Assignment

  • Continue Assignment #2 (Due 5/4)

Week
13
Back
to Top

Topics Covered

  • Worked on portfolio site

Weekly Assignment

  • Continue Assignment #2 (Due 5/4)

Week
14
Back
to Top

Topics Covered

  • Worked on portfolio site

Weekly Assignment

  • Continue Assignment #2 (Due 5/4)

Week
15
Back
to Top

Topics Covered

  • Worked on portfolio site

Weekly Assignment

  • Continue Assignment #2 (Due 5/4)
    • Email me a link to your GitHub page no later than 5pm