Website Magic at the DMC

By Albert Huang

If you wanted to publish a professional website, one as slick as those born from corporate PR departments, the Johns Hopkins Digital Media Center (DMC) can teach you the whole nine yards. It’s true, I saw part of the process live myself. This past Wednesday, October 7th, was one of the DMC’s recurring workshops, “Code-Free Web Design,” taught by the DMC’s very own resident PR head and design aficionado Graham Coreil-Allen.

It took place in the evening, amidst the sleek trappings of the DMC’s projection room in Offit Suite 226. It was part tech store and modern office space, with its ergonomic lean-back chairs, tabletops decked in high-def glossy iMac screens, complete with a descending projection screen and fluorescent lighting. A fitting place, it would seem, to learn about the workshop’s technical-sounding, yet ambitious title, “Code-Free Web Design.”

It is all too common for coding and web design to provoke at least a smidge of unease from those who don’t believe they are technically and artistically inclined.

It was 5:50 pm and Mr. Graham Coreil-Allen was in the projection room preparing for the workshop.

In front of the high-def projector were stacks of neat print outs, including copies of a cheatsheet filled with helpful terms, links, simple schematics, and basic HTML and CSS code examples. Wait, hold one moment…code? Was this the wrong workshop?

Coreil-Allen explained the thought process behind including code in a basic workshop.

“I would recommend in general, if you’re interested in web design, you eventually learn some HTML or CSS formally if you don’t have that background,” he said. “That being said, you don’t need to know it to do what we’re going to do today, which is, of course, code-free web. And even this is really great value. It’s getting easier and easier as the years go on.”

That made sense, but there was a major hurdle for Coreil-Allen.

Analysis by estimates that 45% of the planet’s population is now on the internet. Despite this, it is all too common for coding and web design to provoke at least a smidge of unease from those who don’t believe they are technically and artistically inclined.

Any average Joe with a finger can toggle settings, customize web presets, and draft content at the touch of a button

Any quick online search into how a website works brings up a bewildering torrent of abbreviations. And for many of us, attempting to produce a nice-looking layout, not to mention actual graphics, can be an frustrating proposition.

How was Coreil-Allen going to make people competent web designers within 2 hours without teaching a single line of code?

“Focus on WordPress,” Coreil-Allen said.

WordPress is a content management system, which in simpler terms means a piece of software that runs websites. It hides the code underneath a user-friendly interface, where any average Joe with a finger can toggle settings, customize prefabbed website appearances, and draft content at the touch of a button.

If you were to crack open a sophisticated website like Google (just find the “Inspect Source” button in many a browser), there would be dragons lying within its pages. You are greeted by a ferocious mix of HTML tags, CSS style rules, JavaScript code, and a possible horde of other technical creatures. Each species hunts different prey, from the HTML which stalk out meaning and structure, the CSS which consumes color and layout, and the JavaScript lurking in the darkness for the user’s cursor or form input.

Systems like WordPress generate all this code behind-the-scenes, deferring more important aspects of the website such as design and content to the carefree user. It can also be extended with plugins to add additional widgets or functions to one’s site. With the 41,000 plugins and counting, this allows for almost infinite configurability. Did I mention this all was essentially free?

Around 6:00, the four workshop attendees arrived, and Coreil-Allen began to get rev up. He introduced himself.

“I’m one of the pro staffers here at the DMC. I am a public artist… My background is in sculpture and architecture, and over the years as I’ve kind of progressed in developing different kinds of public art projects,” he said.

But how did he get started in web?

“I built my first website back in 2002,” Coreil-Allen explained. “I just kind of stole some code and hacked it up, without really knowing HTML or CSS.”

Adding on this, he elaborated on his own humble beginning learning web design.

“The funny thing is, I have no formal training in graphic design or coding or web for that matter. I just learned it all,” he said. “Every time I had a project, I wanted something new, I kind of forced myself to learn new programs over the years.”

It appears that after learning tools like WordPress the long way, he was here to shepherd the uninitiated, using his own varied experiences in design to fast-track the path to basic mastery. It was time to learn the Internet, WordPress, and whatever may fall between.

In the next two hours, Coreil-Allen showed us, step-by-step, how to build a live website with custom fonts, social media integration, and a blog. He got the ball rolling by hitting the basics of what makes a website work with just a schematic and couple pithy explanations, moving swiftly on to how to buy a domain name, and then how to host it. It was then all about WordPress, and for the rest of this extended tutorial, he showed us the ins-and-outs, helpful online tools, a little of easy code for the road, and much more.

Afterwards, one of the participants, Alumnus Adante Hart, shared his thoughts on his intentions coming in to this workshop.

He described his passion for cooking, healthy eating, and volunteering in the community. His longstanding desire was to find a way with which to incorporate all these facets into his future career, and a part of that is translating nutrition science to the public through practical recipes. For that, he wanted to start a blog to get the word out.

“I want to know how to run a food blog. So, I keep telling myself, I’m going to learn how to code and everything… I saw this course, and said, ‘I’ll take this course and get the skills to start.'”

Another participant and regular workshop attendee, Sami Ayele, explained he was currently employed at a job that paid him to learn these skills at the DMC. He went on to describe his view of the value of web development and design.

“Though I’m not a web designer or studying web design, I find sharing information to be essential. Web design becomes a medium of that distribution, especially in the face of large distances between people and ideas,” he said. “Refining design makes the job easier – attracting the masses, expresses imagination.”

Ayele’s view and Hart’s passion indicate websites are very much an enabler of ideas.

This view is captured by the web standards

This ties well into a set of three standards of web practice the nonprofit Mozilla Foundation published on its website. It lists that each active denizen of the Internet should not only be able to “explore” the web and “connect” with each another using it, people ought to learn to “build” their own content for dissemination.

Given the ubiquity of web consumption these days, to succeed as a content producer just might allow you stand out, and give life to new or unheard ideas. With the DMC, you can get started easily. Not only can you learn practical tips straight from the mouth of those who’ve produced projects using these technologies, these underserved workshops allows you to build the framework you may have been longing to learn, whether it’s about the color wheel or (even) code.

Check out the DMC’s semester workshop listings, or contact one of these experts directly. It’s almost as easy as clicking “Inspect Source”.