Tools of this course (Fast ways to build a website and share your work)

So I like to use browser-based development tools for maximum interactivity with the material. Many of you have set up both github and cloud9 accounts already. Let's put that to use.

Basic Task 1: Go to http://c9.io and create a new workspace (you can your github account to login). You can choose the "custom" type. Create a new file, type a line greeting the earth (like "Hello world" for instance). Save the file as "index.html". Click "Run". Look in the bash tab for the URL of your page. Copy that link, open it in a different tab. See your amazing text. Change the contents of the file. Refresh the tab. Be amazed.

I don't want to give you the impression that a Hello world is complex in HTML/CSS. It's not. But what you just did was turn a virtual machine into a web-server which is "serving" files from a particular URL. Awesome!

Before I explain that process let's do a different style of "serving" that is totally cool.

GitHub Pages Task 2: Go to https://github.com create a new repository. In the repo overview, click the branch drop-down on the left-hand side. Type in gh-pages and press enter. Use the plus icon to make a new file called index.html and make a sentence in there for some content. At the bottom of your page make a commit. Your URL is http://user_name.github.io/repo_name. (Instructions can be found https://pages.github.com.) A working sample can be found here. )

Those are both full-blown hosted user-made website solutions (although cloud9 will stop your server about once a day). Here are some other ways that aren't as complex:

Codepen.io Task 3: Head to http://codepen.io/. Take a minute to look at some awesome projects that web designers have made. I'll wait … OK Create a new pen. In the HTML window add "Hello World". Look at the result.

Inter-note Site Making Task 4: I like to have you interact with the material during lectures. Here is an interactive "Dabblet" (like codepen but for CSS play) . Edit the HTML and save it to a github gist.

Other ways to play with building sites:

https://jsfiddle.net
http://plnkr.co/
http://cssdeck.com/
Open files on your local machine using your browser
Host files on your local machine
Use a shared host (I like webfaction but there are many )
Use a cluster like https://www.digitalocean.com or Amazon Web Services

Class 1: Intro to HTML and CSS

We will start with the atoms of this course, begin with the basics, build a foundation, and ease into the software-engineering aspects that will set this course apart. For now it will feel like a hundred other "learn web development" courses.

For some of you this will be review. No problem. At least two of the coming mini-tasks ask you to find something you've never seen before, and many are creative expressions anyhow. Like a ninja, you must practice and refine.

So HTML stands for Hyper-Text Markup Language. Any time you hear "Markup Language" that's a sign that you will be taking normal text and adding some "markup" (characters, commands, and words which the end-user won't see). In this case HTML is plain text which is made into hyper-linked documents. The markup syntax for HTML is XML (Xtensible Markup Language) and it looks like the following:

In HTML anything in angle brackets is called a tag, like this: <strong>.

Tags come in pairs, so a start tag always has an end tag which is indicated with a backwards slash: <strong> The Inner HTML stuff here </strong>

Tags can be nested like our sample starter. They can also be given attributes, like this:

      
<body id="thebody" class="someclass anotherclass">
    This is stuff.
    <!-- This is a comment -->
</body>

Basic Rules of HTML Task 5: Go to your cloud9 workspace from earlier and use our new template for your index.html file. Refresh the tab and look at the title at the top of your tab. Change the title tag and refresh. Now add some attributes to the body tag and refresh the tab. Add a comment based on my example above. Confirm that it does not show up.

The way HTML should be thought of is wrapping up the content of your site to give browsers, users, and google a better idea of what each sentence means.

OK. Now for the real things. HTML is a living breathing entity, it is always evolving (new tags added old tags removed) and not all browsers support it the same way. Here is a set of structural tags which are used to divide up content.

<header>
<footer>
<section>
<aside>
<p> a paragraph
<article> (something which could be syndicated on its own)
<div> (this is for when you don't know what else to use)

The two most used attributes are id="..." and class="...". The id attribute is unique to that tag while the class attribute is a classification of that tag which many tags will share. This isn't enforced, it is your choice, but that's how to use them.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element (documentation) has a good intro to HTML tags/elements.

Simple Markup Task 6: In the following dabblet I have the Gettysburg address (notice how new lines are ignored). Mark it up using HTML to convey the meanings (feel free to add attributes to the tags like class="intro"). Save your work we can build from this example.

Viewing Page Source Task 7: Let's crowd-source a bit. Head to a webpage that has some real content. Right click and view page source. Look for some interesting tag which catches your attention and drop it into our class chatroom. If you don't understand the tag or its attribute then do a little google research and find the answer to present with your submission. (The best way to learn this stuff is to pay attention to everything that looks cool, absorb the ideas, and google what doesn't make sense.)

Follow-up Task 8: Pick a couple of the tags you learned from that experiment and put them to use in a page you build (use codepen this time). Share a link to what you built.

Here is a site with all HTML tags and links to the documentation for those tags.

HTML5 Tag Cheatsheet

Out of my daily life I find myself using the following tags all of the time:

a
ul/ol
li (this is meta since it is in an li)
strong
input
button
body/head/title/html
div
section
h1/h2/h3/h4/h5/h6
span
img
code (and the <pre><code> variant)
select and option

Classwork/Homework Task 9: If we have time in class then let's make a traditional "form" which has input boxes for a user to give us a name, their age, a dropdown menu for gender, and a button to click when they are done. If not, try it out tonight.

Intro to Selectors

So throughout this class we will write CSS rules or javascript snippets that will target specific elements (tag pairs) in our document. There is a syntax for doing this which is known as the "CSS Selectors".

The basic selectors are:

Select all tags of a type by using that tag name
Select all tags with a given class by using .class_name_here
Select by id using #id_here
Select all descendants using a space parent .all_desc_with_this_class
Select all things with *

Here is a simple example dabblet:

http://www.w3.org/TR/selectors/ (Latest CSS selector specifications)

There are many, they are listed in the above specifications (we will talk about specifications a lot this week). To help get you going our last task:

CSS Selector Game Task 10: Play http://flukeout.github.io/ a CSS Selector teaching game.