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.
