Add markup

README.md

@@ -1,11 +1,14 @@
-# 1-introduction
-
-Первое вводное домашнее задание по курсу ШРИ, по лекциям HTML и CSS.
-
-## Задание
-У вас есть глава из книги [JavaScript Enlightenment](http://javascriptenlightenment.com/) в PDF. Ваша задача — сверстать её с помощью HTML, 
-с подключаемым внешним  CSS-файлом. Верстка в браузере должна быть максимально близка к оригиналу.
-
-## Дополнительно
-* Сверстать  версию для печати, которая при выводе на печать будет выглядеть аналогично оригиналу в PDF с разбивкой на страницы;
-* Поработать над улучшением типографики страницы.
+# 1-introduction
+
+Первое вводное домашнее задание по курсу ШРИ, по лекциям HTML и CSS.
+
+## Задание
+У вас есть глава из книги [JavaScript Enlightenment](http://javascriptenlightenment.com/) в PDF. Ваша задача — сверстать её с помощью HTML, 
+с подключаемым внешним  CSS-файлом. Верстка в браузере должна быть максимально близка к оригиналу.
+
+## Дополнительно
+* Сверстать  версию для печати, которая при выводе на печать будет выглядеть аналогично оригиналу в PDF с разбивкой на страницы;
+* Поработать над улучшением типографики страницы.
+
+## Решение
+Можно посмотреть [здесь](http://solomein.github.io/1-introduction/).

css/styles.css

@@ -0,0 +1,152 @@
+body {
+    margin: 0;
+    color: #000;
+    text-rendering: optimizeLegibility;
+    background: #ababab;
+}
+
+.article {
+    max-width: 672px;
+    padding: 49px 72px;
+    margin: 30px auto;
+    background: #fff;
+}
+
+a {
+    color: #021eaa;
+}
+
+h1,
+h2 {
+    color: #444;
+    border-bottom: 2px solid #ebebeb;
+}
+
+h1 {
+    padding: 0 0 8px;
+    margin: 0 0 103px;
+    font: 38px "Arial Narrow", "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", Arial, "Helvetica Neue", Helvetica, sans-serif;
+    text-align: right;
+    border-width: 3px;
+}
+
+h2 {
+    padding: 0 0 10px;
+    margin: 54px 0 0;
+    font: 700 18px Tahoma, Verdana, sans-serif;
+    word-spacing: -2px;
+}
+
+p {
+    margin: 18px 0 27px;
+    font: 14px/24px Arial, "Helvetica Neue", Helvetica, sans-serif;
+}
+
+code,
+pre,
+.code_block {
+    font: 700 12px "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
+}
+
+pre {
+    word-wrap: break-word;
+    white-space: -moz-pre-wrap;
+    white-space: -o-pre-wrap;
+    white-space: pre-wrap;
+}
+
+.code_block {
+    position: relative;
+    display: block;
+    padding: 16px 0 10px;
+    color: #34581e;
+    border-top: 22px solid #fff2c5;
+    border-bottom: 4px solid #ffd966;
+}
+
+.code_block:before {
+    position: absolute;
+    top: -22px;
+    display: block;
+    width: 100%;
+    height: 22px;
+    background: #fff2c5;
+    background: -moz-linear-gradient(top, #fff2c5 0%, #fd6 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff2c5), color-stop(100%, #fd6));
+    background: -webkit-linear-gradient(top, #fff2c5 0%, #fd6 100%);
+    background: -o-linear-gradient(top, #fff2c5 0%, #fd6 100%);
+    background: -ms-linear-gradient(top, #fff2c5 0%, #fd6 100%);
+    background: linear-gradient(to bottom, #fff2c5 0%, #fd6 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd6', endColorstr='#fff2c5', GradientType=0);
+    content: "";
+}
+
+.code-default {
+    color: #34581e;
+}
+
+.code-value {
+    color: #b45f06;
+}
+
+.code-comment {
+    color: #7a7a7a;
+}
+
+.text-oblique {
+    font-style: oblique;
+    color: #5f5f5f;
+}
+
+@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
+
+    .article {
+        padding: 25px 36px;
+        margin: 0 auto;
+    }
+
+}
+
+@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
+
+    h1 {
+        margin: 0 0 52px;
+        text-align: left;
+    }
+
+    h2 {
+        margin: 27px 0 0;
+    }
+}
+
+@media print {
+
+    body,
+    .article {
+        padding: 0;
+        margin: 0;
+        color: #000;
+        background: #fff;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    a[href^=http]:after {
+        content: " <" attr(href) ">";
+    }
+
+    h2 {
+        page-break-after: avoid;
+    }
+
+    .code_block {
+        page-break-inside: avoid;
+    }
+
+    .code_block:before {
+        display: none;
+    }
+
+}

index.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>JavaScript Enlightenment — Preface</title>
+    <link rel="stylesheet" href="./css/styles.css">
+</head>
+<body>
+    <div class="article">
+        <h1>Preface</h1>
+        <p>Before you begin, it is important to understand various styles employed in this book. Please do not skip this section, because it contains important information that will aid you as you read the book.</p>
+
+        <h2>More code, less words</h2>
+        <p>Please examine the code examples in detail. The text should be viewed as secondary to the code itself. It is my opinion that a code example is worth a thousand words. Do not worry if youʼre initially confused by explanations. Examine the code. Tinker with it. Reread the code comments. Repeat this process until the concept being explained becomes clear. I hope you achieve a level of expertise such that well-documented code is all you need to grok a programming concept.
+        </p>
+
+        <h2>Exhaustive code and repetition</h2>
+        <p>You will probably curse me for repeating myself and for being so comprehensive with my code examples. And while I might deserve it, I prefer to err on the side of being exact, verbose, and repetitive, rather than make false assumptions authors often make about their reader. Yes, both can be annoying, depending upon what knowledge you bring to the subject, but they can also serve a useful purpose for those who want to learn a subject in detail.</p>
+
+        <h2>Color-coding Conventions</h2>
+        <p>In the JavaScript code examples (example shown below), orange is used to highlight code directly relevant to the concept being discussed. Any additional code used to support the orange colored code will be green. The color gray in the code examples is reserved for JavaScript comments (example shown below).</p>
+
+        <pre class="code_block">&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;body&gt;&lt;script&gt;
+
+<span class="code-comment">// this is a comment about a specific part of the code</span>
+var foo = <span class="code-value">'calling out this part of the code'</span>;
+
+&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>
+
+        <p>In addition to code examples being color-coded, the text in this book is colored so as to denote JavaScript words/keywords v.s. JavaScript code v.s. regular text. Below, I take an excerpt from the book to demonstrate this coloring semantic.</p>
+
+        <p>"Consider that the <span class="text-oblique">cody</span> object created from the <code class="code-value">Object()</code> constructor function (i.e <code class="code-value">var cody = new Object()</code>) is not really different from a string object created via the <code class="code-value">String()</code> constructor function. To drive this fact home, examine the code below:"</p>
+
+        <p>Notice the use of gray italic text for code references, orange text for JavaScript words/keywords, and regular black text for everything in-between.</p>
+
+        <h2>jsFiddle, JS Bin, and Firebug lite-dev</h2>
+        <p>The majority of code examples in this book are linked to a corresponding <a href="http://jsfiddle.net/" target="_blank">jsFiddle</a> page, where the code can be tweaked and executed online. The jsFiddle examples have been configured to use the <a href="http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug-lite-dev.js" target="_blank">Firebug lite-dev</a> plugin so that the log function (i.e. <code class="code-value">console.log</code>) will work in most any modern browser regardless of if the browser has its own console. Before reading this book make sure you are comfortable with the <a href="http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it" target="_blank">usage and purpose</a> of <code class="code-value">console.log</code>.</p>
+
+        <p>In situations where jsFiddle &amp; Firebug lite-dev caused complications with the JavaScript code <a href="http://jsbin.tumblr.com/about" target="_blank">JS Bin</a> &amp; Firebug Lite-dev will be used. I've tried to avoid a dependency on a browser console by using Firebug lite-dev but with certain code examples the solution itself gets in the way of code execution. In these situations the console built into your web browser will have to be leveraged to output logs. If you are not using a browser with a built in JavaScript console I would suggest <a href="http://browsehappy.com/" target="_blank">upgrading or switching browsers</a>.</p>
+
+        <p>When JS Bin is used, keep in mind that the code has to be executed manually (clicking 'Render') which differs from the page load execution done by jsFiddle.</p>
+    </div>
+</body>
+</html>