HackerYou Web Development: Class 1
Yesterday I started an Intro to Web Development course at HackerYou. I have been looking forward to this for weeks and was not disappointed. While the first class was pretty basic and mostly spent going over the general concepts of HTML (which I was already familiar with), it was necessary to get everyone on the same page. Even still, it wasn’t boring! Our instructor, Anne Thomas, is pretty funny and was engaging and fun to listen to. I’m already looking forward to the next class.
A few random notes on things we learned/discussed I want to remember:
We’re going to be using Sublime Text 3 as our text editor. I thought we might be using Atom as that’s what we used at a Ladies Learning Code workshop I went to. I’m excited to play around with them both as we progress.
My mind was blown by the fact that Cmd + Tab will let you cycle through the open apps on your computer. I had no idea I could do this!
I had a lot of fun going through the available HTML tags. I knew some of them but its fun to discover new ones, like <q> and <video>. I can’t wait to learn to use more!
We discussed the virtues of using <em> vs. <i> and <strong> vs. <b>, and briefly looked over this article. I already know quite a bit about this from developing accessible ebooks, but it is a really important conversation to have. I didn’t really know that we shouldn’t use <br>, <center> and other tags that affect the presentation of the text in HTML, though it makes complete sense.
Anne mentioned Wes Bos’ book Sublime Text Power User ($36 or $45 depending on format), which I would really like to check out at some point.
How to install a package in Sublime: Cmd + Shift + P, type “install” and enter “Install Package.”
When you are nesting tags within each other, you must always close them in the reverse order that you opened them. Failing to do so will cause your HTML be to invalid and your page will break.
For accessibility reasons, it’s very important to create semantic, clean and valid markup before doing anything else.
Basic HTML structure (shortcut: ! + Tab):
<!DOCTYPE html> - Defines the version of HTML. With HTML5, we use this shortened version.
<html></html> - Surrounding element of webpage; all HTML elements and content go within.
<head></head> - Provide information about the webpage to the browser. None of the content that actually appears on the webpage goes here.
<title></title> - Defines a title that will appear in the browser tab.
<body></body> - All content that appears in the browser is written here; typographical content and structural elements go within.
A key concept: Separation of Content and Style
And that’s it! We ended with some exercises I’d like to play around with a little more before class tomorrow, but I’m not sure that’s going to happen. I’m already thinking about what kinds of sites I’d like to do for my projects and I am so excited to get started.
