Web Typography

Daily syllabus

Week One: Introductions

Class 01| Tuesday, Jan 19

  • welcomes, account registrations & syllabus review
  • introduction activity
  • What is web typography? Why learn these skills?
  • Basics vocabulary review
  • Sign up for required accounts (github, codepen, code academy, slack) and optional accounts (soundcloud, gmail, flickr, vimeo, mailchimp, youtube, quizlet)


  • make your intro post slack in the “general” channel
  • purchase flashcards & sketchbook (8.5×11) or set up digital system
  • Begin to collect content for resumes
  • Install software – VS Code & Adobe software
  • Make basics flashcards
  • begin html on code academy (20%)

Class 02 |Thursday, Jan 21

  • wireframes vs. mockups
  • grids
  • Assignment review: the business card
  • Review of designer’s business cards, physical and on codepen
  • Begin making wireframes of business card designs, mobile first


  • Research business cards
  • Make wireframes or a mock ups of your strongest three designs and post them to the “works-in-progress” channel on slack in a single post
  • 2 hours, codeAcademy – Intro to HTML (75%)

Week Two: HTML

Class 03 | Tuesday, Jan 26

  • Meet and greet activity | In breakout rooms, review wireframes. Make comment in slack
  • 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
  • Code Along | HTML starter code – boiler plate. File set up, html tags, Live Server extension
  • LAB: laying out a business card
  • finish codeAcademy – Intro to HTML, begin Intro to CSS
  • revise business card design, high fidelity mockup, post to work-in-progress channel on slack
  • make html flashcards from codeacademy, vocab channel on slack & quizlet

Class 04 | Thursday, Jan 28

  • Business card work day


  • develop business cards, finish high fidelity mock up for mobile based on the template posted in the #general channel
  • Spend 2 hours in Intro to CSS track on code academy
  • find a resume that inspires you, post to slack in a single post in the general channel. Resume should have clear typographic hierarchy
  • find three job descriptions that you would like to have in the future, post to general channel on slack

Week Three: CSS

Class 05 | Tuesday, Feb 2

  • Typographic Principles, html & css relationship
  • Activities review homework – resumes & job descriptions
  • LAB: coding business cards
  • business card code along starter code | changing typefaces | placing images and changing color


  • Watch using styles in indesign
  • Collect content for resumes
    • education
    • experience
    • skills
  • Work on business cards
  • type resume content in indesign and begin styling

Class 06 | Thursday, Feb 4

Homework |

  • 2 hours of codeAcademy (finish css)
  • Edit business cards, placing in social media icons and adjusting colors, placing images
  • Develop the content of your resumes in indesign using styles, black and white, establish a clear structure with headers and bulleted lists, send to Lara as a pdf in a direct message on slack
  • watch Understanding positioning video
  • make CSS flashcards

Week Four: Typography and Layout

Class 07 | Tuesday, Feb 9

  • Watch: Watch UX Design Tutorial for Beginners
  • Draw 50 logo concepts in one hour, post your favorite three thumbnails to the #works-in-press channel
  • Develop business cards
  • If you haven’t sent your resume to Lara, send as a direct message on slack

Class 08 | Thursday, Feb 11

  • individual review of resumes with students
  • lab time for students edit their resume content and finish business cards
  • What is responsive design?


Week Five : Responsive Grids

Class 09 | Tuesday, Feb 16 – no meeting, University schedule

Chynna Monforte artist talk @ 7pm

Class 10 | Thursday, Feb 18

  • Business cards due, review (it is ok if you still have a few bugs)
  • Review of favicon concepts on slack
  • Review of Paula Scher video
  • Review options for the next assignment


  • Prepare a vector file for next weeks demo, can be a draft of your logo mark concept
  • write a first draft of your asset plan
    • portrait
    • about me paragraph
    • select at least four projects to feature, begin to collect images and text about featured projects
  • A round of revisions to your resume, post your latest version as a pdf to the works-in-progress channel
  • Watch Chynna Monforte Artist Talk, take notes

Week Six : Animation and Interaction

Class 11 | Tuesday, Feb 23


If you are coding your resume:

  • Create digital mockups of layout for phone, desktop & tablet and post to the #works-in-progress channel on slack. Can be black and white or color

If you are creating a link tree:

  • Create digital mockups of layout for phone, desktop & tablet and post to the #works-in-progress channel on slack. Can be black and white or color

Class 12 | Thursday, Feb 25

  • post business cards to github
  • codeAlong: Responsive grids video |example code
  • codeAlong Interactive Design, :hover, z index, css grid grid video | starter code
  • optional: starter code for line trace animation
  • Students work on customizing their resumes or linktree and drawing a plan for their responsive grids



  • convert your resume to txt file
  • create a new folder in vs code for your resume
  • past your txt file into the .html document
  • wrap each section in tags

Week Seven : Identity and Typographic Systems

Class 13 | Tuesday, Mar 2

  • Review mockups in breakout rooms
  • make revisions
  • Link tree or resume workday


  • Develop link tree/resumes

Class 13 | Thursday, Mar 4


  • Mockups for drawings for portfolio site, 3 completely different concepts (consider motion & interaction, your unique skill set)
  • continue to develop an asset plan for your portfolio site (how many images will you need, text you will need to write)
  • Develop styling in css

Spring break – Mar 8 – 12

Week Eight : Navigation

Class 15 | Tuesday, Mar 16



  • Exchange zoom meeting room info with your teammate for Thursday’s meeting (class will not meet that day due to Junior Reviews, but you will meet with your teammate to develop your link tree/resume in vs code and review your portfolio site concepts)
  • Watch Code Along | Navigation bars
  • Finish asset plan for portfolio site  update one drive
  • Develop your link tree or resume in VS code, publish work in progress to github


Class 16| Thursday, Mar 18

LAB | Navigation

  • work day
  • build header and site navigation
  • publishing of resumes


  • develop resumes further, finish nav bars
  • find three portfolio sites that inspire you, post links to the professional development channel along with descriptive text

Optional: watch videos on CSS Grid

Week Nine : Javascript and asset plan

Class 17 | Tuesday, Mar 23

  • Site research, what is a home page that inspires you?
  • Build mockups for home page header and site navigation
  • Nested grids


  • 2 hours on resumes/link trees
  • Wireframes/mock ups of about me page or homepage concept, with nav bar

Optional –

Class 18 | Thursday, Mar 25


  • Create first draft of linktree or resume, publish to github
  • Put resume content on linkedin
  • Create mockups of both homepage and about me page, post to individual channels
  • Read Vertical rhythm in web typography

Week Ten : User Stories

Class 19 | Tuesday, Mar 30


  • Further define user personas, post 8.5×11 user persona page to individual channel
  • Refine high fidelity mock up of about me page (add resume button) and home page

Class 20 | Thursday, Apr 1

  • Site review
  • In groups, user profiles, review of asset plans, fill out digital worksheet of user personas
  • LAB: About me pages
  • In class work time, Lara to check in with groups
  • develop sites
  • develop about me pages
  • complete planning documents and & user personas on the class drive

Week Eleven: Site Development

Class 21 | Tuesday, Apr 6


  • code about me page

Class 22 | Thursday, Apr 8

  • Work day

Week Twelve: User Testing

Class 23 | Tuesday, Apr 13

Class 24 | Thursday, Apr 15

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

Week Thirteen: Individual Meetings

Class 25 | Tuesday, Apr 20

  • Meet with students on portfolio site development

Class 26 | Thursday, Apr 22

  • 1:1 meetings, student presentations of site development and survey

Week Fourteen: Presentations

Class 27 | Tuesday, Apr 27

  • 1:1 meetings, student presentations of site development and survey

Week Fifteen: Revisions

Finals| Portfolio Site, final presentations

Section one: Tuesday May 4, 9 – 11 am | Section two: Monday, May 3, 12 – 2pm

Students will have until Thursday May 6th at midnight to push final files to github. This will include edits & fixing of bugs