Menu

Web Development 101 – The Basics

Editor’s note: This is part 1 of a guest post by Bryan J. Brown. Part 2 will be posted on July 30.

If you’ve been paying attention to the librarian blog scene at all, you’re probably familiar with the infamous “Should librarians learn to code?” debate. Maybe “debate” isn’t the best way to describe it; it’s more like a dead horse that bloggers give a few extra whacks to every couple of months. Well, now it’s my turn. It’s 2013, y’all. Of course you should learn to code. In case you haven’t noticed, pretty much every aspect of librarianship has been completely revolutionized by the web and that’s not a trend that will lose steam anytime soon. The web isn’t the future anymore, it’s already the present. The role of the digital librarian is to leverage all available technology to enhance access to information worldwide, and I don’t care whether you work in reference, collection development, or tech services, we are all digital librarians now simply by virtue of being librarians in a digital age. If you choose not learn to code, you are choosing to limit your competency with technology, and that’s not something anyone should choose to do (especially if you are a grad student looking for a job). Choose to play an active role in the exciting world of digital librarianship. Choose to be unlimited. Choose to code.

I can certainly understand why some people wouldn’t want to learn to code, it looks pretty scary from the outside. Programming is one of the most intimidating subjects around, but the thing you have to realize about it is that it’s only as difficult as you want it to be. Let’s compare it with learning to fix your car. That’s a scary prospect because cars are really complex, but no mechanic ever started out by rebuilding a carburetor. They probably learned to deal with the easier problems first, like changing the oil or replacing a dead spark plug. These problems don’t require much mechanical skill or knowledge, yet they end up being the most common issues that auto owners have to deal with. For some people, that’s all they are interested in learning, and that’s totally fine. At least they are now that much more knowledgeable and capable than the person who decided that working on cars AT ALL was too scary and avoided the subject altogether. Some knowledge is always better than none. Similarly, nobody is saying you to become an expert programmer, but everyone should be able to fix simple errors on a web page, and these are the most common coding problems of all. The more you know about coding, the more opportunities open up for you. Every new thing you learn is another thing that you don’t have to rely on someone else to do for you, and the ability to do things yourself is truly powerful (and truly impressive to folks who can’t do it). With this in mind, realize that how much programming you learn is entirely up to you, but it is always in your best interest to learn all that you can.

Baby Steps

Enough already with this propaganda, you get my point: code good, fear bad. You want to start, but you don’t know where. What’s the best point of entry into the awesome world of web development? The answer is HTML and CSS. HTML and CSS are the most important things to know for any librarian (or anyone interested in coding in general) because they are the foundational elements of the web and surprisingly simple. To go back to the mechanic analogy, HTML and CSS are they oil changes and spark plug replacement skills of the web development world; they are easy enough for anyone to pick up quickly, but they do require a bit of courage to get your hands dirty. No matter what area of the library you work in, there is a very good chance that you will have to create or fix a web page at some point in your career, and HTML and CSS are the languages you will use. If you have no clue what these crazy acronyms mean, just think of HTML as the text that appears on a web page and CSS as the “rules” that determine it’s appearance.

Writing HTML and CSS is definitely “coding”, but it doesn’t have the complex logical skills of true “programming” (although it will teach you some basic skills that will come in handy later if you end up doing some real “programming”, like how to use a text editor or connect to a server). A basic knowledge of HTML and CSS will give you the skills to create a simple static web page from scratch, and even though there are a lot of other things you can learn that will supplement these simple web pages to make them do some really cool stuff, they are pretty useless if you don’t know HTML and CSS first. Some top notch places to learn HTML and CSS are (in order of my personal preference): Codecademy, HTML Dog, and W3Schools, but the web is overflowing with other resources as well (YouTube videos are also great if you are more of a visual learner). Fire up your text editor (you even can use the default text editors on your system, like Notepad on Windows or TextEdit on a Mac), copy the examples from tutorials and play around with them until you feel like you understand them, and then try to create some new pages from scratch. You don’t even need a server, just save the files to your desktop and open them in a browser. If you want to show off your shiny new code babies to your family and friends, you can even put them up on the web using Dropbox.

Be sure to read part 2 of this post, Beyond the Basics, next Tuesday, July 30.

Bryan Brown is a second year MLS/MIS student at Indiana University’s School of Informatics and Computing in Bloomington, IN with a focus on digital libraries. He works as a Web Development Assistant at the Lilly Library, and as a Scanning Technician for IUL Digital Collections Services. His professional interests include library metadata, web development and digital preservation, but he also plays a mean banjo. Find out more about him on Twitter (@bryjbrown) or from his blog (www.bryanjbrown.com).

18 thoughts on “Web Development 101 – The Basics”

I want to add something I think is important from the perspective of a web services librarian. This how I like to think as to whether librarians should learn to code.

There was a time when the content librarians produced was what I’ll call “print first.” The tutorials, the marketing, etc., was made to be read in person in a paper, in a brochure, on a sign. For this print-first norm, staff are expected to be familiar with software like the MS Office Suite, right?

But this isn’t the norm. While print still plays an important role, it’s secondary. The new norm is “WEB first.” Content is written / designed for sites, applications, and social media. Just as on one hand you are expected to be fluent in an office suite before you take the job, it is increasingly important you are fluent in the fundamentals of the web.

At the very least, you need to know how content is structured (HTML) and styled (CSS). Just as in librarianship you are taught material metadata, you need to know that web content is rich with it. The structure of semantic HTML plays an important role in what makes content findable on the web, just as we want things to be findable in the building – [and then there’s microdata, but I don’t think that’s necessarily a 101 talk].

You need to know the basics about accessibility, because many take for granted that the web is a visual medium.

At my institution, I expect each one of my colleagues that produces content for the web–spoiler: all of them, because everything’s the web–to know these basics. They need to understand the medium to best exploit it.

Well, clearly I’m a member of the Bryan Brown fan club since you helped me with my Ruby code! I so so so appreciate your attitude toward programming. As we’ve talked about before, there is a lot of assumed knowledge in even the most well-intentioned tutorials and it’s enough to break your spirit when trying to learn this stuff. I am so glad I took Information Architecture for the Web, where I was able to turn rudimentary HTML/CSS knowledge into a strong understanding of how to get that onto the web. I knew very little about about servers, clients, etc. SSH, FTP, WTF? I mean, really. It’s pretty confusing for someone with no understanding of the web. Sometimes I think it’s assumed that because our generation grew up using technology, we understand the intricacies. In my opinion, we need to break it down and start from the very beginning. The simple stuff that people who have been doing it for a while forget that others don’t get. I consider myself a techy (future) librarian but still get overwhelmed by some web stuff. It’s getting better as I try, fail, try, fail, then finally succeed and learn–but sometimes I need a little handholding. This post is like handholding, so thanks. Can’t wait for next week!

I completely agree with Michael that accessibility is important, especially for libraries. It’s the not-so-glamorous parts of web design/development that get overlooked and create holes in one’s skillset (I’m just as guilty of this as anybody). I try to to adhere to accessibility standards like WCAG 2, but when there’s a deadline looming a lot of things get overlooked. By the way Michael, I found your site (ns4lib.com/) and can’t stop reading it. So much great information there!

I also agree with Brianna that learning things is sometimes harder than it should be due to people “assuming” knowledge. This is especially hard to avoid with web development topics since they are so iterative (you have to know this to build that on top of it, etc.). It’s really hard to explain a JavaScript library without first explaining JavaScript, without first explaining client side scripting (Part 2!), etc. It’s like that Carl Sagan quote, “If you wish to make an apple pie from scratch, you must first invent the universe.” This is why I so strongly emphasize learning HTML and CSS first. I know people who have jumped straight into the advanced stuff without first learning the basics… it just doesn’t work.

I recently graduated with an MLIS and all the jobs I was interested in wanted someone with coding! I learned HTML and CSS from codeacademy and I loved it, I highly recommend them! I have since been bitten by the coding bug and am learning PHP right now, it’s always a good idea to learn new skills and it’s fun too!

I really appreciate you addressing the “how” and not just harping on “should, should should.” It becomes discouraging to hear over and over without any guidance on how to actually get those skills. I start to feel like I’m a lost cause because I didn’t get my undergrad in computer science or web design. Do you have any guidance on: a. How to get meaningful practice? b. how to manage staying “fresh” with your new skills while working a job that doesn’t currently require coding for the web?

Where I work and at the other libs I admire the web person [or people] do regular training. Sometimes it’s not just “this is some basic html!” and it’s more about just talking over coffee about what’s happening in the web. The internet is freaking fantastic about self-learning, but there is a great deal of community and mentorship, trial and error in web work.

Something like codecademy is great on technical fluency, but just like learning a spoken language you really benefit from immersing yourself socially – twitter counts. There are a few web librarian listservs like web4lib and code4lib and drupal4lib, I know facebook has a WordPress for Librarians group, stuff like that.

The real trick to getting good is just to build stuff. Find a side project. Work with someone on something fun like http://www.UnbraryIt.com. Make an account on http://www.codepen.io, fork someone else’s code and then change things in it to see how and why things work the way they do.

I like codecademy (but mostly http://www.codeschool.com !!!!) for technical skills, but to get beyond that you need to find a way to make it fun.

Excellent answers, and in addition to all that I would add that a good way to get “meaningful practice” is to try hand coding your own web portfolio. Make a miniature web site to show off all of the projects that you have worked on as a LIS student, and the portfolio itself becomes a featured project! You can really sharpen and show off your design & architectural skills as well.

In regards to the question about how to stay fresh, I would say that podcasts are my favorite method for staying on top of web trends. The 5by5 network has a lot of shows (http://5by5.tv/broadcasts) that I like, and it’s a good way to find out about what’s hot in the web development world. One of the big advantages of listening to podcasts over reading or watching a video is that it’s a passive experience, so you can listen to a show while driving, while waiting in line, going on a walk, or even at work. You don’t have to hang on every word, but you can pick up a lot through osmosis or hear about something cool that you may want to learn more about on your own.

If you’re in a position where web development and maintenance isn’t a part of your job title, you might want to consider utilizing a webpage in your next school assignment (even if this isn’t explicitly asked for). Papers, research guides and presentations all transition nicely into webpages.

Friends, family and coworkers are also great resources for web content. As long as there isn’t a deadline, offer to build a friend a website in order to play around. Additionally, my first web-based personal project was editing a template for an online resume. These static, one page websites can actually give you a lot of room to learn how CSS and HTML works. I used this one: http://www.thomashardy.me.uk/free-responsive-html-css3-cv-template but there are tons and tons of other free templates online.

I just wanted to say thank you so much for this article! Like the commenter above said, most guides sort of throw you into things, with little introduction about how it actually works. I would definitely recommend HTML Dog to others, as I think it gives the most “hands on” experience so to speak. I’m applying to MLIS schools this fall, so it’s nice to have people who are willing to give a more in-depth look for those of us who are most definitely beginners.

Reblogged this on thetwentiesacademic and commented:
A great example of introductory programming knowledge for those who are just starting out. If you’re worried about figuring out just where to break into the programming world, definitely check out this article for some great tips.