Here are some crib notes for coaches. I keep these on a txt file on my phone for easy reference during the workshop:
Part 1
GitHub repository
github account
create a new repo
username.github.io repo name
auto-initialize repository
** make sure README is checked **
index.html and view in web browser
Learning to swim: HTML
<h1> <p> <ul> <li>
<code> <blockquote>
** gotta close your tags, yo **
Linking pages
kittens.html
placekitten
<img /> <a>
DATA <3
_config.yml
** add ---\n---\n to index.html **
** add ---\n---\n to kittens.html **
{{ site.title }}
Using a layout
_layouts directory
** make sure _layouts is plural **
default.html
{{ content }} in default.html
layout: default in index.html and kittens.html
adding a menu
"front matter" Yaml
Writing history
commit history
commit hashes
commit comments
A journal that makes sense
commit message format
(verb) (object) (reason)
Okay Captain. Now sail away!
excitement
Part 2
Social Coding
find a partner
fork their repo
** make a change to your repo **
pull request
wall of fame
Add stucture with HTML
DOCTYPE
<html> <head> <body> <title>
<ul> <ol> and <li> examples
<blockquote>
Style your page with CSS
style.css
h1 { color: hotpink; }
** https://developer.mozilla.org/en-US/docs/Web/CSS/color_value **
selectors
font-size text-transform
border margin padding
** more things to know
- IE box model issues?
- border is also shorthand
- box position
- grids e.g. Bootstrap & Foundation **
inspect element - browser tools
** show them around
- click on element with mouse
- show box model diagram
- network tab
- console ***
** extra curricular
- http://codepen.io/ for examples
- Mozilla Webmaker? **
Jekyll in action: make a blog
_posts directory
YYYY-MM-DD-blog-title.md filename
** don't forget --- YAML --- **
open in browser
** URL different from file path **
add {{site.posts}} to index.html
.md files and Markdown
Using Git
install GitHub for Mac/Windows
command line
sublime text / gedit
git config init add commit log
git clone push
git stash pop
git branch checkout merge