Starting from Zero with Web Design

ICodecademyCode2‘ve always been interested in web design, though I didn’t know what to call it. I built my first website in the proverbial dark ages of Internet temporality. Spatially, it was located in some long-forgotten Geocity. There were probably twinkling stars. A midi-file of Richard Marx  undoubtedly  played in the background. Over the years I’ve experimented with customizing blogs, but my attention was diverted by jobs and grad schools, when all the while, technology was advancing exponentially. Worse still, I was nearing the end of my PhD and realizing for the first time that the humanities had emerged into the digital age. Too much had changed to just pick up where I left off, and I found myself starting all over again at zero.

If you feel like you’re always playing catch up but don’t know where to start, you’re definitely not alone. Here are a few tips and tricks I picked up over the past year.

Where to Start

Web Design

Start with web design. Most websites are written in a combination of HTML and CSS.  HTML stands for “Hyper Text Markup Language,” and it’s the basic language of the Internet. On its own, an HTML site would look pretty boring without lines of code that say “Use this font for the headings” or “Use this image as the background.” But if you write that over and over and over again in your HTML, it gets messy and cluttered, i.e. bad code. That’s where CSS (Cascading Style Sheet) comes in.

CSS is a separate page of code that tells your HTML, “For all headings, use this size font; for all paragraphs, use this color font.” CSS is more efficient because nobody has just one webpage. You may have one website, yes, but each site is made up of many different pages, such as “About,” “Blog,” and “CV.” If , for instance, you decide you don’t like that font or color after all, you would have to go into every single page to make changes. That’s where CSS comes in. You can factor all of that style out of your HTML pages into a CSS page. Then, for any changes you make on the style sheet, it “cascades” down through all of your HTML pages. All the pages are changed at once, and your page looks uniform and more professional.

Where to Learn HTML and CSS

Codecademy BadgeCodecademy is a great place to start; it’s a free website full of tutorials to teach yourself code. You’re given a three-panel environment, including an instructions panel, a text editor to write your code, and a “browser” window that instantly reflects your changes.  Each course at Codecademy is divided into sections and structured like a game. You get points for every exercise, and at the end of every section, you collect a badge that says “HTML Basics III” or “200 Exercises.” The website tracks your progress through each course, so you can compete against your best daily high score, and always start exactly where you left off.

Codecademy gives you a lot of course options–HTML, Python, Ruby, etc–and you’ll probably want to dive right into all of them, but be patient. Start with HTML/CSS, then when you’re done with that, use Codecademy’s recently released “Build Your Own Professional Website” tutorial to practice all your new mad skillz. (Yes, you will be saying exactly that when you brag to your friends.) This tutorial also teaches you about Bootstrap, an opensource framework for building websites. You can download Bootstrap for free and use professionally built CSS pages.

Since From Zeros and Ones, and the entire DH Working Group, is about admitting what we don’t know, learning from each other, and sharing our progress along the way, here’s the first rough prototype of my website that I built after finishing Codecademy’s tutorial. (You can also visit the current version of my website here: loribrister.com, now, sadly, without Richard Marx midi files.)

If you’ve finished up with Codecademy and want to move on to more advanced HTML and CSS, W3Schools has excellent in-depth tutorials for pretty much everything from formatting CSS to a useful tool for finding colors using hexadecimal values–the 6-character code browsers use to display millions of colors.

You can also learn a lot just by asking for help. Dr. Daniel DeWispelare, of the GWU English Department, led two workshops for our DH Working Group, covering an enormous amount of HTML, CSS, PHP, and SQL. Ask your friends, colleagues, and professors. You’re sure to find someone who enjoys building sites (or working with other coding languages) and will be happy to help.

Questions about Building Your Own Site

What do I need to get started?

You’ll need a text-editor for writing out your HTML/CSS. Technically, you can do that on Windows Wordpad, but you’re just asking for headaches. Text editors like Komodo (free!) work best because they use “syntax highlighting,” where, for instance, your tags  (<header></header>) may appear purple if you’ve written them correctly, but turn orange if there are any errors in your code’s syntax. Just like saving any other file on your computer, you can add an extension like .html and .css. The homepage of any website is always saved “Index.html”. You will also need an FTP (File Transfer Protocol) program for transferring your HTML and CSS files from your computer to your server. I use Filezilla, which is also free.

What’s a server and do I really need one? 

A server is another computer (albeit a much more powerful one) where websites are stored. You can build a website on your own computer, but nobody else can see it, and you probably want to show off your new skills. When you put your website on a server, it’s accessible to anyone with an internet connection.

Server space usually costs money, but there are free options out there for playing around with webdesign, anything from the simple changes to building complex websites. Blogspot still lets you edit your own HTML files, whereas WordPress charges a fee to access your HTML and CSS files. Many schools and universities offer free server space to students and faculty through the IT department. Finally, if you want to get experience but aren’t quite ready to show the world, free programs like WAMP (for Windows) and MAMP (for Macs) allow you to use your own computer as a “server.” You can view the site in your own browser, but it’s not actually on the Internet. No one else can see it; your site is as private as the photos or other files on your computer. These programs are often used by professional developers to perfect code before launching sites.

The best advice anyone ever gave about anything, including web design.

Unless you’ve got access to the nuclear launch codes, the best way to learn is by experimenting. Change the font, change the background color, changes the header. You can change them back if you want. Start small, build up your confidence, you won’t believe how quickly you’ll progress once you’ve got the basics.

If you’ve got advice for getting started with web design–or DH more generally–let us know in the comments below. And feel free to share your own stories and sites!


Lori Brister is a doctoral candidate in the English Department at The George Washington University, where she is completing her dissertation on the history, literature, and ephemera of nineteenth century tourism. She is currently building an interactive GIS program that maps texts and images related to tourism. To learn more about Lori’s work, visit loribrister.com

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s