Snake steps

For ka40k 2018

HTML

<ul>
  <li>git init</li>
  <li>.gitignore (google it)</li>
  <li>npm init</li>
  <li>code . (to open VS code)</li>
  <li>npm i eslint --save-dev (https://eslint.org/docs/user-guide/getting-started)</li>
  <li>./node_modules/.bin/eslint --init</li>
  <li>choose airbnb code styles</li>
  <li>npm i browser-sync --save-dev (https://browsersync.io/#install)</li>
  <li>set up "start" script ( "start": "browser-sync start --server --files \"css/*.css\" \"*.html\" \"*.js\"")</li>
  <li>eslint extension for VSCode</li>
  <li>editorcongig file</li>
  <li>editorcongig extention</li>
</ul>

<h2> After that</h2>

<ul><li>
  create grid via javascript
</li></ul>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement">create element</a>
documentFragment

element.classList.add('className');

element.appendChild();


<div class="wrapper">
  <div class="row row-1">
    <div class="cell cell-1"></div>
    <div class="cell cell-2"></div>
    <div class="cell cell-3"></div>
    <div class="cell cell-4"></div>
    <div class="cell cell-5"></div>
    <div class="cell cell-6"></div>
    <div class="cell cell-7"></div>
    <div class="cell cell-8"></div>
    <div class="cell cell-9"></div>
    <div class="cell cell-10"></div>
  </div>
  <div class="row row-2">
    <div class="cell cell-1"></div>
    <div class="cell cell-2"></div>
    <div class="cell cell-3"></div>
    <div class="cell cell-4"></div>
    <div class="cell cell-5"></div>
    <div class="cell cell-6"></div>
    <div class="cell cell-7"></div>
    <div class="cell cell-8"></div>
    <div class="cell cell-9"></div>
    <div class="cell cell-10"></div>
  </div>
  <div class="row row-3">
    <div class="cell cell-1"></div>
    <div class="cell cell-2"></div>
    <div class="cell cell-3"></div>
    <div class="cell cell-4"></div>
    <div class="cell cell-5"></div>
    <div class="cell cell-6"></div>
    <div class="cell cell-7"></div>
    <div class="cell cell-8"></div>
    <div class="cell...

CSS

.cell{
  width: 10px;
  height: 10px;
  border: 1px solid black;
  display: inline-block;
}