Daily syllabus

Week One: Introductions

Class 01| Tuesday, Jan 21st

  • welcomes, account registration & syllabus review
  • student questionnaires/ make a book
  • what is web typography? why learn these skills?
  • basics vocabulary review
  • sign up for required accounts (github, codepen, code academy) and optional accounts (soundcloud, gmail, flickr, vimeo, youtube, quizlet)
  • Assignment review: business card
  • purchase flashcards, holder & sketchbook (8.5×11) or set up digital system
  • collect content for resumes
  • find three resumes that inspire you, print out (due Tuesday)
  • find three job descriptions that you would like to have in the future, print them out (due Tuesday)
  • install software – VS Code & Adobe software
  • make basics flashcards
  • begin html on code academy (20%)
  • wireframes of three business card concepts

Class 02 | Thursday, Jan 23rd

  • Meet and greet activity
  • Why make a portfolio site? How do websites work? Advantages and disadvantages of web publication, Careers options in this field Unique qualities of this course
  • Lecture: boiler plate, file set up, html
  • LAB: laying out a business card
  • 2 hours, codeAcademy – Intro to HTML (75%)
  • develop business card concept as a high fidelity mockup in indesign
  • make all html flashcards from codeacademy and quizlet
  • bring black and white photocopies of inspiring resumes and job descriptions

Week Two: HTML

Class 03 | Tuesday, January 28th

  • Typographic Principles, html & css relationship, class & id
  • Activities review homework – resumes & job descriptions printed out
  • Styles in indesign
  • LAB: work on business cards while Lara meets with students
  • business card code along


  • finish html

Class 04 | Thursday, January 30th

  • What makes an effective resume?
  • Business card work day
    • layout resume in indesign using styles, establish a clear structure
    • CSS on code academy (50%)
    • make CSS flashcards
    • collecting 3 images that inspire you typographically, saved to 400 X 400px, 72dpi

Week Three: CSS

Class 05 | Tuesday, February 4th

  • css box model, padding & margin
  • web typography principles
  • code along: business card, part two. images and links
  • LAB: in groups of four, park your page
  • handouts & assignment sheet
  • make important flashcard together
  • LAB building, div with id & class
  • Class & ID
  • what is responsive design? Topics reviewed divs as containers, wireframes,

Homework |

  • 2 hours of codeAcademy (finish css)
  • finalize typographic system for resumes and print out
  • post business card file on github

Class 06 | Thursday, February 6th

  • business card code review in small groups
  • demonstration – pants book, favicon
  • review of printed resumes
  • further develop mockups of resume, both mobile & desktop
  • 3 favicon concepts in your book
  • develop business cards (due Thursday, Feb 13th)

Week Four: Typography and Layout

Class 07 | Tuesday, February 11th

Octavia Butler codeAlong

  • individual review of wireframes & resume concept
  • lab time for students prepare their resume content and finish business cards


  • convert your resume to html
  • wrap each section in tags
  • finish business cards
  • finish concept of favicons, at least 6
  • email career services for resume proofreading

Class 08 | Thursday, February 13th

  • business cards due, review
  • review of favicon concepts


  • resolve and vectorize favicons for next weeks demo
  • asset plan
    • portrait
    • about me paragraph
    • select four projects to feature, begin to collect images and text about featured projects

Week Five : Animation

Class 09| Tuesday, February 18th

no class, holiday

Class 10 | Thursday, February 20th

Homework: convert resume to code, wrap content with tags

Week Six : Responsive Grids and Interaction

Class 11 | Tuesday, February 25th

codeAlong: Interactive Design, :hover, z index, responsive grid & customizing your resume

Lara to meet with student’s individually and student’s debug

Homework: Revise resumes

Class 12 | Thursday, February 27th

  • Resume review in small groups
  • Portfolio site assignment
  • Example portfolio sites Sarah Silva Cameron Reese Alison Simao Tailyn Clark Buyuan Chen

Homework: sketch book drawings for portfolio site, 3 totally different concepts (consider motion & interaction, your unique skill set) develop asset plan for your portfolio site (how many images will you need, text you will need to write)* finish resumes and write two paragraphs about your process README file

Week Seven : Identity and Typographic Systems

Masthead & nav bar

Class 13 | Tuesday, March 3rd

  • Mid term reviews, held via Zoom video call in. In review, we will discuss business card, resume and the 4 selected projects
  • Portfolio site assignment – video
  • codeAlong: Interactive Design, :hover, z index, responsive grid & customizing your nav bar

Homework: 6 header concepts in indesign (h1, h2 & nav bar) print out, 11×17 color (40 cent print)

Class 14 | Thursday, March 5th

  • study grid terminology
  • design masthead and navigation bar, bring to next class
  • review 3 resumes at a high level of detail (multiple devices, mobile)
  • develop about me page

Week Eight : Navigation

Class 15 | Tuesday, March 23

  • review changes to course
  • navigation bar code along

Class 16| Thursday, March 25

LAB | Navigation

build masthead and site navigation as Lara to reviews wireframes or resumes with students 1:1

Week Nine : Javascript

Class 17 | Tuesday, April 30

  • Five people, share a portfolio site that inspires them
  • Programmatic thinking
  • About me code along
  • When sorting a pile of information, organization is key
  • Students to work in break out groups while Lara meets with students in groups


  • codeChallenge – code an “about me” page using CSS grid with styling & content
  • finish resumes and post to github
  • Optional – Cursor styles Free web typography course https://xaviercusso.com

Class 18 | Thursday, April 1


Week Ten : User Stories and Asset Plan

Class 19 | Tuesday, March 31

User experience

Review of user centered design video Review of aboutMe page

Homework: develop asset plan for group review next class

Class 20 | Thursday, April 2

Intermediate coding Class Activities Site reviews http://www.rachelhulin.com/ https://raymondchen0.github.io// https://eiche.co.uk/ CSS Specificity Lara to review, animate.css gitHub pages Appropriate point sizes, responsive typography asset plan review In class work time, Lara to review portfolio sites with groups https://codepen.io/hexpool/pen/pyompJ

  • Prepare for in-process review of portfolio site
  • put planning documents onto the class drive, select your 4 projects and place images & project description
  • if you want to use scrollMagic for your portfolio site, watch the tutorial videos (50 min) on youTube | sal tutorial video

Week Eleven: Site Development

Class 21 | Tuesday, April 7

  • in class work time

Class 22 | Thursday, April 9

  • https://saijogeorge.com/brand-style-guide-examples/
  • issue queue planning documents,
  • next step onto the class drive group work
  • in-process review of portfolio site, students who a ready

Week Twelve: User Testing

Class 23 | Tuesday, April 14

  • user testing survey creation
  • work session
  • in process review of portfolio site, remainder of students

Class 24 | Thursday, April 16

  • Group work as Lara meets with students invidually
  • In class work time, portfolio site

Week Thirteen: Individual Meetings & Presentations

Class 25 | Tuesday, April 21

  • Lara to meet with student’s individually on Portfolio Site, major changes updates

Class 26 | Thursday, April 23

  • first half of student presentations

Week Fourteen: Presentations

Class 27 | Tuesday, April 28

  • second half of student presentations

Week Fifteen: Revisions

Finals| first week of May

Portfolio Site, Review – final feedback from classmates given

Students will push final files to github. This will include edits & fixing of bugs