Skip to content


Switch branches/tags
This branch is 317 commits ahead of hackettka:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Header image for the HTML/CSS workshop

HTML (Hypertext Markup Language) is used to create and organize the content of a website. CSS (Cascading Style Sheets) is used for website design and layout. Together, these languages form the foundation of what one needs to know to create useful and well-designed websites. This workshop walks participants through the fundamentals of HTML and CSS. The purpose of this website is to help participants understand the rudiments of making websites, with the intention of providing a strong base of knowledge from which to imagine web-based digital humanities projects.

In this workshop, you will:

  • Familiarize yourself with the anatomy of a webpage and how the Internet works.
  • Understand the basics of the HTML and CSS markup languages.
  • Use HTML, CSS, and a text editor to build a small locally-hosted website.

This workshop is estimated to take you 10 hours to complete.

Get Started


  1. Introduction
  2. Opening Activity
  3. Basic Template for HTML
  4. Tags and Elements
  5. Paragraphs and Headings
  6. Links
  7. Images
  8. Conventions
  9. Challenge: Create an Institute Website
  10. CSS Basics
  11. Integrating CSS and HTML
  12. Rule Sets
  13. Filtering
  14. Classes and IDs
  15. Useful Properties
  16. Challenge: Styling Your Institute Website Using CSS
  17. Troubleshooting
  18. Workshop Summary
  19. Making your Website Public

Before you get started

If you do not have experience or basic knowledge of the following workshops, you may want to look into those before you start with Introduction to HTML and CSS:

  • Introduction to Command Line (required) This workshop makes reference to concepts from the Command Line workshop, in particular, in creating new folders and files, as well as moving around in file directories. Completing the Command Line workshop will make you more comfortable with working with HTML/CSS.
  • Visual Studio Code (recommended) You can use any plain text editor but for our purposes, Visual Studio Code ("VS Code") will be used.

Ethical Considerations

Before you start the Introduction to HTML and CSS workshop, we want to remind you of some ethical considerations to take into account when you read through the lessons of this workshop:

  • Building websites can involve making information public on the internet, which raises a host of intellectual property legal concerns. It is very important to make sure that you prominently declare which creative commons licenses you are using for your website so that visitors to your website are aware of the ways in which they can use the information that you are providing. Learn more about choosing the appropriate creative commons license here on the Creative Commons website. Similarly, if your website uses images, videos, or any kind of document from other sources (like archives, artists, newspapers, etc.) you must be sure to cite these sources and make sure that you have the necessary permissions to reproduce these works.
  • Creating websites also involves making sure that it is designed to be accessible for those with disabilities. If your website displays images, then each image should also contain alt text metadata that describes the image such that it is usable for screenreaders. Screenreaders make websites accessible for those with visual and/or auditory disabilities. Similarly, if your website involves showcasing audio-based information (like interviews or lectures) then you should provide a transcription of the audio. We will go over basic practices of making websites accessbile in this workshop. You can learn more about accessibility standards and guidelines at the W3C's page on Web Accessibility. Furthermore, there are also services like the WAVE tool that help identify ways of making websites more accessible.

Pre-reading suggestions

Before you start the Introduction to HTML and CSS workshop, you may want to read a couple of our pre-reading suggestions:

Projects that use these skills

You may also want to check out a couple of projects that use the skills discussed in this workshop:

HTML and CSS are fundamental to building websites. Almost all web-based projects use HTML and CSS in some aspect of their web design. I have included three different kinds of projects that use HTML and CSS to to bring to notice a diversity of ways of using the internet and websites in digital humanities projects:

  • Digital Humanities Research Institute: Our very own Digital Humanities Research Institute uses HTML, CSS, and other languages in its web site. Our web design aims to provide its workshops in a visual style that emphasizes accessibility, ease, and comfort.
  • Colored Conventions: The Colored Conventions project is a community-based archive of nineteenth-century Black political organization. In its early stage, this project crowdsourced much of its data-gathering efforts by building an interface for volunteers to digitally transcribe archival texts. This project uses HTML and CSS in many of its aspects.
  • Musical Passage: Musical Passage is an exhibit of early African diasporic music. This website reproduces a transcriptions and renditions of songs performed by enslaved African people in the Caribbean in the early eighteenth century. This project uses HTML, CSS, and other languages to provide a multimodal experience for its visitors, who can see a historical document as well as listen to the earliest known record of African diasporic music.

Get Started


This workshop is the result of a collaborative effort of a team of people, mostly involved presently or in the past, with the Graduate Center's Digital Initiatives. If you want to see statistics for contributions to this workshop, you can do so here. This is a list of all the contributors:

Digital Research Institute (DRI) Curriculum by Graduate Center Digital Initiatives is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Based on a work at When sharing this material or derivative works, preserve this paragraph, changing only the title of the derivative work, or provide comparable attribution.

Creative Commons License


@DHRI-Curriculum Session on HTML and CSS, markup languages used for creating websites.







No packages published


  • HTML 79.4%
  • CSS 20.6%