HTML (Hypertext Markup Language) is used to create and organize the content of a website. CSS (Cascading Style Sheets) is a language used for design and layout. Together, these languages form the foundation of what one needs to know to create websites that are useful and well-designed. The purpose of this workshop is to help participants understand the rudiments of front-end web development, with the intention of providing a strong base of knowledge from which to imagine web-based digital humanities projects.
By the end of this workshop, participants will:
- Familiarize themselves 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 website.
Whether or not you plan on developing a website from scratch, understanding the basics of HTML & CSS is important for a variety of uses.
- Troubleshooting no-code web editors and content management systems
- Formatting and customizing web publishing tools such as ArcGIS Online, Timeline JS, Storymaps JS, WordPress or courseware software like Moodle
- Extracting structured data from a website (i.e. web scraping)
Introduction
Opening Activity
Basic Template for HTML
Tags and Elements
Paragraphs and Headings
Links
Images
Conventions
Challenge: Create a Simple Website
CSS Basics
Integrating CSS and HTML
Rule Sets
Filtering
Classes and IDs
Useful properties
Challenge: Styling Your Website with CSS
Troubleshooting
Workshop Summary
Making your Website Public
Resources
Current contributing authors: Alice McGrath, Roberto Vargas. Past contributing authors: Param Ajmera, Amy Cavender, Kristen Hackett, Patrick Smith, Patrick Sweeney. Past editors: Lisa Rhody, Kalle Westerling. Past reviewers: Kristen Hackett, Stefano Morello, Di Yoong, Vickie Karasic.
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 https://github.com/DHRI-Curriculum. When sharing this material or derivative works, preserve this paragraph, changing only the title of the derivative work, or provide comparable attribution.