Week 2 Understanding Markdown and HTML
CollectionBuilder Workshop 2: Understanding Markdown and HTML
Digital Collections & Storytelling with CollectionBuilder
Learning Sequence Description
In this workshop series you will learn how to create a website displaying a digital collection using free, open-source software (CollectionBuilder). This workshop series is appropriate for anyone who wants to learn to build their own website to display a digital collection, whether for a class, a grant, or a digital humanities project. You can also use this software to create a personal website showcasing your professional portfolio as an architect, designer, or artist. You should be comfortable learning new things, but no prior experience with web design is required.
Learning Objectives and Aligned Assessments
| Learning Objectives | Aligned Assessments |
|---|---|
| By the end of this class, you will be able to | By the end of class, participants will have |
| 1. Use Markdown to create web content 2. Describe how Jekyll converts Markdown to HTML | 1. Practiced writing Markdown in dillinger.io and explored the HTML created from it. 2. Created or modified a Markdown page in their demo project. |
ALIGNED STANDARDS/FRAMEWORK
ISTE 1.6b, “Students create original works or responsibly repurpose or remix digital resources into new creations.”
RESOURCES
| Resource Type | Links & Materials| | ————— | —————- | | Instructor Materials | - Internet-connected computer, ideally with video camera. - Zoom account or other virtual meeting tool that has web conferencing features for chat, audio, and video. | | Learner Materials | - Internet-connected computer, ideally with video camera. - Zoom account or other virtual meeting tool that has web conferencing features for chat, audio, and video. - Email account for creating GitHub account during in the session. | | Supplemental Materials | Learn-Static asynchronous tutorials on HTML and Markdown |
LEARNING SEQUENCE OUTLINE
Before Class
During Class
| Estimated time | Topic/Material Covered | Activity/Delivery Method |
|---|---|---|
| 1. 5 minutes | Icebreaker | |
| 2. 10 minutes | Workshop Overview | 1. Review website structure, Markdown content 2. Introduce dillinger.io as a place to explore Markdown -> HTML |
| 3. 10 minutes | Activity | Revise the standard dillinger.io document to - create a new bulleted list, - create a new hyperlink, create new level 1 and level 2 headers. Explore how these changes affect the website |
| 4. 5 minutes | Activity set-up | Review how to modify GitHub markdown |
| 5. 15 minutes | Activity: update formatting of markdown in your project | Question: should this follow the exact steps of the Markdown asynchronous activity? If so, we need to add time for students to upload the draft markdown document in that project, and explain how to do so to another repository. |
| 5. 35 minutes | Review Metadata? Or modify CSS? | TBD |
| 6. 5 minutes | Final wrap-up and questions | 3-2-1 exercise |
After Class Students will be directed via a follow-up email to Learn-Static modules on HTML and Markdown.