znut/day-1.md

HTML

Objective

Understand basic HTML structure and markup (html, head, body).
Hello, world!

Reading

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started

Exercise

create hello-world.html with a text that link to google.com when clicked

HTML + CSS

Objective

More HTML markup (style, h1, input, ul, li).
Can select(target) HTML element and basic styling with CSS.
HTML element's class and id

Reading

Exercise i

save code below as .html file. Use CSS to make UI similar to this todo list http://todomvc.com/examples/react/#/

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Write CSS here */
    </style>
  </head>
  <body>
    <h1 class="title">todos</h1>
    <input type="text" placeholder="type something.."></input>
    <ul>
      <li class="todo-item"><input type="checkbox">do homework</li>
      <li class="todo-item">wtf</li>
      <li class="todo-item">test</li>
    </ul>
  </body>
</html>

Exercise ii

save code below as 2.html file

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="2.css">
  </head>
  <body>
    <h1 class="title">todos</h1>
    <input type="text" placeholder="type something.."></input>
    <ul>
      <li class="todo-item"><input type="checkbox">do homework</li>
      <li class="todo-item checked"><input type="checkbox" checked>test test</li>
      <li class="todo-item"><input type="checkbox">task 3</li>
      <li class="todo-item"><input type="checkbox">yakiniku</li>
      <li class="todo-item checked"><input type="checkbox" checked>storm si</li>
    </ul>
  </body>
</html>

create 2.css in the same folder,
make your html page look like this. Do not edit .html file. Notice that each li has different classes

Exercise extra

Create html page (+css) that look similar to

Hint

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="2.1.css">
  </head>
  <body>
    <div class="center">
      <h2>Recommended</h2>
      <div class="card">
        <img src="https://bnetcmsus-a.akamaihd.net/cms/content_folder_media/xs/XSJMKFNN0XV41501720060077.gif">
        <h3>title</h3>
        <span>description</span>
      </div>
      <div class="card">
        <img src="https://bnetcmsus-a.akamaihd.net/cms/content_folder_media/xs/XSJMKFNN0XV41501720060077.gif">
        <h3>title</h3>
        <span>description</span>
      </div>
      <div class="card">
        <img src="https://bnetcmsus-a.akamaihd.net/cms/content_folder_media/xs/XSJMKFNN0XV41501720060077.gif">
        <h3>title</h3>
        <span>description</span>
      </div>
      <div class="card">
        <img src="https://bnetcmsus-a.akamaihd.net/cms/content_folder_media/xs/XSJMKFNN0XV41501720060077.gif">
        <h3>title</h3>
        <span>description</span>
      </div>
    </div>
  </body>
</html>

Javascript

Objective

Make web application functional using JavaScript
Basic event
- click
- input changes (check, uncheck)

Reading

Note

// selector
document.querySelector(/* selector */)    // get one element that matched selector

// get all elements that matched selector
document.querySelectorAll(/* selector */).forEach(function(oneDom) { /* do something */ }) 

// DOM properties / functions / events
dom.onclick = function (event) { /* do something */ }
dom.onchange = function (event) { /* do something */ }

dom.className // class of that dom. ex: "todo-item checked"
dom.parent    // parent of this dom
dom.click()

// event
event.type   // type of event. ex. "click"
event.target // DOM that triggered this event

Exercise i

continue from day-2 homework, highlight checked row with green background. Unchecked row stay grey.

Reading cont'

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#Core_Interfaces_in_the_DOM

Note

var item = document.createElement("li");
var checkbox = document.createElement("input");
item.appendChild(checkbox);

Exercise ii

start from HTML below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TODO LIST</title>
</head>
<body>
    <h1 class="title">todos</h1>
    <input id="input-box" type="text" placeholder="type something.." />
    <button id="add">add</button>
    <ul id="item-list">
    </ul>
    <link rel="stylesheet" type="text/css" href="3.css">
    <script src="3.js"></script>
</body>
</html>

create functional todo list that

when press enter or click add button, add todo text in the input to the list(ul) below with checkbox
when check the checkbox, strikeout the text
add a way to remove item from the list (e.g. [x] button for each todo item)
create 3.css and 3.js in the same folder and don't edit HTML file

Exercise iii

try CSS framework: https://getmdl.io/

Exercise iv

implements these features (ref: http://todomvc.com/examples/react/#/)

complete button: when click, clear all checked items
editing: when click on todo item in the list, you can edit the text

Development environment and packaging

Objective

Git for beginner
Able to clone, setup and run others' project
Find and integrate 3rd party lib
Setup a new project and declare dependencies using {yarn, npm}
Share source code using Git