1 of 86

A College �Case Study

WordPress Portfolio Creation by

Undergraduate Digital Media Majors

Presented by Rachel Urbanowicz • Keystone College

rachel.urbanowicz@keystone.edu

A College �Case Study

2 of 86

Introduction

“I hate WordPress. I wish I could just fail.”

This is a direct quote from one of my students, who is a lovely person, but just so you know, this is what I was dealing with some of the time, and I will share more of the story with you as I go through my presentation!

Good afternoon! As you know, I’m Rachel Urbanowicz. I teach web design, graphic design, and other courses as part of the communications and digital media programs at Keystone College in Pennsylvania.

Like many of you, I’ve designed a lot of websites in my day.

Unlike many of you, I am not a WordPress expert. I’m an educator in the digital media program at Keystone College, where last semester we decided to incorporate WordPress into my Professional Practices class, and I was basically learning full-site editing at the same time as my students. I have a bit of WordPress experience under my belt, and even taught a class in it six years ago, however as you’re well aware, things have changed.

So let’s talk about the class!

3 of 86

Class: DIGM 3300 �Professional Practices

Class focused on preparing soon-to-be-graduates for the job — and gig — market.
Topics and projects were related to…

Cover letters, résumés, LinkedIn profiles
Tax law, copyright issues, small business ownership
Obtaining internships; mock interviews
and…

4 of 86

Project: Portfolio Websites

…Creating a Portfolio Website!
This was a required project

DIGM 3300 student projects were a combination of required and cherry-picked projects to add up to a certain point value.
The online portfolio point value was high, so it was a significant contributor to the students’ final grades.

Photo by Headway on Unsplash

5 of 86

Context! Project! People!

6 of 86

Context: Keystone College

Around 1800 undergraduates
Est. 1868 in La Plume, Pennsylvania �(near Scranton)

7 of 86

Context: Keystone College

Around 1800 undergraduates
Est. 1868 in LaPlume, Pennsylvania (near Scranton)
Digital Media program

Recently-established program and major
Covers a wide range of digital media topics

Web / Graphic Design
Photography, Videography
Radio, Podcasting

8 of 86

Project: Portfolio Websites

Emphasized WordPress skills in addition to showcasing student work

Specifically, creating this portfolio using full-site editing in WordPress
This coincided with the Web Design II class, which most students were taking concurrently

9 of 86

Project: Basic Requirements

At least 9 portfolio pieces to showcase your work for potential clients and employers

Pieces could include graphic/web/electronic media designs, photos, videos, audio content, and illustrations.

“About me” page or section
Résumé included
Contact Form

10 of 86

How it Went: Overview

Successes

They got ’em done!
Students helped & supported each other
They became more aware of how they wanted to present themselves to the world
Two of the five students kept their sites up. Which brings me to the challenges…

Photo by Jacqueline Munguía on Unsplash

11 of 86

How it Went: Overview

Challenges

FSE was new…to all of us
The value of an online presence seemed to be underestimated by some
A couple of students REALLY struggled
We all encountered some bugs
Our hosting provider’s functionality was problematic….to say the least.

Photo by Hannah Wei on Unsplash

12 of 86

Hosting: “Provider Y”

I selected “Provider Y,” whichI have used previously for domain name sales, because

It’s inexpensive
I had consistently good experiences with them previously

…but had only used them for domain name purchases.

They offer managed WordPress hosting
The students and I all used this and I required them to purchase SSL

13 of 86

Hosting: “Provider Y” Issues

All of us purchased SSL for an additional fee
The process to activate SSL was dumped on the customer, and absurdly complicated!
We are all smart people, we spent extensive time, but most of us gave up, sacrificing site security.
Obviously, this is a huge disadvantage for an active website!

Photo by JESHOOTS.COM on Unsplash

14 of 86

One other big glitch: fonts!

We used the plugin Create Block Theme for its custom font upload functionality, but: it only worked for 50% of the group.

The rest of us, including me, used a CSS workaround.
Why? Possible incompatibility with Provider Y?

15 of 86

Basic Process

Basic WP knowledge a prerequisite.
Students all had taken, or were currently also taking, Web Design II.
Started with Moodboards for inspiration.
Collected assets/artifacts (portfolio pieces)
Site design & development

In-class review of full site draft, week 13
Final sites due at end of last class — week 15

16 of 86

Now that you know the main successes & challenges…

Let’s dive into the student experiences.

Photos are stock due to student privacy concerns.

17 of 86

…let’s dive into the � student experiences!

Photos are of stock models, due to student privacy concerns.�Resemblances are vague!

“Liz”

“Kelly”

“Andrea”

“Jake”

“Quin”

18 of 86

Student Profile: Liz

“Liz of all trades” — is passionate about many aspects of digital media: design, video, and podcasts especially.

“Liz”

19 of 86

Student Work: Liz

Liz was the only person in the class who successfully implemented SSL on her website!
This was a frustrating process...

Directly quoting Liz:

20 of 86

Student Work: Liz

Liz was the only person in the class who successfully implemented SSL on her website!
Her site is still up
Used CSS workaround for fonts with the �plugin WPCode Lite

Plugin used:

WPCode

21 of 86

Liz: Site Screenshots & Discussion

Earlier work

22 of 86

Liz: Site Screenshots & Discussion

Final Home page

23 of 86

Liz: Site Screenshots & Discussion

24 of 86

Liz: Home/Portfolio

scrolling

w/sticky header

25 of 86

Liz: Home/Portfolio

Plugin used:

Gallery Block�(Meow Gallery)

scrolling

w/sticky header

26 of 86

Liz: Home/Portfolio

Plugin used:

Gallery Block�(Meow Gallery)

scrolling

w/sticky header

27 of 86

Liz: Home/Portfolio

Plugin used:

scrolling

w/sticky header

28 of 86

Liz: Home/Portfolio

scrolling

w/sticky header

29 of 86

Liz: Home/Portfolio

scrolling

w/sticky header

30 of 86

Liz: “About” page (with stock model)

31 of 86

Liz: “About” page

scrolling

w/sticky header

32 of 86

Liz: “Resume” page

Plugin used:

33 of 86

Liz: “Contact” page

INITIAL Plugin used: WPForms Lite. Final plugin: Contact Form Block, by Jordy Meow.�Message send functionality was problematic w/WPForms Lite. �Messages arrived with no content.

FINAL�Plugin used:

Contact Form�Block

34 of 86

Feedback from Liz

“I think that the website will be easier to share with potential employers as opposed to my digital or print portfolio.”

35 of 86

Student Profile: Andrea

Interested in sports photography, social media, graphic design, and illustration
Distinct illustration style

“Andrea”

36 of 86

Student Profile: Andrea

“It made me see my skill range and what I am more confident in... “
Struggled due to a year away from WP
“I think I am most proud of my header drawing ...”

“Andrea”

37 of 86

Andrea: Moodboard Sample

38 of 86

Andrea: Home/Portfolio start

39 of 86

Andrea: Home/Portfolio final

40 of 86

Andrea: Home/Portfolio final

Plugin used:

Visual Portfolio

41 of 86

Andrea: Home/Portfolio

Visual Portfolio thumbnails display cropped views. The larger view shows each image in its original aspect ratio.

scrolling!

42 of 86

Andrea: Home/Portfolio

scrolling!

43 of 86

Andrea: Home/Portfolio

scrolling!

44 of 86

Andrea: Resume/Contact

Plugin used:

EmbedPress PDF

45 of 86

Student Profile: Kelly

Non-traditional student
Double major in Digital Media and Visual Arts
Struggled with WP
“I wish we had this class more than once a week…”

“Kelly”

46 of 86

Kelly: Homepage/About

47 of 86

Kelly: Portfolio Gallery

Plugin used:

Visual Portfolio

scrolling!

48 of 86

Kelly: Portfolio Gallery

scrolling!

49 of 86

Kelly: Resume

50 of 86

Kelly: Contact

Plugin used:

Contact Form�Block

51 of 86

Kelly: Feedback

52 of 86

Kelly: Feedback

Photo by Andrea Piacquadio from Pexels

53 of 86

Student Profile: Quin

Interested in photography primarily; also, social media management.
Picked up WP & FSE quickly

But has no desire, whatsoever, to become a web developer!

“Quin”

54 of 86

Early on: �about that wording…

55 of 86

Quick notes….

Fonts working, yay!

56 of 86

Quick notes….

Security, not so much!

Which can lead to…

57 of 86

Quick notes….

…this!

…this happened to ALL websites except for Liz’s. It would come and go.

I wonder if it has to do with Liz’s successful SSL.

58 of 86

Quin: Final Product: home page

Actual page did not have blurs, of course.

59 of 86

Quin: Gallery

scrolling!

60 of 86

Quin: Gallery

scrolling!

61 of 86

Quin: Gallery ~ Filtered

62 of 86

Quin: Résumé

Plugin used:

EmbedPress PDF

63 of 86

Quin: About & Contact

64 of 86

Student Profile: Jake

Interested in design, video production, music, photography
Does independent projects/gigs/freelance along with a strong academic work ethic

“Jake”

65 of 86

Student Profile: Jake

Interested in design, video production, music, photography
Has several such projects/gigs/freelance things going in add’n to a strong academic work ethic
Doesn’t look like this guy 🡪

“Jake”

Detail of photo by Zachary Nelson on Unsplash

66 of 86

Jake: Home/Portfolio

Earlier version, very similar to final

Instead of a plugin, Jake used a pre-built gallery pattern from the WordPress.org Block Pattern Directory.

He preferred this after trying numerous gallery plugins.

scrolling!

67 of 86