Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgthms
jgthms committed Jun 28, 2015
0 parents commit 9367bdb
Show file tree
Hide file tree
Showing 117 changed files with 19,914 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.DS_Store
.sass-cache
_site
1 change: 1 addition & 0 deletions CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
marksheet.io
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Marksheet: a free guide to HTML and CSS

[![Marksheet screenshot](https://raw.github.com/jgthms/marksheet/master/images/marksheet-free-guide-html-css.png)](http://marksheet.io)

[marksheet.io](http://marksheet.io)

# License

The content of this project itself is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).

The underlying source code used to format and display that content is licensed under the [MIT license](http://opensource.org/licenses/mit-license.php).
6 changes: 6 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
name: MarkSheet
markdown: kramdown
kramdown:
input: GFM
syntax_highlighter: rouge
permalink: :title.html
21 changes: 21 additions & 0 deletions _includes/footer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<footer class="footer">
<p>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png">
</a>
</p>
<p>
<strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">MarkSheet</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com/" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
</p>
<p>
The underlying <strong>source code</strong> used to format and display that content is licensed under the <a href="http://opensource.org/licenses/mit-license.php">MIT license</a>.
</p>
<p>
Powered by
<a href="http://jekyllrb.com/">Jekyll</a>.
Hosted on
<a href="https://github.com/jgthms/marksheet">GitHub</a>.
</p>
</footer>

<div id="overlay" class="overlay"></div>
8 changes: 8 additions & 0 deletions _includes/head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title | strip_html }}</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/main.css">
</head>
8 changes: 8 additions & 0 deletions _includes/header.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<header class="header">
<a class="logo" href="/index.html">
MarkSheet
</a>
<a id="toggle" class="toggle">
<span>Toggle menu</span>
</a>
</header>
26 changes: 26 additions & 0 deletions _includes/menu.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<nav id="menu" class="menu">
{% for post in site.posts reversed %}
{% capture currentmonth %}{{ post.date | date: "%m" }}{% endcapture %}
{% if currentmonth != month %}
{% unless forloop.first %}</ol></section>{% endunless %}
<section class="menu-section-{{ post.section }}">
<p>
<a href="{{ post.url }}">
<em>{{currentmonth}}</em>
{{ post.title | strip_html }}
</a>
</p>
<ol>
{% capture month %}{{currentmonth}}{% endcapture %}
{% else %}
<li>
<a href="{{ post.url }}" {%if page.url == post.url %} class="active"{% endif %}>
{{ post.title }}
</a>
</li>
{% endif %}
{% if forloop.last %}
</section>
{% endif %}
{% endfor %}
</nav>
22 changes: 22 additions & 0 deletions _includes/scripts.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Lora:400,700,400italic,700italic:latin', 'Roboto:400,300,300italic,400italic,500italic,500,700,700italic:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<script type="text/javascript" src="/javascript/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/javascript/codemirror.js"></script>
<script type="text/javascript" src="/javascript/mode/xml/xml.js"></script>
<script type="text/javascript" src="/javascript/mode/htmlmixed/htmlmixed.js"></script>
<script type="text/javascript" src="/javascript/marksheet.js"></script>
{% if page.route == 'post' %}
<script type="text/javascript" src="/javascript/post.js"></script>
{% endif %}
34 changes: 34 additions & 0 deletions _layouts/chapter.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
layout: default
route: chapter
---

<section class="heading">
<h1>
<em>{{ page.date | date: "%m.%-d" | remove_first: '0' }}</em>
{{ page.title }}
</h1>
<h2>{{ page.subtitle }}</h2>
</section>

<article class="content">
{{ content }}
</article>

<nav class="pagination">
{% if page.next %}
<a href="{{ page.next.url }}">
<em>Start &rarr;</em>
<strong>{{ page.next.title }}</strong>
</a>
{% endif %}
</nav>

<nav id="navigation" class="navigation">
{% if page.next %}
<a href="{{ page.next.url }}">Next article</a>
{% endif %}
{% if page.previous %}
<a href="{{ page.previous.url }}">Previous</a>
{% endif %}
</nav>
21 changes: 21 additions & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html class="route-{{ page.route }}{% if page.section %} section-{{ page.section }}{% endif %}">

{% include head.html %}

<body>

{% include header.html %}

{% include menu.html %}

<main class="main {{ page.route }}">
{{ content }}
</main>

{% include footer.html %}

{% include scripts.html %}

</body>
</html>
39 changes: 39 additions & 0 deletions _layouts/post.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
layout: default
route: post
---

<section class="heading">
<h1>
<em>{{ page.date | date: "%m.%-d" | remove_first: '0' }}</em>
{{ page.title }}
</h1>
<h2>{{ page.subtitle }}</h2>
</section>

<nav id="table-of-contents" class="table-of-contents">
<ul></ul>
</nav>

<article class="content">
{{ content }}
</article>

<nav class="pagination">
{% if page.next %}
<a href="{{ page.next.url }}">
<em>Next &rarr;</em>
<strong>{{ page.next.title }}</strong>
</a>
{% endif %}
</nav>

<nav id="navigation" class="navigation">
{% if page.next %}
<a href="{{ page.next.url }}">Next article</a>
{% endif %}
{% if page.previous %}
<a href="{{ page.previous.url }}">Previous</a>
{% endif %}
<a id="top">Back to top</a>
</nav>
10 changes: 10 additions & 0 deletions _posts/2015-01-01-introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
layout: chapter
title: "Introduction"
subtitle: "An overview of how the <strong>Web</strong> works"
section: web
---

Before diving into the technical and practical aspect of coding, you need to have a **basic** understanding of how the underlying _environment_ works.

This introduction is meant to provide a quick overview of both the **Internet** and the **Web**.
145 changes: 145 additions & 0 deletions _posts/2015-01-02-internet.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
---
layout: post
title: "The <strong>Internet</strong>"
subtitle: "A giant <strong>network</strong> of computers"
section: web
---

The Internet is not the same as the Web. The Internet is bigger, older, and more varied.

Imagine how **roads** are _interconnected_ throughout the world: small streets connect to city lanes that turn into regional roads who then merge with national and international highways. You can drive from your house to any other house in the world[^1]. There is no actual center in this road network either.

The Internet is similar. But instead of roads, it's **cables**. And instead of houses, it's **computers**. And instead of cars traveling on this network, it's **information**.

It was invented in 1969 to connect a computers across the US. Nowadays, _billions_ of devices (including PCs, laptops, mobile phones, TVs, fridges...) are **interconnected**.

### Client and Server

Usually, a connection on the Internet takes place between **2** computers only:

* one that **has** the information (the _server_)
* one that **wants** it (the _client_).

A **client** is a program that can take up many forms:

* a Web browser (like Firefox)
* an email client (like Outlook)
* a messenger app (like Whatsapp)
* a video streaming service (like Netflix)

Each of these programs will retrieve information from a **server**, where something is stored (a website, your emails, messages, movies). Although client programs also send information to the server, they usually don't store it, while servers do.

A **server** can be considered a _dedicated_ computer always connected to the Internet, whose sole purpose is to **deliver** content.

Although any device connected to the Internet can be both a client and a server at the same time, most devices we use are considered **clients**, because we only _retrieve_ data, and don't deliver any.
{: .info}

### IP Address

Like every house has a specific and _unique_ postal address, each computer connected to the Internet is given an **IP address**, in order to be identified on the network.

An IP address usually looks like a combination of 4 numbers: `91.198.174.192`.

### Domains

Although IP addresses are useful for computers to tell each other part thanks to their uniqueness, they are hard to read and remember for us humans.

That is why **domains** were created in 1985. They _associate_ an IP address like `91.198.174.192` with a string of **text** like `wikipedia.org`. As a result, both are **interchangeable**: you can go to <http://91.198.174.192> or <http://wikipedia.org> and end up on the exact same website.

A domain has **3** parts, that are read from right to left:

* **Top-Level Domain** (or TLD): there are generic ones (`.com`, `.org`, `.net`) and country-specific ones (`.us`, `.nl`, `.fr`).
* **Domain name**: a name like `wikipedia` or `marksheet`, that can include letters, numbers, but no space or dot.
* **Subdomain** (optional). Although this 3rd part is optional, most websites use `www` as the default subdomain.

Think of domains as a way to **name** computers connected to the Internet.

_How do I buy a domain?_{:.question}
You don't actually _buy_ a domain, but actually **rent** it from whoever is managing the TLD you're aiming for.
Companies who manage Internet domains are called **domain registrars**. The most famous ones are [Namecheap](https://www.namecheap.com/) and [Gandi](https://www.gandi.net/).

### Protocols

The purpose of interconnecting all these computers is for them to **interact** with each other. And like humans talk in different _languages_, computers on the Internet talk using **protocols**.

Each of them serves a different purpose:

<div class="table">
<table>
<tr>
<th>Protocol</th>
<th>Used for</th>
<th>Created in</th>
</tr>
<tr>
<td>
<abbr title="File Transfer Protocol">FTP</abbr>
</td>
<td>File transfer</td>
<td>1971</td>
</tr>
<tr>
<td>
<abbr title="Simple Mail Transfer Protocol">SMTP</abbr>
</td>
<td>Sending Emails</td>
<td>1971</td>
</tr>
<tr>
<td>
<abbr title="Internet Message Access Protocol">IMAP</abbr>
</td>
<td>Receiving Emails</td>
<td>1986</td>
</tr>
<tr>
<td>
<abbr title="Internet Relay Chat">IRC</abbr>
</td>
<td>Chat</td>
<td>1988</td>
</tr>
<tr>
<td>
<abbr title="HyperText Transfer Protocol">HTTP</abbr>
</td>
<td>Browsing HTML documents (Webpages)</td>
<td>1989</td>
</tr>
</table>
</div>

### URL

Now that we've seen how domains and protocols, we can build a **URL**: a **U**niform **R**esource **L**ocator.

For example, the current page's URL is `http://marksheet.io/internet.html`, and can be divided in 3 parts:

* `http://` is the **protocol**
* `marksheet.io` is the **domain**
* `/internet.html` is the **path**

This URL is **unique** and defines

* _where_ to find something across the internet `marksheet.io/internet.html`
* _how_ the computer is supposed to read it `http://`

URLs can be more complex-looking. You can read about the [anatomy of an URL](http://doepud.co.uk/blog/anatomy-of-a-url).
{: .info}

Internet
: A very large **network** of **computers** connected to each other.

Protocol
: A set of rules, like a **language**, in which computers **communicate** with each other.

IP address
: A combination of **numbers** like `91.198.174.192` which acts like a **unique identifier** for a computer connected to the Internet

Domain
: A **text** like `marksheet.io` which acts like a **unique identifier** for a computer connected to the Internet.
The difference with IP addresses is that domains are easier to read for **humans**.

[^1]: Apart from oceans obviously.

*[SMTP]: Simple Mail Transfer Protocol
Loading

0 comments on commit 9367bdb

Please sign in to comment.