Skip to content

Latest commit

 

History

History
66 lines (50 loc) · 2.25 KB

OUTLINE.md

File metadata and controls

66 lines (50 loc) · 2.25 KB

Outline of this material

Patterns

  • There are two main parts: one manadotory for the basics, one freeform for experimenting.
  • The main structure is linear, meaning you first do part 1, then part 2
  • every page/step is a small challenge
  • the steps challenges in part 2 are not linear (though it is recommended to with switching from online usage to offline (using github gui tool and editor))
  • "If you have a peer" sections are optional and are about "social coding"
  • an extra section is about forking your github identicon onto the Wall of Fame.

Part 1: Learn to sail

GitHub repo

  • repo => version control commit history ("folder with a journal")
  • make index.html => files, documents
  • put "hello world" inside => text
  • goto username.github.io :)

Interlude: Learn to swim

(formerly know as: HTML – how does it work?)

  • put into p-tag => tags & html ("clothing", "uniforms")
  • add second p-tag with "to the kittens!!11!" => (transfer)
  • wrap kittens in a-tag => links ("portals")

Add a second page a and link to it

  • make kittens.html => (transfer)
  • put hello world within p-tag inside => (transfer)
  • put img-tag inside => images
  • add src-attribute => data ("adress, haircolor, shoesize")
  • add href to kittens-link on index => transfer ("tell portal where to take you")
  • add link to index on kittens => (transfer)

BREAK

DATA <3

  • make config, add title => data in new format ("frontmatter" vs attributes)
  • put {{ site.title }} into title-tag => site-wide templates/placeholders ("blanks for adress on postcard")

using a layout

  • make layout folder and file => (transfer)
  • put inside: p-tag with hello layout and {{ content }} => (transfer)
  • add layout to index and kittens => (transfer)
  • put "menu" into layout, remove links from index and kittens => (transfer)
  • add titles to index and kittens, add {{ page.title }} => page-wide data, transfer

You are awesome!

Part 2: Sail away

Social Coding (forking/pull requests)

Local Development: GitHub Gui Tool and Code editor / pull requests

HTML

CSS

Markdown

Yaml & Liquid => make a blog

Git

Appendix:

Fork yourself into the Wall of Fame

Find more treasures (more links with interesting stuff)

Feedback (?)

Credits (?)