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: file set up, html
  • LAB: laying out a business card
  • 2 hours, codeAcademy – Intro to HTML (75%-100%)
  • find a quote that you find inspirational or important. There must be information about the author online
  • make html flashcards

Week Two: HTML

Class 03 | Tuesday, January 28th

  • Typographic Principles, html & css relationship, class & id
  • Activities review homework – second half of resumes & job descriptions
  • Resume & job description review
  • defining your h1 – h6
  • structure of a page, connecting html & css


  • collect 3 of 10 images, things that inspire you typographically, saved to 400 X 400px, 72dpi
  • 2 hours, code academy
  • develop business card concept as a high fidelity mockup

Class 04 | Tuesday, January 30th

  • What makes an effective resume?
  • Styles in indesign
    • layout resume in indesign using styles, establish a clear structure
    • begin a plan for coding your resume, begin to wrap text with html tags
    • CSS on code academy (50%)
    • make CSS flashcards
    • collecting 3 more 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 LAB: in groups of three, organize a text document review of resume 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, Code Challenge – code a rainbow

Class 06 | Thursday, February 6th

  • rainbow code review in pairs book
  • demonstration – pants book, favicon
  • review of printed resumes
  • 10 wireframes of resume
  • mobile & desktop
  • 3 concepts in your favicon book
  • code a portion of your resume

Week Four: Typography and Layout

Class 07 | Tuesday, February 11th

Class Activities individual review of wireframes & coded portion lab time for students to prepare their resume content Homework: convert your resume to html, wrap each section in tags lessons 1-5, CSS Grid Scrimba 6 concept of website icons, at least 3”x3” make appointment with career services for resume proofreading

Class 08 | Thursday, February 13th

Class Activities CSS Grid Octavia Butler codeAlong resume review of favicon concepts Homework: code responsive grid for resume

Week Five : Responsive Grids

Class 09| Tuesday, February 18th

Asset planning & animation

Class Activities

codeAlong: Interactive Design, :hover, z index SVG animate codeAlong: 5 types of positioning margin: auto, left, right Topics reviewed: transforming an svg Homework: finish resume bring vector file to next class

Class 10 | Thursday, February 20th

SVG animation review & CSS Grid Class Activities zindex heart animation homework review, svg animate CodeAlong, Responsive grid debugging & customizing Octavia Butler’s resume Topics reviewed: CSS Grid Homework: code an animation for your site finish resumes in responsive grid

Week Six : Interaction (resume due)

Class 11 | Tuesday, February 25th

Resume lab day

Class Activities: review resumes in responsive grid in small groups as Lara meet with student’s individually

Homework: continue to work on resumes

Class 12 | Thursday, February 27th

Portfolio assignment review

  • Class Activities printed resume review
  • pamphlet stitch demonstration
  • review portfolio site assignment
  • Resources: 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

Resumes, in process review Class Activities post student files to github students to review 3 resumes, digitally review of portfolio site concepts identity and favicon Homework: 6 masthead concepts in indesign (h1, h2 & nav bar) print out, 11×17 color (40 cent print)

Class 14 | Thursday, March 5th

Class Activities Review of printed mastheads Single page sites students to complete CSS Grid Garden in pairs while Lara meets with students to review resumes & portfolio concepts https://learncssgrid.com/ Portfolio sites Gaby Mollinedo Portfolio Site Lizzy Sour https://www.kielm.com/ Can I use.com variable typography http://kielm.land/


Establishing Importance code challenge watch videos 2-6 on CSS Grid study terminology and practice to build a grid bring wireframes & masthead to next class

Week Eight : Navigation

Class 15 | Tuesday, March 17

Quiz – CSS Grid essentials coCode,

debug establishing importance

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


  • watch videos 7-14 on CSS Grid
  • finish establishing importance & post to github
  • develop portfolio site concept & second round of wireframes
  • find three portfolio sites that inspire you

Class 16| Thursday, March 19

Week Nine : Javascript

Class 17 | Tuesday, March 24

Javascript & Programming Concepts Class Activities homework check in Intro to programmatic thinking scrolling text & javascript code along Topics reviewed Programmatic thinking Organization is key Homework: codeChallenge – code an “about me” page using CSS grid with styling & content Watch user centered design video. Take notes and & write three things you learned from watching https://www.youtube.com/watch?v=I0-vBdh4sZ8 Additional content Cursor styles Rhythm in web typography Free web typography course https://xaviercusso.com

Class 18 | Thursday, March 26

Class Activities Review of user centered design video Review of aboutMe page LAB – developing your grid developing aboutMe page, maybe with Javascript & maybe updating github Topics reviewed Homework: Put resume content on linkedin (optional) create an HTML page that uses JavaScript to modify one element on the page Next steps of portfolio site (about me, images of work) code 2nd version of about me page and push to github

Week Ten : User Stories and Asset Plan

Class 19 | Tuesday, March 31

Students to develop asset plan, example 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