EGGERS_CONTENTS.json

{"home":{"content":"# Lecture 1: How do we internet, tho?\n---\n\nHello, Wrold! Welcome, fam.\n\n![excitement](https://media.giphy.com/media/l46CvRFB1GqPYAOis/giphy.gif)\n\n## Learning Objectives\n* Understand how HTTP, or the HyperText Transfer Protocol, works.\n* Learn the significance of Git and why GitHub is relevant to our interests\n* Learn the basic structure of a simple HTML page.\n\n## To do list\n---\n\n* **[First day of class stuff](#first-day-of-class-stuff)**\n* **[Guts of an HTTP Request](#guts-of-an-http-request)**\n* **[Deploying to the internets](#deploying-to-the-internets)**\n* **[HTML Basics](#html-basics)**\n* **[Semantic HTML](#semantic-html)**\n","idx":0},"title":{"content":"Lecture 1: How do we internet, tho?","idx":1},"desc":{"content":"First class! GET HYPE.","idx":2},"first-day-of-class-stuff":{"content":"# First day of class stuff\n---\n\nWe will first set up the tools and resources we need to succeed in class. Then, we will set up tools and resources needed to write code.\n\n## Stuff to do\n---\n\n1. Go thru the  **[Syllabus](https://docs.google.com/document/d/13RZIkXD8av2lazEtrh-LXSMAgBZo6soZ2eXP4844PNI/edit?usp=sharing)**.\n2. Make sure you're on **[Slack](https://fewd627.slack.com/messages)**, fam. (If you're not, hit me up! We gotta fix this)\n3. Create a **[Github](https://www.github.com)** account. **Make sure you verify your email as well**.\n4. Download **[Sublime Text](http://www.sublimetext.com/3)**.\n5. Ensure you have **Google Chrome** and it is your default browser. If this isn't already true then, well...shame on you.\n\n## Tools to know\n---\n\nI've hand built a bunch of stuff to make our lives and class experience easier. I will be referring to these things during class so be sure to be familiar with them.\n\n1. **[Class Landing Page](http://taq.website/)**. Will always contain latest class notes and resources you need\n2. **AttendanceBot**: Check in to class without having to use a sign in sheet! We will be doing this first thing every evening on class days.\n2. **[AutoSYNC](http://autosync.io/#/course/Taq/0)**. Live class notes. For the duration of the class, all code written on my machine will be available to you **in real time**. \n3. **[Samantha](http://samantha.fewd.us/#login)**. Online coding environment that I've built specifically to help us work on small, tightly scoped problems as we learn difficult concepts.\n\n...there are more! But I was discuss them as appropriate. Check out my **[Medium Page](https://medium.com/@the_taqquikarim/)** tho. ","idx":3},"guts-of-an-http-request":{"content":"# Guts of an HTTP Request\n---\n\n**Learning objective**: Understand how HTTP, or the HyperText Transfer Protocol, works.\n\n---\n\n#### Question \nWhat happens when you type in [http://www.google.com](http://www.google.com) into your URL bar?\n\n#### As it turns out, a whole lot.\n\n1. Chrome has no idea what [http://www.google.com](http://www.google.com) actually means, so first, it looks up the **IP Address** for Google.\n2. **DNS**, or **Domain Name System**, is a phone book containing IP Addresses for all the websites that exist on the internet.\n3. Chrome then sends an **HTTP Request** to the IP address associated with Google. An HTTP Request is essentially a text message asking Google for data.\n4. Google's **server** will issues a server **Response** back to your browser. This response is parsed by Chrome (ie: should Chrome display this response data? download it? etc)\n5. **???**\n6. Profit.\n\n#### Ok great, why do we care?\n\nThere are a few key insights to take away here.\n\nFirst and foremost, the main communication mechanism for the internet &mdash; you know, that thing that rules our lives &mdash; is **text**. Literally just **letters and words and numbers and characters**.\n\nThe other main point to take away here is this: the text that is transferred is written in a highly specific manner. It follows a very strict set of rules that can be parsed and understood by the server and the browser. In other words, this text follows a **specific set of grammatical rules**.\n\nThis set of grammar is what determines a **language**. In other words, the text being passed back and forth is a specific language (**HTML**, as it turns out). The browser and server understand this language. If **we** were to learn it as well, we would be able to command the browser to do whatever we want (ie: we would be able to create webpage layouts).\n\n\n\n\n","idx":4},"html-basics":{"content":"# HTML Basics\n---\n\n**Learning objective**: Learn the basic structure of a simple HTML page.\n\n\nHTML stands for **Hyper Text Markup Language**. It is a set of annotations that help parsers (ie: search engines) **understand** the nature of the information that is present on the page.\n\nThink of it like an outline that describes the high level importance of different elements of your webpage.\n\n#### Basic setup\n---\n\nYour typical HTML file will look like this:\n\n```html\n<!doctype html>\n<html>\n <head>\n <!--\n the HEAD section of html does not have any content\n that the user can see\n\n instead, we place things like:\n page title\n external css links\n SEO keywords\n here\n -->\n <meta charset=\"utf-8\">\n <title>My First Awesome Site</title>\n </head>\n <body>\n <!--\n\n the BODY section will contain all the tags\n that the user can _SEE_ and _INTERACT_ with\n -->\n </body>\n</html>\n```\n\n#### Key components\n---\n\n**`<!doctype html>`**\n\nThis tag tells the browser to read our HTML content as HTML5, the latest and greatest revision of the HTML spec. We MUST include it as the first thing on our .html files. I usually type it as all lower case, but it's common practice to also type as: <!DOCTYPE html>\n\n**`<html>`**\n\nThis is the root tag. Basically, all other tags in your html file must live inside this tag. Note how on the bottom of the code snippet, we have a \"\". This is called closing a tag and we must close all tags that we open (with the exception of a few). If we do not do this, our HTML markup becomes invalid.\n\n**`<head>`**\n\nThis section contains content that does not show the user things. Typically, we would expect to see things such as the page title, external links, and SEO tags here.\n\n**`<body>`**\n\nAll the magic happens here. All the tags the user interacts with should live in this tag.\n\n#### Commonly used HTML Tags\n---\n\n```html\n<!--\n the h1 - or heading one - will have the most important text on page \n by the old guard, we should really only have one h1 per page\n -->\n <h1>Hello, Wrold</h1>\n\n <h2>This is a h2</h2>\n\n <h3>This is an h3</h3>\n\n <h4>This is an h4</h4>\n\n <h5>This is an h5</h5>\n\n <h6>This is an h6</h6> \n\n <!--\n this is an inline element\n unline the block element, which is meant to provide structure\n the inline element is interpreted as content\n this means that will appear next to one another\n -->\n <strong>This is an inline element</strong>\n <strong>This is another inline element</strong>\n\n <!-- this is a block element so it will NOT be on the same line -->\n <h1>Will this be on the same line?</h1>\n\n <!-- \n\n differences between block elements and inline elements\n block: takes up entire width of page unless otherwise told \n (we don't know how yet)\n we can impose dimensions on block elements\n inline: meant to be content or text\n we cannot impose dimensions on inline elements \n\n -->\n\n <!-- how to add more spaces or line breaks?? -->\n <h1>THIS will have many &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; spaces</h1>\n\n <h1>This is <br> Sparta</h1>\n\n <a href=\"http://www.google.com\">Hello, Wrold I'm a link, yo</a>\n\n <!--\n this is one mode\n <tagName attribute1=\"someValue\" attribute2=\"someOtherValue\"></tagName>\n\n this is a self closing tag\n <tagName attribute1=\"someValue\" attribute2=\"someOtherValue\">\n --> \n\n <!--\n convention: \n external links open up in new tab\n absolute URLs\n\n internal links open up in same tab\n relative URLs\n -->\n\n <a href=\"http://www.google.com\" target=\"_blank\">Hello, Wrold I'm ALSO a link, yo</a>\n\n <em>This is an em</em>\n\n <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>\n\n <img src=\"http://placekitten.com/g/200/300\">\n <span>This is a kitten. S/he is cute.</span>\n\n <ul>\n <li>This is a list item <div></div></li>\n <li>This is another list item</li>\n <li>This is a third list item</li>\n </ul>\n\n <ol>\n <li>This is an ordered list item</li>\n <li>This is another ordered list item</li>\n <li>This is a third ordered list item</li>\n </ol>\n\n <div></div>\n\n <span></span>\n```","idx":5},"semantic-html":{"content":"# Semantic HTML\n---\n\n**Learning Objective**: Understand the purpose and utility of including semantic HTML tags in the \"big picture\" of the document flow.\n\n---\n\n\nHTML5 introduces a plethora of new tags. These tags are mainly used to dictate structure and meaning to the **information** that is presented on our website.\n\n#### Properly marking up your page\n---\nDon't worry about what the `id` attributes mean for now.\n\n![site structure](http://i.stack.imgur.com/L4qMt.png)\n\n#### Sections VS Articles\n---\nUse **sections** when you are outlining **chapters in a book**. \n\n**EXAMPLE**: A dessert cookbook could have chapters on **cake** recipes vs **pie** recipes.\n\nUse **articles** when you are defining say **poems** in a volume.\n\n**EXAMPLE**: In our dessert cookbook, **each recipe** in the **cake** section would be an **article**.\n\nYou can nest **articles** into **sections** and **sections** into **articles**.\n\n**EXAMPLE**\n\nArticles can go inside section tags\n```html\n<section>\n    <article>\n      <!-- first blog post -->\n    </article>\n    \n    <!-- .... more articles here ... -->\n</section>\n```\n\nSections can also go inside article tags\n```html\n<article>\n  <section>\n     <!-- introduction -->\n  </section>\n\n  <section>\n     <!-- content -->\n  </section>\n\n  <section>\n     <!-- summary, etc -->\n  </section>\n</article>\n```\n\n**THIS STUFF IS PARTLY SUBJECTIVE; THERE REALLY IS NO ONE RIGHT ANSWER**. As long as we are consistent and don't violate the laws of HTML (ie: we don't put a **p** tag inside a **a** tag, or something like that). \n\n#### Headers, Footers, Nav, Main\n---\n\n* Use headers/foorters/navs as **often as you'd like** within each section/article/aside\n* Each sectioning element (section/article/aside) can have it's own `h1` tag (some validators say this is not recommended but this is still technically allowed)\n* I usually put `nav` tags inside the `header` or `footer` pages\n* **MAIN** can only be used once per page. Typically, it is used to define what the main content block of the page is. Don't have to use it though. \n* Essentially, **the blue in the previous image could be wrapped in a main tag**\n\n\n#### Semantic HTML5 Tags\n---\n\nHere are some of the main tags that are supported.\n\n**SECTION**: Represents a generic document or application section.\n\n**HEADER**: Represents a group of introductory or navigational aids..\n\n**FOOTER**: Represents a footer for a section and can contain information about the author, copyright information, et cetera.\n\n**NAV**: Represents a section of the document intended for navigation.\n\n**MAIN**: Defines the main content of a document.\n\n**ARTICLE**: Represents an independent piece of content of a document, such as a blog entry or newspaper article\n\n**ASIDE**: Represents a piece of content that is only slightly related to the rest of the page.\n\n#### More info on sections vs articles\n---\n\n**SECTION**: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.\n\n**ARTICLE**: `<article>` is related to `<section>`, but is distinctly different. Whereas `<section>` is for grouping distinct sections of content or functionality, `<article>` is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. \n","idx":6},"deploying-to-the-internets":{"content":"# Deploying to the internets\n---\n\n**Learning objective**: Understand the significance of Git and why GitHub is relevant to our interests.\n\n---\n\nSo at this point, we have a good sense of **how** an HTTP request works, but the main question that remains is this: **how do we get our webpage to the internets?!**\n\nTo answer this question, we must do two things: \n\n1. Build our own simple HTML page\n2. Push it to GitHub.\n\n## Building a basic HTML page\n---\nAt this point, we know that the server from our last section (say, **Google's** server) will return to us a response that is encoded in a specific way (a **language** if you will).\n\nBut! **Where is this data stored?**\n\nAs it turns out, it is stored in files and folders, in the same way we store data on our computers.\n\nSo in order for us to \"build\" our own HTML page, we must do two things:\n\n1. Create a folder to store our HTML data\n2. Create a file **within that folder** and write out HTML.\n\n## Pushing to GitHub\n---\n\nOk, now we have an HTML page! And get this: we can even load it in Chrome and see it rendered! How do we get this online?\n\nIn one word: **GitHub**.\n\n#### What is GitHub anyways?\n---\n\nGitHub is a service that allows developers to **push** their local **git repositories** online. As a courtesy, they also have their own server that will **host** HTML/CSS/JavaScript files that are found in the pushed repos.\n\nBut first, a few definitions:\n\n#### Git\n---\nGit is an open source software that allows developers to collaborate on large software projects. \n\nWith Git, developers can **commit** code at certain checkpoints. So for example, if you are building a website that requires:\n\n1. a form,\n2. a slideshow,\n3. and a server request, \n\nYou would implement the form then **commit** that code. Then, you would implement the slideshow and **commit**. Finally, you would implement the server requestand **commit** once more. \n\nThis is useful because if, for any reason your updates to the slideshow breaks your form code, you can easily **roll back** to your last commit (the form implementation) and that code would remain pristine and unbroken. \n\n#### Git Repository \n---\nWhen you take a piece of code and start tracking it with Git, you are turning it into a git **repository**. Your git repository will store all your commits, keep track of your code, give you commands that allow you to roll back to a previous commit, etc.\n\n#### Pushing to GitHub\n---\n\nThe final piece is this: your awesome git repo has let's say 500 commits on it. This is awesome! \n\nBut now calamity strikes! Your computer inexplicably dies the morning of your big presentation. Here's the main question: **are you screwed?**\n\nIn one word: **Yes**. \n\nIncidentally, this is **exactly** the problem GitHUb solves. As it turns out, Git allows you to **push** your git repos to other places. Either your friends computer, or your spare home computer, etc. GitHub is basically a cloud storage system that lets you store your git repos online for **free** and also share it with other developers.","idx":7},"__list__":["home","title","desc","first-day-of-class-stuff","guts-of-an-http-request","html-basics","semantic-html","deploying-to-the-internets"]}