National Learn to Code Day & My Experience Learning Basic HTML and CSS

For the last little while, I have felt rather computer illiterate when it comes to talking about websites, the Internet, or almost anything on the back-end of online Digital Humanities projects. Also, since I’ve recently developed a great interest in Internet Art and creating online exhibits, I thought I really should get on the HTML-literate bandwagon and learn to code in order to understand all of the things that I am interested in on a deeper level.

I decided to look into places where I could learn some basic coding. Enter codeacademy, w3, and Ladies Learning Code. While codeacadmey and w3 offer some great tutorials on HTML and CSS and other computer languages, I felt that I would benefit from the in-person instruction which Ladies Learning Code could offer.

Ladies Learning Code is dedicated to promoting digital literacy among women and girls across Canada. This, I think, is in response to the notion that coding is a mostly male-dominated area (not to mention that the computer industry is a mostly male-dominated industry as far as I understand it). With the increase of digitally media in today’s society it is increasingly important to have a basic understanding of how a webpage (such as this one) is constructed.

Today, I participated in a Ladies Learning Code workshop introducing skills in basic HTML and CSS coding to produce a multi-page website. This was my first exposure to HTML and CSS and I had absolutely no idea what I was doing this morning, I was just excited to learn something new. And learn something I did.

The first thing we did was look at the source code for a website by right clicking in our web browsers (either Firefox or Google Chrome).

html back end

A great way to understand what HTML is can be summed up in the following:

HTML Twitter1

Then we got our hands dirty playing with some HTML coding of our very own. The goal of our workshop was to build a multi-page website. We started with creating headers, sub-headers, and the copyright details in the footer using Sublime Text.

html project - my site in early stages

Then we made the menus and the “About” and “Contact” pages (including adding image files too).

HTML About page

All of this seemed pretty easy. Basic HTML coding is pretty simple when you get to play with it. It only gets complicated when you start involving CSS. CSS is the coding that modifies and styles HTML code (i.e. what makes it look pretty). I managed to change the font and the colour of the text OK. I even got to mess around with margins and padding in CSS…

home page with browser and Sublime Text  photo 1

… but I started to get really lost when we started to get into box models, inline vs. block elements, class selectors, and especially float properties in CSS. This will take more practice, I think. I started to feel overwhelmed with information after a while, which retarded my comprehension of what was being taught quite significantly.

huhcss

Overall, I managed to create an OK looking website for the 6 hours that the workshop covered. I am quite proud of myself, and I hope to keep learning about HTML and CSS in the future (perhaps at a more leisurely pace).

Final product:

HTML Final Product

HTML Final Product 2

But yes, even though I don’t understand everything that we went over today in the Ladies Learning Code workshop, I know enough to understand geeky coding jokes like this one:

photo 2

I call that a win on increasing my digital literacy.

Advertisements

One comment

  1. Not bad progress for one day. Imagine what you could do in 6 months!

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

%d bloggers like this: