Harvard Extension School

• Modern & Mobile Web Design 2: Sass, CSS variables and calc, print stylesheets, advanced media queries, meaty final project (students built their own responsive design framework)

• Intro to CMS: This popular WordPress project course had students building 6 sites during the term and planning 1 site, including e-commerce, custom fields, custom theming, and a final project site.

• Designing Stories for the Web: Taught with Martha Nichols, a journalist, this course was about learning to write well for the web and getting your stories posted online in WordPress. So far as I’m aware, no one else is teaching a course like this one.

In addition to the teaching work, I took the educational video course (which was excellent) and finished my certificate in Learning Design and Technology. This was a series of 4 courses, including an intro to instructional design, adult learning theory, video editing, and a course in online course design.

LinkedIn Learning

• CSS: Display, a short course devoted to a single CSS property.
• HTML & CSS: Linking. How much is there to say about links? A ton, actually – navbars, links, buttons, and all of the associated styling.
• Learning Editor X. Editor X is a web design tool from Wix, targeted at graphic designers who want to make sites without code. It fills a gap that Dreamweaver used to fill. Webflow is a direct competitor.
• Semantic HTML and CSS Code Challenges. A series of 12 challenges to practice semantic HTML and CSS coding, including Flexbox, Grid, and navbars.
• Joomla! 4 First Look. My first Joomla course in 5 years looks at the most recent Joomla 4 release, highlighting the latest features.
• Learning Wix. I first recorded this course in 2019. This is an update.
• HTML and CSS: Creating Navigation Bars. An in-depth course in making responsive navigation bars, including Flexbox layouts, reordering links, centering the logo, dropdowns, hamburger buttons, and other crazy tricks with HTML and CSS - no JavaScript required.
• No Code Solutions for Websites and Apps. This is an update from 2020. To the original 8 no-code technologies, I added another 11 technologies to give you an overview of the exploding no-code space in web design and development, automation, membership, and native apps.
• Learning Webflow, an update of the course I recorded just before the pandemic. This one covers the latest Webflow interface, building a site from scratch.
• No-Code Web Design Weekly. Formerly “Accidental Web Designer,” this course releases a short weekly video about what’s happening around the no-code space. It provides tips for content, marketing, and technology.

I’ve already recorded two courses for release next year, including a more in-depth Joomla 4 course, and an introduction to web design and development.

Here’s a still shot of the temporary dining room recording space I set up for the web design course.

Frontend Masters

• CSS Grid & Flexbox for Responsive Layouts, v2. I recorded this course originally in 2017. Finally this year, I updated this with the latest Flexbox and Grid technologies.
• Getting Started with CSS. This is a project course, building a portfolio using basic HTML and CSS. We use responsive design, CSS grid, Flexbox, and CSS variables to put the site together. It’s great practice for those who are wanting to strengthen their CSS skills.

Here’s a shot of me teaching at Frontend Masters in August, explaining something for the camera.

Other projects

Knowing that I was ending my relationship with Harvard, I signed up for an educational video course. At the same time, I coordinated with LinkedIn regarding appropriate equipment for configuring my studio space. I now have a dedicated room in my home for making video, including a teleprompter, DSLR camera, Yeti X mic, and a nice background for recording.

As a result, I started to dabble in making more YouTube videos and doing some live streaming sessions. They were all really fantastic to do. I’d like to do more, but as you can see above, I’ve been too busy doing other things to spend much time here… so far.

Other various “other” highlights:

• I’m serving as an advisor to 2U’s UX/UI Bootcamp program, talking with them about curriculum periodically.
• Erika Lee and I wrote #30DaysOfHTML and #15DaysOfCSS. These were free email series that were turned into ebooks. They were a ton of work but helped us build a substantial mailing list.
• Erika and I turned our reflection on #30DaysOfHTML into conference talks, speaking at both PSEWeb and at HighEdWeb with our talk “30 Days of HTML: Lessons Learned Presenting Training by Email.”
• Spoke at No Code Conf 2021, talking about planning no-code websites and apps. I gave away some awesome worksheets to walk you through the process.

Next year

• LinkedIn and I have outlined 8 courses for 2022, but that only takes us through August. 😉
• Frontend Masters and I have scheduled “HTML Semantics & CSS Selectors ” to record on March 15.
• I’m starting to work more with other software companies to create training specifically for them.
• I’ve also got my own training platform ready to build, with the first course likely to release early next year.

Keep watching! There will be much more teaching from me coming in 2022 in the realm of HTML, CSS, UX, and no-code technologies.

Today’s work took about 2 1/2 hours. Because the equipment was out of the box, we spent the time placing desks, chairs, camera, lights, and other materials. We also tested the video and audio.

The LinkedIn Learning team is based in Carpinteria, CA, while I’m in Boston. We’re separated by 3000 miles and 3 time zones. I moved the equipment and placed it and positioned it as they described. While setting this up, we had 3 cameras showing the scene. Two were the built-in webcams on the two computers (one mine, one theirs). The third camera was the DSLR itself, showing through the camera’s filming software.

Sunday afternoon fun – unpacking for tomorrow’s tech check and configuration.

This is nowhere near the final configuration for the room, but things are generally in place.

• Teleprompter has a Canon camera inside. I’ll use my iPad as a teleprompter device, which sits on the tray.
• Canon camera is hooked to a wireless lavlier transmitter. The microphone and receiver are on the table.
• Three lights, definitely not in the right spot or height, but ready to be placed.
• Computer is the recording computer. This is what will be used to control the camera remotely. The camera and computer are connected via USB-C.
• The small glass desk is where my computer will be placed. There’s an external keyboard and mouse that will go with it.
• There’s a pile of “stuff” on the buffet for visual interest placement later. It’s likely I’ll be adding a plant or flowers or something.

I’ll be recording a live action course with LinkedIn Learning from November 29 to December 3.

In non-pandemic times, this would mean flying to Carpinteria, CA, then working with a film crew for a week on a stage in a controlled environment. It’s quiet, the lighting is always perfect, the passing of time is not obvious as the stage always looks the same.

In pandemic times, I’m at my home in Watertown, Massachusetts, just outside of Boston. LinkedIn sends me boxes of gear, which I set up. As they say, “Jen, you’re the grip and the talent.”

A grip is the film crew member that is tasked with moving things, assembling them, taking them down, and so forth. They don’t run the camera, nor do they run the sound, but they may put the tripod in the right location.

Who runs the camera? The film crew is in California, 3000 miles away. They run the camera over the internet. It is an amazing setup.

I’ll document the process over the next few days.

First, you must prepare a space for the filming to happen. My dining room is relatively easy to rearrange and prepare. I’ve brought in a small, glass desk for the set. My dining room table is moved out of the way, and there are chairs all over.

🚿 [Worksheets] (https://jen4web.notion.site/jen4web/Planning-Successful-No-Code-Websites-Apps-efd3651dfd124bdd9a4b04ca0c93ed7b)

📷 [Slides] (https://www.slideshare.net/jen4web/5-steps-to-effective-planning-for-your-nocode-website-or-app)

How often do you get distracted by the latest no-code tool? Do you start with technology first, solving problems later? Or do you start with a problem but give up quickly, because you just can’t figure out the ““perfect”” solution with so many choices out there?

Based on my Harvard course and book, I’ll walk you through how to define goals, audience, features and functionality, data flow, and brand to create an executable outline of work for your next project, complete with a clear outline and worksheets. With this plan in place, you’ll gain more confidence than ever in launching your next project and you’ll feel empowered to build more effectively!

Jen Kramer (she/her), HTML, CSS, and no-code training for all, JenKramer.org Jen Kramer has been teaching & practicing web design for over 20 years. Formerly an award-winning Harvard lecturer, she’s currently a freelance no-code, HTML, and CSS educator. She has also created over 60 courses for LinkedIn Learning, Frontend Masters, and more.

Presented at Webflow’s No-Code Conference 2021, November 17, 2021.

Five Steps to Plan Your No-Code Website or App

How often do you get distracted by the latest no-code tool? Do you start with technology first, solving problems later? Or do you start with a problem but give up quickly, because you just can’t figure out the “perfect” solution with so many choices out there?

Jen Kramer presents five steps to effective planning for your next no-code website or app. Based on her Harvard course and book, Jen will walk you through defining goals, audience, features and functionality, data flow, and brand to create an executable outline of work for your next project. Stay on task and reach success with a clear outline of process and worksheets to walk you through each step. Gain confidence in creating your next project and build more effectively with a plan.

Twenty years ago, Barbara Hall and I (among many others) graduated from The Graduate Center at Marlboro College with a MS in Internet Strategy Management.

The class of 2001 was one of the biggest in the history of the school, with three separate sections of roughly 20 students each as we started. As we arrived, I remember employers salivating over all of us, wanting to hire us as soon as we were done, even visiting us the first day of school. Alas, the “dot bomb” was well underway, having started with the stock market crash in March 2000.

We had students from all over, literally flying to class every other weekend, from Kansas and California, taking the train up from Pennsylvania and New York, and driving in from Boston and Burlington. Unfortunately, not all of us made it through, as employers started cutting learning stipends in early 2001.

But we graduated in August 2001, into a world that seemed bright, despite the contraction in the economy. I gave the “valedictorian”-ish speech to the class at graduation as it was streamed online - an unheard of event in 2001, especially in the middle of nowhere.

I immediately started as a TA as soon as I graduated, a week before September 11, the same time I met with my first post-graduation web design client (on September 10). The world changed overnight, but thank goodness there were still students to teach and websites to build.

In 2002, I advised 4 capstone projects. I’d advise dozens more to come in the following 20 years.

By 2003, the degree became the MS in Strategic Technology Management, when it was no longer fashionable to have “internet” in the degree name. I also started teaching the first courses of my own.

By 2005, the degree disappeared entirely, sort of becoming the MS in Information Technology.

The school name changed every 2 years for a while – I forget the exact timeline and sequence, but it was something like:

The Graduate Center at Marlboro College

Marlboro College Graduate Center

Henry Zee Persons School of Marlboro College

Graduate School of Marlboro College

Marlboro College Graduate School

By 2011, I’d departed as a faculty member.

And by 2020, Marlboro College became the Marlboro Institute at Emerson College. No more main campus, no more Brattleboro building.

Still, it was the perfect graduate degree for me at the right moment in my life. I earned back my tuition at least 3 times over in the 10 years spent as a faculty member and program director. The degree enabled me to teach at Harvard, something that would have never crossed my mind as possible in 2001, or even in 2011. And I made many friends along the way who I’m still in touch with today.

Marlboro’s faculty and administration gave me many opportunities that kept me growing long after I’d graduated. They supported many user group meetings for Adobe and Joomla, supported our Joomla Day events with free space and a smile, and even sent us to New York City to give away information about the school at a conference one year.

We shall never forget driving to the Grad Center to participate in the online chat for class – text-based only and on AOL in those days, because we could not count on our dialup internet working at home for a full hour. (We had one in-person chat happening with the 8 or 9 of us who participated at Marlboro, with the second text chat happening online.)

We remember talking to Mr. Clean’s AI-driven website, as he gently asked us to reveal more personal details about ourselves.

Finally, Jeffrey Veen will always remind us that well-designed home pages address three things: Where are we? What can we do here? Where can we go next?

Happy 20th graduation anniversary to the class of 2001. Section 3 still rules after all of these years.

Instructor labels –

Green circle = the assignment

Gray circle = what students think is important

Include a section in the assignment that clearly spells out what you DON’T care about for grading. It’s as important as the rubric you use for grading.

At least perfect the right thing. pic.twitter.com/nTtyT5gQuE

— Janis Ozolins (@OzolinsJanis) June 17, 2021

#30DaysofHTML ended 2 weeks ago. My last teaching semester at Harvard ended yesterday.

In my educational video course, where I was a student, I created a video reflecting on #30DaysofHTML. youtu.be/R9WW-KlKV…

I’m returning to blogging shortly, now that I have some time.

Also, I need a job. My Harvard teaching gig is up on June 30, but there isn’t much for me to do between now and then.

Today I received the best compliment on my #30DaysofHTML course, even before it launches.

I don't know how you've managed it, but you've gotten me all excited about HTML.

— ოarῐa ᥨaῃ𝙜әr 🚁😷💉🇺🇸 (@mlanger) April 1, 2021

This gets to the heart of why I started this challenge and my thinking behind it.

How HTML is normally taught

HTML is the scaffolding behind a web page. It’s as exciting as framing a house, or [playing bass or drums in a rock band] (https://jen4web.substack.com/p/use-the-full-frontend-or-create-junk). In other words, there’s some artistry, but it’s underappreciated by most. Done right, it’s in the shadow of way more exciting and interesting elements of the project. However, without it, nothing else matters – HTML is foundational to a website.

When developers teach new developers HTML, it’s presented as a necessary evil. As little time as possible is spent on it, because everyone wants to get on to making things pretty and interactive – neither of which is a thing with HTML. Quick quick, here’s a tag, here’s an attribute, open/close things – whew, let’s move on.

As a result, HTML is the mushroom of the web world. It’s kept in the dark, and it eats a lot of crap by people who see nothing to love.

I love mushrooms

The purpose of the Hypertext Markup Language is to identify the parts of the web page: paragraphs, lists, headings, links, addresses, quotations, and so much more. How many times have I said this sentence in 20 years of teaching?

But finally, I made a connection: HTML is intimately tied to the story of the website.

Everyone wants to be heard and understood. Everyone wants their story heard. Great HTML is the way to communicate your story to the world.

When I was 14 months old and hungry, I would pull on my mother’s pant leg, point to the counter looming over my head, and grunt, “Cookie.” (Or so my mother says. I do not remember.) She would respond by giving me fruit, crackers, a bowl of dry Cheerios, or whatever else a 14 month old eats. Not a cookie, no matter hard I tried. Or she’d tell me it was almost dinner time and go away and leave her to finish it.

Consider that your crappy HTML is telling this same story. If your website is nothing but one < div > after another, you’re just saying COOKIE COOKIE COOKIE. You’re 14 months old, with a limited grasp of vocabulary.

Telling the wrong story

So. How do you convince developers, who just love everything pretty and interactive, that their framing sucks and doesn’t work? Their code that sits on top of it works just fine. Framing is SO BORING.

Well, accessibility, of course! It’s absolutely critical. Accessibility should start at the beginning. It should always be incorporated in the site. Good accessibility starts with meaningful HTML.

But – what the accessibility advocates are doing is not effective to get developer attention. They are, unfortunately, ignored for the most part.

We’ve (maybe) gotten (some) busy developers to feel guilty about their bad HTML. But changing it takes effort. Learning what HTML elements are available takes time and research. Time that could be spent learning the latest JavaScript framework.

Time for a new story with new framing.

#MakeHTMLExcitingAgain

If we focus on HTML’s syntax, that’s not interesting. What’s interesting is the meaning conveyed behind the elements. Why choose one element over another? How does that element contribute to the website’s story?

30DaysofHTML incorporates the following concepts:

• Focus on the meaning behind the elements. When should something be used or not used?

• Don’t overwhelm with all of the edge cases and complexity. Provide just enough information to feel like you know a little bit, and provide links to everything else.

• Identify any misconceptions about the element. HTML looks like English. The < address > element, for example, looks like it’s for a postal address. However, it can be used for any contact information associated with an article or website author, including phone numbers, email address, social media links, or even geographic coordinates. Who knew that? That’s interesting and fun and different.

• Remove the pretty and interactive, so learners are forced to focus on the scaffolding. We aren’t concerned with cross-device presentation or UX or anything else. It’s black text on a white page. There’s nothing else to do here… by design.

• Encourage application, reflection, and discussion. Not only should there be a little reading, but there should be some examples and problems to try too. Maybe the occasional quiz. Encourage readers to share their work and comment on each other’s markup and approaches. Put the discussion on the meaning we’re trying to convey.

• And finally, make it fun. Make some fun graphics, throw in a few emojis, use all of the web writing techniques to break up content with headings and lists. Write in a fun and informal style.

Hook 'em with a hook

["< address > should be used for addresses. You guessed that already. But what kind of addresses, and in what context?"] (https://jen4web.substack.com/p/address)

Draw the reader in. Make them curious. Conflict is interesting. The lure of something that perhaps you don’t know is intriguing.

I also sent out a [“Night Before”] (https://jen4web.substack.com/p/twas-the-night-before-30daysofhtml) email, explaining what to expect and how it will all work. This sets anxious learners at ease, and it sets expectations and generates interest. It also sets metrics for what success looks like.

Give them a familiar format

• The “X Days” format is popular at this moment. People talk about #100DaysofCode and #100DaysofNoCode and such. Why not #30DaysofHTML? Fortunately, it explains everything you need to know in the hashtag. 30 days, talking about HTML.

• Email is the format for delivery. It’s simple, easy, and everyone has it. Using Substack, I also create a website, and it has interesting discussion features for sharing work.

• In Silicon Valley speak, “reduce friction.” The email goes in your inbox. You read it when you’re ready. Another appears tomorrow. You’re getting 30 emails in 30 days. What’s not to love?

Time to start!

This is the start of my 30 day journey. I hope to learn more about HTML, but mostly, I hope to learn more about offering instruction in this format. What works and what falls flat? What is the response? What would I do differently next time?

I’ll write more about this in May.

[Interesting Substack feature] (https://medium.com/linda-caroll/how-substacks-new-gold-stars-will-help-writers-get-results-9fc6fdc6342a): your readers are given star ratings visible only to the newsletter owner.

As the article points out, you can give special offers to people who are actively reading your newsletter and weed out those who just wanted the freebies.

I’m also thinking about this for educational purposes. You know exactly which students are engaged enough to open the emails.

There’s a world beyond < p >, < a >, and < div >

What is 30 Days of HTML?

Receive one email a day for 30 days, each featuring at least one HTML element.

Expand your HTML repertoire, including element names, required and common attributes, example code, and links to more learning.

It starts April 1, 2021.

[Subscribe to 30 Days of HTML] (https://jen4web.substack.com/subscribe)

Who is this for?

This challenge is designed for those already familiar with HTML syntax but limited in their tag choices.

We cover the 95% of HTML that has a use on many of your web pages, but you don’t know it exists. No paragraphs, lists, and headings here.

But I don’t know HTML… yet

If you want to learn HTML from nothing, I recommend [my free bootcamp at Frontend Masters] (https://www.frontendmasters.com/bootcamp). If you’ve taken the bootcamp already, you will find this series a great next step in developing frontend web development skills.

This week’s reading: [Academics aren’t content creators, and it’s regressive to make them so] (https://www.timeshighereducation.com/opinion/academics-arent-content-creators-and-its-regressive-make-them-so)

A few quick snips from the article:

The philosopher John Dewey told us that an educational experience – what he called a community of inquiry – requires a cognitive presence (the learner), a social presence (the learning community) and a teaching presence (the professor).

By Dewey’s definition, if our professors spend their time editing videos instead of engaging with students, we cease to even be “educational” institutions. A video made by a professor for only their class is akin to the single-copy, handwritten book disseminated to just one room of people. It is regression, not progress.

I think the argument the author is making is this:

• Dewey says good learning involves 3 elements: learner, learning community, and instructor. This is a virtuous circle. All three elements feed on each other.

• If the instructor must spend more time making (bad) video, they have less time to spend with learners. The video is often bad, because instructors are usually not filmmakers. “Bad” may be bad production, but it may also be bad storytelling in the video.

• If the video is bad, then the learners will go elsewhere to get content, fracturing the community.

• Without all three elements in place for a good learning experience, university education is simply overpriced.

The practical side of this

I also make a lot of professional video for LinkedIn Learning and Frontend Masters.

In the past, I’ve tried to use these videos as the basis for my class. The students were extremely unhappy, because they could get their own subscription for pennies on the dollar of what they were paying for my university course.

They prefer my less polished, less produced, lower quality video, because they felt this was a better value for their dollar. Why?

Because they feel connected with me when I make a video for them. Students feel like they know me when I’m being my normal goofy self on camera. I have less of a personality when I’m on camera at LinkedIn. Professional polish and all that.

Video as textbook and analysis

Content can enable learning, but it cannot provide an education. Similarly, content is not our core value. There is a long tradition, going back to the printing press, of universities outsourcing their content provision to the textbook: an expensive relic, now replaced by largely free content on the internet. This is progress. Education should be better than ever, as we are now able to point at myriad incredible resources, possibly on the web, perhaps in our library, where we act as content aggregator, not creator. Creation is done when we have our researcher hats on, not our teaching hats.

In the old days, we read the book before we went to class, where the information was discussed and interpreted.

Today, video is asked to do both of these things at once: provide the information of the textbook AND provide the discussion and interpretation. The author thinks that professors spending their time making the textbook is a waste. Find other resources online, have the students use these as the textbook, and then provide interpretation and discussion in class.

What if we had some type of vetted and reviewed video that we could incorporate in our courses? Then we have an effective textbook for our courses, and again, the professor brings the interpretation and meaning to the material.

But I can't make YouTube-style video, so my stuff isn't engaging!

I don’t believe this at all, because the argument here is the technology should drive the content. In other words, the students won’t watch without music, jump cuts, and crazy graphics.

What if we had good content, making a reasonable video that tells a good story but with much less flash? What if we engaged students through discussion and collaboration?

Remember the original argument: If the video is bad, then the learners will go elsewhere to get content, fracturing the community. However, “bad” is not defined.

Bad video could mean bad production for sure. But it could also mean:

• The instructor is overwhelmed trying to make technologically interesting video, reducing time to engage with students.

• The students are not engaged with the instructor, so they go elsewhere for more entertaining content.

• Dewey’s community of inquiry is fractured.

What if instructors instead spent their time on making a good story, recording it the best way possible, and engaging students in discussion and activities? Rather than putting so much emphasis on video, put more on the activity and engagement for a better learning experience.

I have planned my first trip in over a year, pending my full vaccination… which looks increasingly likely!

I’m headed to Minneapolis to give two workshops with Frontend Masters.

August 18-19: [Responsive Web Design with Flexbox & CSS Grid, v2] (https://frontendmasters.com/workshops/grid-flexbox-v2/)
All things responsive design covered here, including Flexbox, Grid, responsive image approaches and solutions, grid systems, and plenty of exercises and challenges along the way. This updates the original course recorded in 2017 with lots of new information, approaches, and CSS properties. As always, there’s a healthy dose of HTML semantics and CSS selectors and specificity along the way.

October 14: [HTML Semantics and CSS Selectors] (https://frontendmasters.com/workshops/semantics-selectors/)
If you’re not fully using all three languages on the front end – HTML, CSS, and JavaScript – you’re missing out on opportunities to make pages more accessible, more compact, and more understandable to humans and robots.

Unfortunately, most of today’s education focuses solely on JavaScript, with a mere nod to HTML and CSS. The result is developer burnout, too much churn in frontend web development, and an obsession with the latest hottest framework. Twitter is rife with developers trashing HTML and CSS, wanting to turn the web into an exclusive JavaScript paradise.

What is most of this animosity based in? A fundamental non-understanding of HTML and CSS. This workshop focuses on all of those pieces you missed at bootcamp back in the day. How do we mark up content semantically? How can we leverage selectors to select what’s in front of us, using classes as a last resort? Finally, participate in the No-Class Challenge: Styling a web page using semantic markup and without the use of classes.

[HTML and CSS: Linking] (https://www.linkedin.com/learning/html-and-css-linking)

Hyperlinks are the foundation of the World Wide Web, but they come in many different flavors. Do you want to link to a specific point in a document? Make a phone call, or send an email? Link from images or dedicated navigation bars instead of text? In this course, instructor Jen Kramer gives you all the tools you need to make those tasks easy. Jen goes over basic links, linking to different files and resources, and linking from images, headers, text, and more. She shows you how you can style links and individual link states using CSS selectors, then goes into how you can make exceptions and create different styles. Jen covers the steps you should take to maintain links and redirect them when necessary.

When LinkedIn asked me to put together a course on links, I thought it was a ridiculous idea. How much could be said about links?

Then I started spelling out All The Things:

• Linking to pages within your site and pages elsewhere on the internet, in new windows/tabs and the same window/tab.

• Links to other things: PDFs and other documents, email addresses, phone numbers.

• Links within the same document (back to top links, links to sections of the page).

• Images as the item to click on to load a link, instead of text.

• Image maps, in which one image contains more than one link.

• The five states of a link for styling purposes: unvisited, visited, hover, active (once the link is clicked but before the page loads), and focus (when the link is selected but not yet clicked).

• Navigation bars, horizontal and vertical.

• Styling text links to look like buttons.

• Checking for link rot.

• Using a robots.txt file to control search engine movement in a site.

• Redirects, both client-side (meta tag) and server-side (301, 302, etc).

Basically, there’s a whole universe of links, and this is the course that covers it all.

What was happening on March 6, 2020, one year ago today?

I was preparing for a 3-leg trip from Boston. First stop was Portland, Oregon, for the SIGCSE conference. After the conference, I was heading south to California for some LinkedIn Learning recording. After some time there, I was headed to Arizona to visit my parents at their retirement community.

I was anxious about this trip. Because I was scheduled to be gone from March 11-24, I was worried that the airlines might shut down along the way. Maybe some element of the trip would be cancelled, but others would continue.

On March 6 at 10 AM, I was getting what would become my last haircut for 2020.

By that afternoon, Harvard announced they would not allow non-essential academic travel in the US. (They’d stopped allowing international travel a few weeks prior.) In other words, my participation in SIGCSE was no longer happening.

By March 9, LinkedIn had cancelled my trip for the following week.

Cancelling the trip to see my parents was a no-brainer. I could not live with myself if I brought them the virus. As it turned out, their retirement community closed to visitors around March 16.

Of course, this was just the beginning. Many more trips would be cancelled along the way, including a birthday trip to Europe, conference trips, and video recording trips. It was a year without music, as all of my music groups cancelled rehearsals, concerts, and whole seasons of performance. It was a year without family. Indeed, I last saw my family in August 2019. It may be 2 years before I see them, possibly longer.

Remember paint-by-number as a kid? There was a black and white drawing of something, sprinkled with numbers. The numbers correspond to the paint colors. Match the paint color to the numbers in the drawing, and presto, instant masterpiece.

This is the [mental model] (https://jamesclear.com/feynman-mental-models) of many people creating websites, flyers for the bake sale, and other digital communications. Find the template you need, drop in your own information, and presto, instant masterpiece.

Only in both cases, it’s not really a masterpiece.

With paint-by-number, painters get the joy of doing the painting without doing the work of visualizing something and mastering painting technique to produce the thing.

With a Microsoft Word template, there may be a match to what the user wants to convey. An event flyer to hang in a coffee shop or library contains all of the same information: event title, time/date/location/cost, brief description of what happens and what will be experienced, contact information for questions, and an eye-catching graphic. Of course, the flyer looks similar to other fliers on the bulletin board, because everyone is using similar templates. But it may accomplish its goal.

With websites, templates provide a way for many to structure their content. They don’t quite know what to say, or how to say it, but they need a website. They pick a template, fill in the information to the best of their ability, and hope it works well enough to accomplish their goal(s).

Creating a method(s) to guide someone through the thinking process about a problem at hand is incredibly difficult. We get distracted by the “edge cases,” the 20% of cases when the process doesn’t work, rather than the 80% of cases where it does.

Refining the method to a fill-in-the-blank document, workbook, or template is another layer of abstraction where another 20% of cases are lost along the way.

Structured thinking about a problem is really difficult. If you can refine your methods for approaching a problem into a paint-by-number solution, people will pay lots of money for it, even if it’s not perfect.

In recent years, I’ve started creating “turn-in sheets” with my assignments in academic land.

My assignments spell out what I want students to do for a graded project.

The turn-in sheet structures their answers. It ensures that they’ve hit everything that I wanted them to address in their work.

Originally, I asked students to do this to streamline grading. When I ask for use of certain structures or functionalities when building a web page, I do not want to dig through each site to find the thing. I definitely don’t want to dig through tons of code to find relevant lines. The turn-in sheet asked the student to tell me where all of the things were that they needed to address in the assignment.

Later, I realized these turn-in sheets serve more functions than this.

• Student anxiety is reduced, because they know they’ve addressed all aspects of the project by completing the turn-in sheet.

• Students were more likely to reflect on their work, because it was clearer to them what they accomplished when it was formatted well.

• It helped to cut down on cheating. This was completely unexpected! When students have to explain where to find an example of X programming structure, they must understand the code they steal. I still remember the student who stole a 12-column layout and claimed it was a 4-column layout. We caught it because the student didn’t understand the stolen code and pointed us to exactly where the plagiarism happened.

Turn-in sheets and course workbooks help to make intangible skills like programming feel more real. They organize thinking. And they may make your grading life easier, too. Try this for your next course.

I’ve created “courses” at LinkedIn Learning since 2008, when the company was called Lynda.com. Lynda.com was one of the earliest, if not the first, video training companies out there.

Their course format is a series of short videos. One video segment may lead into another, but fundamentally, each segment stands alone as a unit. After (theoretically) watching the videos, you receive a certificate of completion which you may attached to your LinkedIn profile.

Theoretically, because you can get this certificate simply by streaming the videos in the background, on mute.

Theoretically, because there’s no transference of skills happening to one’s own projects or situation, no reflection on the learning process, nor is there a meaningful evaluation of learning for either the learner or the instructor. LinkedIn Learning is aware of this issue and they continue to work on ways to solve it.

However, the genie is out of the bottle, so to speak. The LinkedIn Learning “course” has become a misnomer that others try to emulate.

Photo by Karolina Grabowska from Pexels

This is not a course

In the explosion of online courses offered all over the internet, a “course” is now a series of videos hidden behind a login. Pay your money and get a handful of overproduced videos that cover your area of interest.

Then the creators wonder why students aren’t learning the material, or wondering why sales have dropped. Currently, creators turn to more bells and whistles in the videos, more animation, more attempts to make “edutainment” rather than solid education.

Even if your course is an asynchronous, instructor-absent course, where students move through it at their own pace, you need more than video to truly make a course.

When videos become a course

Videos are awesome for demonstrating something. However, they’re terrible for transferring knowledge to a new environment. They’re not good for measuring what you’ve learned. Consider how often you watched someone do something and you think, “that doesn’t look so hard.” Then you try it, and you quickly discover that you have no idea what you’re doing.

Yes, have videos in your course. No, videos aren’t the whole course. You need more to round out the learning experience. Here’s some suggestions.

Quizzes and games

Add self-graded quizzes to evaluate student’s assimilation of the video. These don’t have to be standard-issue multiple choice. Consider matching games, categorization games, and formats that involve photos, not just words. This type of evaluation is best for terminology or other behaviorist “you just gotta know this” material.

I do it, we do it, you do it

In your video, demonstrate how to do the thing you’re teaching. Ideally, students are following along with you, doing the same thing.

Now provide your students with the assets they need to do the same type of thing on their own. You provide the structure to think about the problem, the goal they’re trying to achieve, and any boundaries and guidelines for where they should focus their attention. Follow this up with a video explaining how you solved the problem. Bonus: have a discussion thread where students may post photos or links to their work, along with a brief reflection – what went well? Where did they get stuck? What do they still not understand? What would they do differently next time?

Finally, invite the students to do the thing on their own. Provide a separate discussion thread where they can show off their work. Again, encourage reflection, not just “this is my thing.”

The middle step is the most important, because this is when transference happens. By giving them a small project with everything they need to succeed, this is where students gain confidence or realize they need more help in a certain area. They get a sense of what’s required to do the thing on their own.

Incidentally, the middle step is the piece that’s missing in almost every course out there. It’s definitely missing in every software course. And it’s super critical for understanding how to program.

Workbooks provide structure

When students learn something new, they’re not only learning the buttons to click, or the syntax, or the structure. They are also learning the organizational tools and thinking processes that go with the thing they’re learning.

This is one of the most overlooked aspects of teaching. Students of all abilities and intelligence have an issue with this. My Harvard students had as difficult a time knowing where to start a project as students did at any other university where I’ve taught.

Give people a structure for thinking about the problem at hand. If it’s a 5-step process, the workbook contains those 5 steps written out, along with whatever questions they should address and a space to write. Include reflection questions. Include suggestions for making the activity more challenging or less challenging.

Surprisingly, even in our digital age, people do not mind printing a workbook and writing all over it. In fact, many prefer this methodology, because they feel like they have a tangible asset after class is done.

Hopefully some or all of these tips help you raise your online video series to a full course.

If I had to describe my [T-shaped skills] (https://en.wikipedia.org/wiki/T-shaped_skills), I’d say my depth is in HTML/CSS and user interface design. Across the top, you’d find planning websites and UX, teaching skills, instructional design skills, marketing, and general technology skills – the ability to look at new software, figure it out, and apply it to a problem.

As I move into the no-code world, I’m watching a new group of people relearn the issues we already learned and understand well in the professional website world, the marketing world, and in the world of UX.

Today I watched someone define a target audience as “non-developers.”

Cool. We’ve left out the 0.3% of the population who are coders. That leaves 99.7% of the world left as a target audience. This is too broad.

Defining and targeting an audience for products is something already well-known to the world of marketing and user experience. However, the no-code world doesn’t know this work exists and has no idea how to apply it to what they do.

We see this in the coding world. People complain about how tired they are about coding solutions to their problems, maintaining those solutions, and so forth.

However, if you mention “no-code” to the coding world, they have no idea what you mean. They may also dismiss this out of hand as too trivial for their attention.

For those who are looking at new emerging sectors, see if you can identify what that sector currently struggles with knowing and mastering.

The no-code space current worries with user experience, marketing concepts, and project management. “Agile methodology for no-code” is a no-brainer for this space. No-coders need to know project management, but everything is currently framed with coding in mind.

User experience is framed with code in mind too, even though UX is a no-code world! What happens if you plan a product and hand it off to no-coders to implement? Nothing. It’s the same process you’d use for coding. But when you’re not using the language your audience speaks, then it feels like your concepts are inaccessible and unintuitive.

Speaking to your target audience is everything. When knowledge is locked up in the jargon of a specific discipline, it’s not transferable to others.

How can you make your work accessible to adjacent disciplines? How can you codify what you know into a framework that applies to cousins of your areas of interest?

Honestly, the last thing we need are the 24-year olds who discovered no-code during the pandemic to teach people how to build no-code products. They don’t have the background to do it well.

I was speaking with an English professor the other day. She was discussing how online teaching has changed her approach to class.

Previously, she’d have individual conversations with students about improving their writing. Now she has those conversations publicly, with all students in attendance on Zoom. She was particularly concerned about constructive critique and not embarrassing students.

I said, “Sounds like a music master class. Only you’re doing it with writing.”

In a music master class, a form that has been part of classical music teaching for centuries, a well-known and well-respected audience teaches a lesson from the stage. There are a handful of performers, playing a piece they’ve worked on for some time. The artist works with the student for a period of time, often 15-20 minutes. Typically, the artist focuses on one aspect of the student’s playing; often it’s the artistry that gets attention rather than the mechanics of notes and rhythms.

The audience gets enormous benefit from this:

• They learn how a master performer thinks about and approaches a given piece of music.

• They see teaching techniques on display, including how the student responds and improves to suggestions.

• The audience may take some of the lessons back to their own playing in a moment of transferance.

• The audience also listens critically, comparing their own performance of the same piece to the student’s and the artist’s work. Is there anything the audience member might take to improve their own work?

• The audience also gets moments of critical thinking – do they agree with the artist’s analysis of the student? Many critiques are art, so there is no “correct” answer.

In an academic environment, the English department would rarely (never?) overlap with the music department. Indeed, academics who attempt to be “cross-discipline” often are penalized in promotions and tenure decisions. However, her husband is a musician, and she understood the parallel to the master class having attended a few with him.

Imagine how English class might change if they took more teaching tips from the music department.

Below is a recent thread about what makes a good online course. Click through to read the whole thing.

In the last 2 years, I’ve gone through 8 online courses but completed only two: WoP by @David_perell and BASB by @fortelabs. What makes them different and what can other course creators learn? Here are 11 components for creating a next-level online learning experience:

— Julia Saxena 🚀🚢 (@julia_saxena) August 8, 2020

Main points the author hits include:

• Measurement of progress

• Collaborative learning and feedback

• Proper use of technology (like breakout rooms)

But her first item was this:

1. Onboarding: Before the course starts, let students reflect on their intention and goals. Measure their current state to show them where they are now. Then measure again at the end to show progress.

— Julia Saxena 🚀🚢 (@julia_saxena) August 8, 2020

This is the definition of [humanistic learning theory] (https://www.wgu.edu/blog/what-humanistic-learning-theory-education2007.html). The learner should have their own goals and [grades are irrelevant] (https://facultyweb.cortland.edu/andersmd/HUMAN/PRINC.HTML). Measuring their own learning is important.

This can be implemented by giving the same quiz at the beginning and end of the course, so students can measure learning in a firm way. Or it can be mushier – asking students to reflect on what they’ve learned is one way of doing this.

From the recent [interview with Lynda Weinman] (https://linkedin.zoom.us/rec/share/cKJnxLj_rCm646Vp_CMBlbnfKvO0Yw67pRubSDNg1D_qz1WVZMq2q03CIolp_4qC.iyRiY3ms0gVfWTET?startTime=1612461598000), founder of Lynda.com:

To be a good artist, you must be critical. You don't have to save it all.

Here she was referring to her new 3D printed pottery work. However, she did go on to say this advice can apply to careers and career focus.

As she explained, sometimes you make a mistake, or you make something that’s not terribly awesome. Learn from what happened and let it go. Move on.

Many people let mistakes keep them from moving forward in their field. They obsess over the thing they did wrong, rather than figuring out the lessons in what to avoid or improve next time.

You don’t have to save it all. It’s ok to throw it out and move on.

Recently, I attended an excellent [interview with Lynda Weinman] (https://linkedin.zoom.us/rec/share/cKJnxLj_rCm646Vp_CMBlbnfKvO0Yw67pRubSDNg1D_qz1WVZMq2q03CIolp_4qC.iyRiY3ms0gVfWTET?startTime=1612461598000), founder of Lynda.com. She sold Lynda.com to LinkedIn in 2015 for [$1.5 billion.] (https://www.vox.com/2015/4/9/11561324/three-reasons-linkedin-broke-the-bank-for-lynda-com)

Today, Lynda is creating [3D printed pottery] (https://www.instagram.com/lyndaweinman/?hl=en). It combines tactile art with plenty of programming.

There were two reflection points she made that I thought were outstanding and transferable. This post involves reflecting on mistakes.

One of the great qualities of a teacher is an ability to reflect on mistakes made. The process sounds so simple, but it’s very difficult to do in practice. [Lynda is a master at this] (http://claybottress.com/category/art-journey/failures/) and includes a section on mistakes in her blog.

• Identify the mistake made in a very specific way. Detail exactly what lead to the undesired outcome.

• Identify exactly what you’ll do to avoid this mistake in the future. Sometimes this is built into the above statement.

• Optional: detail what you can do to make a more positive outcome when this type of mistake occurs.

An example that follows this formula [from this recent blog post] (http://claybottress.com/types-of-mistakes/):

Mistake #4: Do not trim the base when the clay is too wet. Wait a day or two for it to become a lot more stiff, but not leather hard. Lesson learned: When the vase falls over and becomes lopsided, squish it so it looks like that was your intent.

My students have always loved moments when it looks like I’m struggling, when I make a mistake in coding, or make other mistakes in class. It’s always an excellent teachable moment. Learning how to identify those mistakes and fix them is really important, but it’s rarely something covered in the curriculum. Instructors think they look “stupid” for making mistakes when teaching. This isn’t true. It’s encouraging to students to know that the teacher doesn’t have superpowers. Everyone struggles sometimes. The difference is the teacher struggles less than the student.

In all the web design meetings I've been in over the years, I don't think I've ever heard anyone say: "How do we design this to last." It's just assumed they'll be a redesign every 2-3 years. Why? Why is that assumed?

— Gerry McGovern (@gerrymcgovern) February 15, 2021

My response:

Because techies still drive the desire to redesign the website. We believe that if you don't know the Hottest Framework Of The Moment, our careers are doomed. Marketing/content doesn't know better with the tech. Everyone is exhausted with the constant churn. https://t.co/iGO4szTP4d

— Jen Kramer (@jen4web) February 15, 2021

If we look at the technical timeline, this goes back to the start of the web. In the 1990s, HTML and browsers changed rapidly enough that we needed to redesign websites to keep up with what was new. People had no idea how to design for this medium. Netscape and Internet Explorer were completely different. Table-based layouts were new. Fonts other than Times were new. We had 216 web-safe colors and a 640x480 boat anchor-style monitor to do it all.

In the 2000s, it was a matter of integrating CSS, ripping out tables, and getting people running on content management systems. We started to integrate multimedia and social media. Internet connections got faster, so we used more images.

From 2010-2015, it was making sites responsive.

From 2015 on, it became all about the JavaScript, shortly by all about the web apps.

And now, everyone in Geekland is exhausted by how fast everything changes.

Once the tech department has turned over in 2-3 years, all institutional knowledge has been lost about the site and how it was put together. The current developers trash the current site and how horrible it is. It’s time to redo the site in another technology that the current devs know. Then they depart, new devs are hired, and the cycle begins again.

Imagine a 10-year lifetime for a website. We might change the look of the frontend a little during that time, but we won’t change the fundamental working of the system.

That means our most recent redesign would have been February 2011. Content management systems and jQuery were the thing. Node.js was 18 months old. GitHub was a few years old. Angular was just barely released. Bootstrap wasn’t yet released.

Those websites were perfectly effective, but not as slick as the stateless websites we have today. A website from 2011 would look quite dated in 2021, not just in graphic design, but in technological design.

A 5-year timeline is more realistic with the fast pace of technology. However, if employees continue to turn over in less than 5 year intervals, do we attract the best people to work in the tech department if they’re working on 4-year old technology? Do we define the “best” people as those who are up with the most cutting edge techniques, or those who know the current tech on the current website?

There’s a lot of cultural issues here that we must first resolve. Perhaps the industry is still too young to realize we’re burning ourselves out.

One of the great outcomes of studying instructional design from a theoretical perspective is the ability to spot patterns in teaching.

When teaching software and coding, one typically encounters two theories in use.

• Behaviorism : Just teach people the behavior and reward them for doing it correctly. Based on B.F. Skinner and others.

• Best use is for the fundamentals of the subject. In math, it’s basic arithmetic. In languages, it’s alphabet, spelling, and grammar. In music, it’s notes, rhythms, and scales. If the teacher says “you just have to memorize this,” that’s behaviorism.

• If you’re evaluating performance, it’s often done through multiple choice, true/false, and other means of regurgitating facts. Students are rewarded for memorizing, not applying.

• If you were making a recipe, you would be rewarded for following all of the instructions correctly, rather than how good the recipe tastes. Behaviorism does not work in all kinds of learning.

• Constructivism : “Learn by doing.” Base your learning on previous experience in the world, and apply that previous learning to the problem at hand.

• If you’re following a recipe, you’re the person who changes the ingredients the first time you try it. You know what you like and what works from previous cooking experiences. You know you don’t like mushrooms, and you’ll leave them out of this recipe. You substitute butter for margarine, chicken broth for beef broth, and add meat to vegetarian dishes.

• Best use is “doing” subjects once the fundamentals are mastered. Once a music student has learned a piece of music by a Baroque-era composer, how would the student apply those techniques and styles to the next Baroque-era piece she learns?

• Evaluation happens through some kind of final product, not through the work along the way. Typically this is a project-based evaluation: a final research paper, a piece of working software, a film, a performance.

• Constructivism shouldn’t be applied where there are absolutely right and wrong answers. It’s more about the shades of grey than the extremes of the spectrum.

In the software and coding world, behaviorism drives most instruction one encounters. It’s the “help files” associated with the software: go here, click this, type that, and you’re done. In code, it’s dominated by StackOverflow and developer blogs: here’s a chunk of code that does this thing.

Often, a coding class will start with examination of that chunk of code and some of its nuances. In that moment, students would tell you that they understood that code and its use.

The next thing students are instructed to do is constructivist. “OK, now apply this to your own project.” No further guidance is given in that moment.

This critical moment is the time when students decide they are not “good” at programming or technology. Instead, these students are a victim of poor teaching.

The instruction isn’t necessarily bad. The instructor explained that code in minute detail. The idea of applying that code to your own project isn’t bad either. Unfortunately, there’s a step missing in between.

That step is [transference] (https://learningsolutionsmag.com/articles/288/can-they-do-it-in-the-real-world-designing-for-transfer-of-learning). This is the moment you take a concept you learned in one context and apply it to the next problem. It’s really, really hard to do.

Most people experienced this in grade school in math class. You memorized basic arithmetic all day long. You knew those times tables! But then… there were word problems. Word problems required you to read a few sentences, identify the problem that needed to be solved, identify the math to solve it, and calculate the answer. Most students did fine with basic arithmetic and failed miserably with word problems.

Professional software engineers are very good at transference. Instructors are really good at it too. However, the majority of students need help in making the leap from one context to the other.

[There are techniques that assist with transference] (https://learnnocode.dev/2020/12/27/the-fundamental-formula.html). Starting with a detailed explanation and ending with “try it yourself” are not fundamentally bad ideas. However, there’s much more in-between that needs to happen for an effective outcome for most learners.

[Software is Scholarship] (https://law.mit.edu/pub/softwareisscholarship/release/1)

By transforming the way that knowledge is discovered and shared, software has the ability to revolutionize the way scholars communicate their ideas. This article explains how software applications enable the highest forms of scholarship and applies those lessons to law.

Interactive software applications can enhance research agendas in the humanities and social sciences by making traditional, prose scholarship more thorough, persuasive, and analytically precise. Due to recent innovations, developing software for scholarly purposes is accessible to those that work in the humanities. Platforms for developing software have grown so sophisticated that they no longer require creators to write code to develop powerful, data rich, and well-designed interactive applications.

Houman B. Shadab

Dr. Shadab, a law professor, is using Bubble.io to create his applications for scholarly research and communicating results. This is very far ahead of academia, and it’s a pleasure to see this happening.

A capstone project should be balanced like the quintessential American meal: meaty main course, starchy side dish, vegetable side dish, and dessert.

A good capstone project is constructed in a similar way. Let’s take the case of a website as a capstone project:

• Meaty main course: The main focus of the capstone. It’s the website, the vehicle where all of the component parts are assembled. Usually students are focused on website coding and construction in this phase. In the case of a website, there’s many areas of focus here. Students may be working with a CMS plus custom theming, coding and integrating a CMS plugin, creating a single page web application, or building a browser extension.

• Starchy side dish: This is where the student might have a complimentary secondary interest. In the case of a website, this might be a user experience (UX) focus; website planning, card sorts, flow charts, wireframing, and user testing are some of my favorites to discuss with students. If the student has a programming focus, this might include website performance improvements, server configuration issues, database design, and so forth.

• Vegetable side dish: This is the deliverable area that feels like real work to the student, but it’s an area where they should grow. For programmers, it might be graphic or interface design. For graphic designers, it might be light programming. Writing quality content and storytelling is always a good addition for any type of web design student. Some of these deliverables may feel like a bit of a stretch to the student. A little stretch means growth. (Too much stretch leads to breakage, though, so watch for this as well.)

• Dessert: There should always be a fun component to capstone, to keep students engaged, interested, and enjoying the process. These deliverables may be weighted minimally. They may also be outside of the main focus of the capstone. In the web design project, this might be some photography for the site, a social media promotion plan, or a short (1 minute) video clip or animation. Programmers sometimes want to try a new library or framework that they’ve wanted to explore but have never had the time.

Combined with [students choosing a good project ] (https://learnnocode.dev/2021/02/06/teaching-reflections-identifying.html), this balance of deliverables should keep students engaged through the term.

Capstone projects are all unique. Harvard’s digital media capstone projects are all over the map: films, courses, websites, UX projects, and combinations of these.

It is impossible to structure grading for a capstone project for this reason. However, structured grading is most vital for this course among all others.

In every other university course, grading happens during the term in some way through periodic assignments. Even in courses with a heavy assignment at end of the course, students still have some concept of how they’re doing as they complete their final work.

However, a capstone should be evaluated as a complete work, rather than evaluated piecemeal through the term. While students should get feedback along the way, they shouldn’t receive a hard grade until the end. They should have the opportunity to refine all deliverables and aspects of the project in light of whatever they’re currently creating. The point of capstone is to bring together multiple aspects of the degree program and synthesize learning over the curriculum. Grading, therefore, needs to be at the end and encompass the full project.

This clearly leads to potential issues. What happens when the student thinks they’ve done A work, but the instructor thinks it’s a C-? What happens when the student’s project isn’t “weighty” enough for a capstone? These potential surprises (risks!) must be mitigated in some way.

As I’ve mentioned in a previous post, students don’t understand mitigating risk going into capstone, nor do they understand how to scope a project. We also have an issue of how to grade a unique project.

Fortunately, a student-written grading rubric solves all of these issues.

I review their rubric and make sure the bar isn’t set low or that they’re working on trivial things. But have faith in these adult students. They chose to go to grad school with a reason in mind. Most want to do well on their project, but they also want to learn something new and be proud of their work. With guidance, they write a challenging rubric that stretches them, but not too far so it’s still achievable within the semester timeline.

Let’s go through all of the learning that happens when students write their own grading rubrics.

Rubrics identify deliverables and completion timelines

It’s one thing to say “I’m creating a 15-minute documentary on X topic.” It’s another to spell out exactly what it takes to create that: storyboarding, running the interviews, choosing the B-roll and music, editing it together.

Larger deliverables may be broken down further. For example, an interview segment might be graded according to lighting, camera angle and focus, sound quality, color correction, how it furthers the story, and consistency of these characteristics across interview segments.

Most students also put together a timeline for their work along with this list. I encourage them to create milestones, so they can quickly measure if they’re on track, behind, or ahead of schedule.

When students write down all of the elements and stages they must complete to create their project, and particularly once they schedule these over the semester, they start to get a sense of scope. They realize whether they’ve committed to too much work and need to scale it.

Rubrics determine how work should be weighted and graded

Once students have completed their list of deliverables, the next question is how to grade each deliverable.

There are two parts to this question. First, how do we evaluate each deliverable? Second, not all deliverables are created equal, so where should we place grading emphasis, and what should be minimized?

Grading

My students and I have conversations about how to communicate grading so that we’re both on the same page. How do you define good quality in a rubric so it’s clear enough to hang your grade on it?

Still, my favorite rubric item shows up over and over, year after year: “The website will be simple and easy to use."

A noble goal! But how do we measure that? What is simple and easy for you may not be for me. This is usually where I ask the student if they will do user testing to ensure the site is simple and easy to use. And if the testers show that it’s not, what will they do then? (Usually this is sufficent to convince them to refine this criterion in some way to reflect the intent, but in a more measurable way.)

Students struggle with quality metrics in rubrics, but in the end, it’s a good exercise. It’s part of learning clear communication. It’s also useful for the end of the course, when they’re running out of time and they’re paralyzed by whether something is “good enough.” Since they made the decision of how to measure their work up front, allocating their time is an easier decision.

Weighting

Some deliverables are more important than others. Some should be completed at a different level than others.

If a student is creating a documentary as their main focus, and they want to also complete a website for that documentary, I think that’s great. But the website is a minor deliverable. It might be built with Squarespace or other no-code technology.

If a student is creating a website as their main focus, however, it’s not going to be built in Squarespace, and it will involve some level of coding.

Within a deliverable, elements may be weighted differently as well. With websites, for example, some students want to emphasize graphic design, or page performance, or writing some type of code, or usability. All of these are important to the site, but not all need to be emphasized in the capstone project with a limited timeline. An ugly website with innovative coding may be as legitimate a project as a website with breathtaking graphics and photos and less coding.

Students should have some say in what they consider important (and presumably where they want to spend their time), vs. what they consider less important. I ask students to reflect on their learning goals for this project, in addition to the amount of time required for each deliverable. Those that take more time might be worth more points. There may be some “stretch deliverables” that the student isn’t confident they can reach, but they don’t want to jeopardize their grade or graduation. These might be weighted less to help mitigate risk.

Likewise, when students identify trivial deliverables (“navigation will work on all pages of the website”), I gently point out if they have not mastered navigation bars prior to enrolling in capstone, they are not qualified to build a website as a capstone project.

Rubrics for time management

In the last 4 weeks of the semester, as the students are in their final grind to complete their projects, inevitably some level of panic sets in. Some deliverables took longer than expected. Work was demanding. Home life is demanding, particularly in pandemic times. Life happened along the way.

I remember when one student discovered a new technique for coding his project in these final weeks. He asked if he needed to refactor his project to use the technique. I asked what was on his rubric. Since neither the technique nor refactoring was listed as a deliverable, he understood he should keep going with what he had. Refactoring could be done after capstone.

Other students are short on time but long on deliverables towards the end. I advise working on deliverables with heavier weighting. They can also decide what’s faster and easier to complete and concentrate efforts there.

Rubrics for organizing deliverables

“Here’s my film!” Great! Now what?

I have students use their rubric as an organization tool for their deliverables. Where should I look for proof of excellence in each criterion?

Not all deliverables are contained within the main project (film, website, course). For example, a storyboard is critical to the film, but it’s a separate deliverable from the film. Many website and course deliverables also follow this pattern.

Rather than being forced to hunt for All The Things, students choose where I look. Time stamps, website addresses, lines of code, Word documents, and more form the basis of deliverables.

Rubrics for reflection

Finally, students fill out their own grading rubric as part of the reflection process. (I also ask them to write a final blog post reflecting on what went well and what they’d do differently next time.)

When students grade themselves, they are required to compare their work with the measurements they set. Did they achieve these metrics? Why or why not?

In most instances, students gave themselves lower marks than I did, sometimes dramatically so. The rest of the time, I agreed with their assessment. I can only think of one instance where my grade was lower than the student’s.

Many students start this grading and reflection exercise with an eye roll, believing it’s the final busy-work hurdle to graduation. But I don’t give busy work. By the time they’re done, they usually comment on how useful the reflection process was.

Whew, that’s a lot for one grading rubric. If you wind up with capstone students, I strongly recommend trying it with your next cohort.

Master’s degree programs generally have one of two endings. Either students write a thesis, or they complete a capstone project. Where students want to further job prospects in technology, rather than an academic or research-based career, a capstone is a much better choice. Students get to complete a large, meaty project that brings together many aspects of the degree program.

Capstone is also a good time to teach how to choose a great project.

The timeline for capstone is usually 7-9 months and is generally completed in three phases.

• In Phase 1, students are asked to identify a project they’d like to work on. This is typically an informal exploration, plus discussions with capstone instructors and advisors.

• In Phase 2, they write a capstone proposal. This is often a semester-long process, and it may be combined with Phase 1.

• In Phase 3, they implement their capstone proposal, usually over a semester.

Each of these should be a post, so here I’ll start with Phase 1, identifying a project.

When I did my own capstone project in grad school, I already had a vision of what I wanted to accomplish. I was in grad school to train to become a web designer. (It was 2000. Different times.) I wanted a project that paid me to do the work. I wanted a well-known name brand to work with, ideally, rather than a small local business. I wanted to build the website from nothing – I wanted the experience of gathering requirements and goals, creating site maps from a card sort, doing the graphic design, and coding the whole thing inside of Dreamweaver (as one did in those days). I wound up doing a website for Massachusetts 4-H, which was housed at UMass Extension. This project lead to many others through UMass over the years.

Naturally, I thought other students would have the same experience. Not true!

I found that students were unable to think about the capstone project beyond “what can I do to get an A, graduate, and move on.” I started asking the students these following questions to help structure their thinking.

• Why did you go to grad school in the first place?

• What kind of job do you want when you graduate?

• What is missing between that job you want and what you’ve learned here? What did you want to learn more about? What skills do you want to demonstrate?

• Is there life for this project beyond capstone? It’s a lot of work, so if we can use capstone to launch a business, get a job, or some other way launch your future life, this is worth exploring.

• What would hold your interest for 7-9 months of intense work?

Through the years, I’ve realized this type of structured thinking is missing in many aspects of student work. It’s lead me to incorporate more structure in assignments to better guide students to what I’m looking for in projects. Thus my famous “turn-in sheet” was born. And that is another topic for another post.

After 20 years of teaching in academia, I’ve coached many capstone projects.

Part of the capstone process is examining risk and mitigating it. Students have very little ability to do this, even after completing courses and assignments for a full degree program. This is because in a regular course, the instructor assigns all materials to consume and study and provides assignment(s) that have deadlines. Students manage time and scope based on work that’s already defined these parameters for them.

That means that when a student is creating a project of their own, they do not understand how to properly scope their work within the time parameters.

They also don’t understand risk. In a standard university course, risk during the semester usually looks like this for adult students with jobs and lives:

• High probability, low impact: Work or kids get demanding during a portion of the course. Work ahead, talk to the instructor, and usually you get through this without significant damage to the grade.

• Low probability, low impact: Not completing a weekly requirement: not attending class, not completing a weekly quiz, not posting a discussion post. This could be simply forgetting something, or it could be a conflict with other parts of life meant that the work just didn’t get done.

• Low probability, high impact: Death in the family, severe illness of the student or in the student’s family, childbirth during the term. Universities have methods of working around these issues via course incompletes. Students should always talk to instructors to get help when these issues happen.

• High probability, high impact: There are certain students who are consistently bad at managing time and always seem to have some drama going on. If you talk to other instructors who had this student previously, you’ll discover the pattern across all courses. However, these students are rare in adult learning programs.

In other words, while students are always concerned about getting a lower grade than they think is reasonable for their work, talking to the instructor consistently and being engaged in the course is generally enough to get through it.

For a capstone project, they are concerned about failing the project and jeopardizing graduation. Low probability, high impact. However, when the student controls most of the project, as is true for most parameters of capstone, the probability is higher here than it is for other courses. Students don’t understand how to scope their work – a topic for another post – and can easily sign up for too much to complete within the allotted time. This is the biggest reason that capstones would not be completed.

How to mitigate this risk? Focus on what’s needed for the project to get to graduation.

Consider the metaphor of visiting an all-you-can-eat buffet the first time. It’s amazing! There’s so much food! You can eat whatever you want and they bring more! But pretty soon you’ve tried a few things, and you’re getting full. You didn’t get to dessert yet because you ate too many dinner rolls.

Students in a healthy relationship with their capstone project have similar issues. They want to do ALL THE THINGS and make an amazing project. They identify more things along the way that they want to do. All the while, the clock is counting down. While the student may believe all of the things are required to make a good project for a portfolio, it’s unlikely that they’re all required to complete capstone satisfactorily and graduate.

(Students in an unhealthy relationship with their capstone project do the absolute minimum. It’s rare, but it does happen occasionally. Usually this is affected by outside forces – illness, death, other life issues. The student may also have chosen a poor project that isn’t engaging for them. That’s for another post.)

As an instructor, you must teach them about the low probability, high impact problem of not doing the right things for graduation. Graduation is always goal #1. Everything else is Phase 2.

One of the ways I’ve kept students on track to completing their capstones is through a grading rubric. This is also suited to another post, but briefly, a rubric identifies what they will do, how important that work is, and how it should be graded. It’s a contract of sorts.

Future posts:

• The power of the student-written grading rubric in capstone

• Scoping capstone projects and keeping students in scope

• Helping students choose engaging capstone projects

Mistakes happen. I’ve certainly made my share.

However, instructors FREAK OUT when they make mistakes when teaching. They mistype something, misconfigure some setting, make syntax errors, and so forth.

Then they edit the video, completely concerned that they look stupid.

Through the years, my students taught me that my mistakes were a powerful moment for them.

First: OMG the instructor makes that SAME MISTAKE that I do all the time! Wow!!! (There’s power in seeing yourself in a role model.)

Second: When I make a mistake, I don’t FREAK OUT. I look at the problem and try to figure it out. I ask the class what I did wrong. I model how to debug an error. This is important. Students are going to make errors too. Do they know how to debug?

Finally: Even when I’m on video and I make a mistake, I don’t edit out the problem in my own videos. (For commercial video, this is another matter, of course.) Again, students should know that errors happen to everyone and tracking down the problem is part of programming.

Indeed, that’s the biggest takeaway: Everyone makes mistakes, so why can’t you? It’s part of programming and learning.

Next time you’re afraid to share your ideas, remember someone once said in a meeting, “Let’s make a film with a tornado full of sharks."

Students are always afraid to think creatively about their work. In academia, they’re worried about their grade, which drives much of this fear.

However, taking risks is where student learning is greatest. Trying something and having it fail is one of the greatest experiences for a student, when handled correctly.

This is why reflection is so important for students.

At first, it feels like busy work. Why do I need to reflect on the work I did? I know what went right or wrong. I know what to do next time.

However, when they must organize those thoughts into a coherent paper, video, or presentation, they learn much more about what happened.

It’s not just the project failed. Now it failed because I did X, so Y happened, and Z was the outcome. Next time, I’ll do A because B. I expect that to help because C.

Look at all of the “because” in that paragraph. Because is the hard part. It’s easy to say something didn’t work. It’s really hard to articulate why and how to avoid that outcome in the future.

I’ve taught for 20 years in academia.

I’ve been a teaching assistant, an adjunct instructor, a lecturer with benefits, and a program director.

I’ve taught courses with syllabi developed by others. I’ve developed my own syllabi for courses with objectives and nothing else. I’ve identified and created my own courses from nothing to fit inside of a degree program. I’ve created the entire degree program.

I’ve mentored maybe 200 students over the course of this time through some type of capstone or thesis project. These are the big projects that students create at the end of their degree program that synthesize everything they’ve learned into a portfolio-worthy project. Most of my mentees were graduate students.

Some of those students had a clear vision of what they wanted in life. Others went to grad school to “learn more about computers.”

When it came time for capstone, everything changed. The style of teaching, the expectations of students and instructors, the work, the overwhelm, the self-doubt, and the joy of completion were always part of the journey.

Over the next several posts, I will identify a few common themes that ran through nearly every capston project I advised. We’ll start here, with one of my favorite capstone cartoons. Every student experienced this somewhere along the way.

It’s in Squarespace, Wix, Microblog, WordPress, Drupal, Joomla, Softr, Gumroad, Teachable, Thinkific, and countless others.

It’s usually located under Design, Theme, or Advanced.

It looks like this:

It’s The Box.

Into this box, one pastes CSS.

This implies that the website owner:

• knows enough CSS to know what to do with this box

• can form a CSS selector that “works” (i.e. specific enough to the problem but not overly specific)

• knows enough CSS properties to spell out the styling that they want

• understand the cascade enough to know how to make their style work when it doesn’t

Wow. So why is there so much code in no-code site builders?

True, you don’t have to use the box. But if you use no-code tools long enough, you’ll eventually find something that you’d like to tweak just a little bit relative to what you’re able to customize with the tools.

Where does one go to learn this CSS? The professional courses are all focused on layers of command-line tools, over-powered code editors, and Git repositories. None of these things help with The Box.

Furthermore, the browser’s devtools are pretty inpenetrable to those who don’t know HTML and CSS already.

In the short term, we must teach CSS to navigate The Box. (And let’s face it, many of today’s “full stack” coders aren’t able to navigate it, either.)

In the long term, we need to improve our interfaces in some way so The Box isn’t needed.

This is a big problem to solve that no one is talking about.

I keep waiting for the day when higher ed discovers [The Long Tail] (https://www.wired.com/2004/10/tail/).

Twenty years ago, if you wanted a master’s degree, you went to whatever university was nearby. You paid in-state tuition, if applicable. You kept your job and went to school in person at night.

Today, if you want a master’s degree, you have many more choices for degrees. Many offer a 100% online option, or “zero residency.” Some have low residency – part of a class in person, or a whole class in person in a compressed timeline. The idea is that you do your residency while taking a vacation from your job, if needed. But pretty much you can go to any school you want, on any timeline you want (full time or part time) and get the degree you want.

What is the difference between a MSCS at UMass, UVA, UMN, or UCLA? Why would I pick one school over the other?

You can say it’s all about the faculty, the location, the school’s reputation, the specific courses. These elements certainly drive many choices.

But truthfully, it comes down to price. It’s a MSCS. Everyone offers one of these. They aren’t all that different. To attract students, you have to drop your price. This leads to a spiral to the bottom.

Instead, universities could be offering The Ultimate Degree In This Obscure Subject. Who offers the ultimate Digital Storytelling degree? The Web Development degree?

The usual objection has to do with faculty. But since we’re teaching under a majority-adjunct faculty model already, is this really an objection?

[Donald Miller of Storybrand: How to Strategically Lay Out an Effective Home Page] (https://buildingastorybrand.com/lay-out-an-effective-home-page/)

Great advice on how to lay out a home page, but so many people get hung up on the design details.

In about 30 minutes, I built out a template based on his description in his article: [https://storybrand.softr.io/] (https://storybrand.softr.io/)

And it’s a breeze to jump in and make changes with Softr, even if you don’t know the software.

This is an example of transferrance, one of the largest challenges in teaching technology. Miller wrote an amazing article with text descriptions of what the website should include. Softr has a great tool that reflects all of those descriptions. But putting these two things together is a bit more difficult for many people. By providing an example like this, the concepts become more tangible to learners.

Folk music seems to rotate in recent history.

It was a big thing in the 60s, of course. The singer/songwriter with acoustic guitar singing protest songs was everywhere – Bob Dylan, Joan Baez, Jonie Mitchell, Pete Seegar, Simon and Garfunkel, Peter Paul and Mary.

It made a comeback in the 90s in the form of the Indigo Girls, Tracy Chapman, Suzanne Vega, Alison Krauss, Emmylou Harris, Michelle Shocked, and Christine Lavin. Notice these are all women - there weren’t many men doing this.

We got a little bit in the 2010s with Nickel Creek, Chris Thile, and Heather Nova.

Why not sea shanties as a foundation going into the 2020s?

PPS

My friend and colleague [Mary Malloy] (https://www.marymalloy.net) was on [NPR talking about sea shanties] (https://www.npr.org/2021/01/16/957593535/why-sea-shanties-have-taken-over-tiktok). She knows way, way more than I do about this part of history. Go listen. She’s terrific.

As a longtime musician, I’ve been fascinated watching sea shanties take over the internet this past week.

Playing or singing music with others is always a great joy. It is one of the hardest parts of this pandemic, missing my fellow musicians for weekly practice.

This music taking over TikTok at this moment in time has several interesting threads.

a. Sea shanties aren’t difficult to sing. They have pleasant, simple melodies. They’re easily harmonized.

b. Thre are fantastic stories behind the songs. Some compare isolation on board ships with isolation in pandemic times. These stories are also very different than the usual run-of-the-mill pop song lyrics (seriously, how much can we sing about love and loss anyway?).

c. No music training or instruments are required to participate. (Although in the latest versions, we have instruments added, including a beat track!)

d. And this is critical – TikTok made it happen, because they allow EASY layering of your video on top of others. No Garage Band, no special software, just a free app with amazing usability.

Now someone with no music training and few technical skills can join in the fun, creating something bigger than themselves with people they don’t know in a time of isolation. What could possibly be more appropriate to this moment in history?

[Why not bring back spacer GIFs?] (https://www.joshwcomeau.com/react/modern-spacer-gif/)

Josh advocates for a new separation of concerns, based on compartmentalized technologies (buttons, lists, etc) as opposed to HTML, CSS, JavaScript.

Amusingly, the problem he describes would be fixed with some simple CSS, an understanding of the cascade and inheritance, and an hour or so figuring out how margins really work.

Just like Josh doesn’t understand CSS, not everyone understands JavaScript. It takes a lot of learning to get good at JavaScript. And shockingly, the same is true for CSS.

If you want to have CSS experts who can fix your problems, you can’t put the CSS in your JavaScript.

That’s why there’s separation of concerns, old-school style: HTML, CSS, JavaScript.

That’s why Josh’s proposed separation of concerns, based on components (button, list, media) flat out doesn’t work. This separation of concerns relies on a front-end expert who can keep up with three different and rapidly evolving technologies. It doesn’t allow for expertise in any one area.

Thus, you wind up with a JavaScript expert who doesn’t understand CSS and wonders why no one else (in his sphere) does either.

I am amused that the ultimate solution to Josh’s problem is to go with the old-school separation of concerns and talking to a CSS expert, rather than attempting to bend the web to his will using JavaScript alone.

Two approaches to teaching tech:

a. Teach the button-clicking in the tool

b. Teach problem-solving across tools

You need both to do well.

Obviously A is where the technology product thrives – these are the help files. This is also where lots of YouTube videos and commercial video (like LinkedIn Learning) tends to thrive. Teach me how to use this software, rather than teach me how to solve this problem.

A is also the technology bootcamps. Yes, they might teach JavaScript, but they’re really teaching copy/paste concepts. They are not thinking about big hairy problems and how to attack them.

B is much more difficult because it involves critical thinking, and sometimes your favorite tool isn’t the answer. This is of little interest to software manufacturers, because it’s rare that the software addresses a problem completely. (When it does, sometimes you’ll see this technique used.)

B tends to be where higher ed thrives. Without the economic necessity of talking about specific software packages, higher ed can talk about problems instead: how to think about problems, frameworks for addressing problems, identifying and evaluating potential solutions. Implementing those solutions tends to be assumed that you’ll learn on your own, at least at the graduate level. Some button-clicking courses happen at the undergrad level.

There’s very little B happening in the tech bootcamps. Bootcamps are more concerned that students know how to copy/paste JavaScript and debug. They aren’t concerned that students can think through a problem, identify a solution, and craft JavaScript to address it.

Some careers specialize in A, some in B. But you need both sides of this teaching to do well and to advance in your career.

Button-clicking help files vs. frameworks for thinking about problems that need solving. Transferrance here is difficult. It’s never self-evident.

Button-clicking is behaviorism, while frameworks are more constructivist or cognitivist

The right medium for presented material

Reverse classroom as a model for commercial courses (testing to enforce live segments)

Breaking materials into short chunks, along with practice problems

Encouraging help among students via discussion/comments

Sharing completed work and giving feedback using LBNT

My [JenKramer.org] (https://www.jenkramer.org) website has been embarrassing for years now.

I have finally redesigned it in [Softr] (https://www.softr.io).

Why Softr? I don’t need a site builder for my own websites.

Even though my previous site was built with just HTML, CSS, and PHP includes, it was still annoying to update. Weeding through the code just to find the text I wanted was an extra level of thought that, honestly, wasn’t required.

A redesign was overwhelming to think about. Beyond color schemes, fonts, photos, and content, there are infinite ways to manage the layout.

Softr removes all of those variables so I can focus on exactly what I want to say and how I want to say it.

It’s a dynamic wireframe in real time. I can run this site without worrying about all of the cross-browser testing, design, and technical details I’d normally manage. Here I can focus on the flow of the site, the content presented, and the order of information.

I’ve based this site model on [Donald Miller’s Storybrand wireframe tips] (https://buildingastorybrand.com/lay-out-an-effective-home-page/). I can change the text every day without worrying about having to redesign, or design a new block.

Eventually, if I want, I can code my own site, once it’s thoroughly tested with the public.

I will say that I’ve already received an email from an eager student. The site’s been up for less than 48 hours. That’s a sign of success.

[Imposter Syndrome] (https://www.apa.org/gradpsych/2013/11/fraud) is an extreme form of underconfidence. Your life is one big error! If they found out how little you know, you wouldn’t be where you are now.

I have no training in psychology, but if I had to pick an opposite for Imposter Syndrome, I’d choose [narcissism] (https://www.psychologytoday.com/us/basics/narcissism). You’re the best! You’re amazing! The world should recognize your brilliance!

In the tech world, Imposter Syndrome seems to infect younger women and older men. Younger women believe they know nothing because they just started their careers. Older men started to realize how little they knew when they just started their careers, and they believe they still know nothing now.

It seems to happen to conference speakers and workshop instructors. Why was I picked to teach this topic? What do I know? If I’m not comprehensive in this area, then clearly I know nothing.

But here’s the thing to know: no one has your life experience. You have a unique perspective on a topic and a unique way of presenting it.

The best way to overcome Imposter Syndrome when teaching is to stop thinking about your 4th grade teacher. (S)he was the teacher, a “sage on the stage.” You were the student, expected to absorb. Knowledge transfer went one-way only.

Instead, think of yourself as a coach, leading and guiding the group. You have some ideas that are important. However, you don’t have a lock on the perfect way to teach the topic for everyone. There’s value in having other people explain your material to each other. Some of your students have interesting perspective, ideas, and life connections to bring to your material. It’s all an important part of an excellent class.

How much does Imposter Syndrome affect you? [Take the quiz.] (https://paulineroseclance.com/pdf/IPTestandscoring.pdf)

Design is a load of CRAP:

• Contrast

• Repetition

• Alignment

• Proximity

Following rules = professional-looking designs

Courtesy of Ms. Robin Williams, and HER fantastic book, [“The Non-Designer’s Design Book."] (https://peachpit.com/store/non-designers-design-book-9780133966152)

**CONTRAST: **

• Contrasting colors, not a bunch of muddy neutrals

• Contrasting fonts, not Arial and more Arial

• Contrasting size, not sizes 12 and 14

REPETITION:

• Repeated layouts, not something unique on every page

• Repeated elements, like icons used consistently

• Repeated colors, fonts, sizes

ALIGNMENT:

• Think about straight lines on your web pages, which guide the eye and increase legibility

• On the web, everything looks better LEFT-ALIGNED (see note) and not CENTERED

• CENTERED is for WEDDING INVITATIONS

(note) in left-to-right languages. If you use a right-to-left language, then use right alignment.

PROXIMITY:

• The nearer two elements are on a page, the more likely that they’re related.

• You don’t have to shove elements into corners because they’re empty.

• Separation in space means different ideas. Proximity means related ideas.

The book is full of full-color picture examples illustrating all points.

The tips are simple and easy to follow. It’s straightforward to apply them to your own work. Applying them will take your design to the next level.