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 esumes

Class 12 | Thursday, February 27th

  • Resume review
  • 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

  • Review of printed mastheads and proposed navigation system
  • 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