Branching Out:

Scaffolding GitHub Portfolios in Diverse Undergraduate Courses

Emily K. Johnson

University of Central Florida
ekj@ucf.edu

Book cover: Playful Pedagogy in the Pandemic: Pivoting to Game-Based Learning, by Emily K. Johnson and Anastasia Salter (Routledge)

my interdisciplinary research

I thought this was an English course?

$ gh repo fork

fork

Now, this is an English course, and GitHub is actually really great at teaching students how software systems work, and getting them to think about how things connect. Your website isn’t something that’s produced and streamed to you like television. It’s pieced together from repositories and files saved elsewhere, and then they’re all pulled together on the same website.

That basic digital literacy is super important, and so are digital skills in this day and age. Even our English majors need strong digital skills.

GitHub is fun because it has its own weird jargon. I blame the programmers for being a little gatekeeping about this, but once you explain it to students, it’s really kind of silly. Fork just means copy. Commit means save. Then you enable Pages on your GitHub repository, where everything is saved. GitHub started as version control software, and its whole architecture is built around that.

DIG 3171

Tools for the Digital Humanities

Critical making lens
Variety of majors
Digital portfolio

ENC 3241

Writing for the Technical Professional

Resume to proposal
Variety of majors
Digital portfolio

ENC 4265

Writing for the Computer Industry

Tutorials & manuals
Docs in Markdown
Digital portfolio

What scares novices

The command line

GitHub Desktop

Push & pull

Neo from The Matrix in front of falling green code

$ git commit -m "principles"

commit

Guiding principles

for teaching tech to undergrads

①

Stay in the browser

No downloads. No terminal. Students start somewhere familiar.

This talk's GitHub repository open in a phone browser

②

Stand on the shoulders of giants

We don’t have to start from scratch.

Diagram: a main repository is forked by three users; each fork syncs back to the main repo through pull requests

Remix, all the way down

③

Small pieces, every week

draft → reflect → share

④

Redundant resources

Before You Begin: Fork = copy, Commit = save, Pages = website, Blame = look at past changes

I give them a lot of redundant resources. I don’t just give them step-by-steps, because the technology changes very quickly, and adapting is part of the digital literacy skills. My students don’t need to learn how to follow directions, although some of them struggle with that. They need to learn how to adapt and figure things out as technology changes.

I tell them up front: some of these suggestions might be outdated, and some of these videos might show an older version. See if you can figure it out. If you can’t, I’m here, but I want you to try to figure it out yourself first.

There are videos that really do walk them through step by step, but I prefer that they click around and experiment. That’s how we learn software, right? Who reads a manual anymore? We all just click around and figure out what’s happening when an app updates.

⑤

Process over product, concept over button

The thinking matters more than the polish. GitHub will change; digital literacy adapts.

Children making crafts at a table covered in paper, yarn, and supplies

⑥

AI for troubleshooting, not thinking

LLMs as tech support, never as the author.

UCF’s “walled garden”

Enterprise Microsoft Copilot
UCF sign-in
Data stays at UCF
Not used for training

ekjphd.com/sandboxthe sandbox: try it with meopen in new tab ↗

About 2 minutes; move on by 3:06. Click inside the sandbox to demo it. When you’re done, click the table outside it to get your keys back. If it misbehaves, use “open in new tab ↗” in the frame bar.

This is the sandbox I created. This is what a GitHub repository looks like, and I have directions on the left side. Step 1 of 15: fork the repository. When you’re looking at this and you don’t know what to even look for, the button is glowing. So you click Fork.

Then it walks me through changing the name, and describing my portfolio. It’s not saved anywhere, so I can type gibberish. I click Create Fork, and a pop-up says it’s been forked successfully. Then everything else is grayed out, and the next step is to find your home page, index.html.

Some of them have never seen HTML, so I wanted to walk them through it. The directions say to find the line with the h1, “Welcome to DIG 3171,” and replace it with your own title. Then I modify my paragraph, preview it, and commit my changes, with a description, which is good version control. Then it walks them through setting up Pages.

I’m really just clicking whatever is blinking. This was one of the many resources I gave them.

The site they fork DIG 3171

ekjphd.com
/DIG3171

“Forkable repository for students in DIG 3171.”

The site they fork ENC 4265

The ENC 4265 portfolio template: Home, Manual Assessment Memo, Chatbot, Procedure Video, Manual, and Reflective Blogs

ekjphd.com
/ENC4265

A page for every assignment.

The site they fork ENC 3241

The ENC 3241 template home page: 'Your Name Here', a placeholder for the professional paragraph, and links to Resume, Cover Letter, Instructions, and Proposal

ekjphd.com
/ENC3241

“Your Name Here” waits for them.

And for ENC 3241, which is the lowest-level course I teach, I really streamlined it and made it look professional, in our university’s colors, so they didn’t have to try to do the CSS. I had some AI help with this one too, the free versions of Claude and Copilot at the time. Those are their four major assignments.

I have them post everything in a discussion, to help them see other ways of doing it. They look at what their peers have done and comment things like, “Wow, how did you get the text to be purple instead of black?” or “That’s a really good idea. How did you add an image or a GIF?” There are tutorials on that in the course, but when they see their peers doing it, it suddenly becomes more within reach.

There’s also a little bit of peer pressure. It’s not just going to their professor, whose opinion they clearly don’t care about sometimes; it’s going to their peers, which has a little more at stake.

Liz Lerman’s Critical Response Process

The Critical Response Process takes place after a presentation of artistic work. Work can be… at any stage in its development.

1 Statements of Meaning

Responders state what was meaningful, evocative, interesting, exciting, striking in the work they have just witnessed.

2 Artist as Questioner

The artist asks questions about the work. After each question, the responders answer. Responders may express opinions if they are in direct response to the question asked and do not contain suggestions for changes.

3 Neutral Questions

Responders ask neutral questions about the work. The artist responds. Questions are neutral when they do not have an opinion couched in them. For example, if you are discussing the lighting of a scene, “Why was it so dark?” is not a neutral question. “What ideas guided your choices about lighting?” is.

4 Opinion Time

Responders state opinions, subject to permission from the artist. The usual form is “I have an opinion about ______, would you like to hear it?” The artist has the option to say no.

I don’t want them to just reply, “Hey, nice website, good job.” So I guide them with Liz Lerman’s Critical Response Process, which I found a couple of years ago. It was designed for giving feedback on performances, like interpretive dance and big artistic productions, and I’ve adapted it to work for online website portfolios.

It really guides them toward emotionally intelligent, substantive feedback. We always say feedback must be substantive, and every time they write, “I agree, I like your website.”

So first they make a statement of meaning: “When I look at your website, I see that you like motorcycles, and that’s great.” Then artist as questioner: the person who posted asks, “What do you think about this font? Is it large enough? Is my color contrast okay? Do you have suggestions for images I could add?”

Then neutral questions. When you’re responding, you don’t say, “Ew, why is it so dark?” You say, “What guided your choices about the color scheme?” A lot of them reply back and forth, especially in Yellowdig, which rewards replies and emojis to make it feel like social media.

And then opinions: “I have an opinion. Would you like to hear it?” In the online class, they invite opinions when they post.

one student’s reflection, setup week

“I really enjoyed this assignment. I had heard of GitHub before but had never used anything like it, although I do have some experience with markup languages. Recognizing all the different words that the site uses was somewhat difficult, like finding out ‘fork’ = copy. After this assignment, I feel confident enough in the directions that I could teach someone else how to use the site basics without help. Seeing my paragraph written out on the website made me feel like I gained a new skill and accomplished something, and I’m excited to fully flesh out the portfolio for future use. I revised my professional paragraph from last week’s assignment, and I want to ask if it shows up on the site okay, and also, does it seem too long or too short for the website?

No AI tools were used during this assignment.”

— anonymous student, ENC 3241

final reflections

Illustration: a student with a backpack sees a professional with a briefcase in the mirror

I thought this was an English course?

It is.

$ git log --since=2025

patch notes

Since I proposed this…

AI kept moving

Building the sandbox

then · 2025

Chat

Many prompts. Copy, paste, repeat.

now · 2026

Agents

One request. Built, tested, deployed.

2025 → 2026

AI moved into the tools

Copilot agents inside GitHub
Claude inside Microsoft Copilot
Agents that click, type & commit

This site was forked too.

An AI agent remixed my past slide decks into this GitHub site.

…the argument is still mine.

So what should students learn now?

Questions?

ekjphd.com/aect26 github.com/ekjphd ekj@ucf.edu