Add frontender draft.

daggerok · daggerok · commit de3b6a8912bc · 2019-12-18T16:08:49.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,7 @@ Thumbs.db
 /target/
 node_modules/
 package-lock.json
+/dist/
+**/dist/**
+/.cache/
+**/.cache/**
diff --git a/.travis.yml b/.travis.yml
@@ -32,6 +32,19 @@ before_install:
   - pip install --user --upgrade httpie
 jobs:
   include:
+    - stage: test
+      name: frontender
+      env:
+        global:
+          - MY_PROJECT_NAME=frontender
+      before_script:
+        - cd $TRAVIS_BUILD_DIR/$MY_PROJECT_NAME && npm i
+        - cd $TRAVIS_BUILD_DIR/$MY_PROJECT_NAME && npm start
+        - wait_for 1234
+      script:
+        - http :1234
+        - http :1234/part1/index.html
+      after_script: cd $TRAVIS_BUILD_DIR/$MY_PROJECT_NAME && npm stop
     - stage: test
       name: json-server-forever
       before_script:
diff --git a/README.adoc b/README.adoc
@@ -4,7 +4,31 @@
 
 Read link:https://daggerok.github.io/css-examples[project reference documentation]
 
-others:
+_"must have" topics_
+
+- css selectors
+- css properties
+- css values
+- css units: `css-property: valu e{unit}`
+  . absolute: mm, cm, px, in, pt, pc
+  . relative: %, em, rm, vw, vh, vmin, vmax
+- css multiple selectors
+- css functions:
+  . rgba: `background-color: rgba(0,0,0,0.4)`
+  . calc: `margin: calc(2em * 5em)`
+  . ...
+- css animations
+  . animation
+  . keyframes
+  . `transitions` between 2 css values
+- css media queries
+  . `@media only screen and (min-width: 650px) { /* scoped css rules... */ }`
+- css selectors weight
+  . by element selector == 1
+  . by class name selector == 100
+  . by id selector == 1000
+
+_other repositories_
 
 - link:https://github.com/daggerok/tachyons-example[GitHub: daggerok/tachyons-example]
 - link:https://github.com/daggerok/css-grid-layout-example[GitHub: daggerok/css-grid-layout-example]
diff --git a/docs/index.adoc b/docs/index.adoc
@@ -41,6 +41,7 @@ include::../css-grid-display/README.adoc[]
 
 == Links
 
+- link:https://www.youtube.com/watch?v=8gNrZ4lAnAw&list=PL0lNJEnwfVVN2weA7ogzp6GlJvQlXnrSj&index=3[YouTube: The 2019 Frontend Developer Crash Course - HTML & CSS Tutorial for Beginners]
 - link:https://browsersync.io/docs/command-line[Browsersync Command Line Usage]
 ifdef::backend-html5[- link:./index.pdf[Documentation in PFD format]]
 - link:{github-url}[GitHub repo]
diff --git a/frontender/README.md b/frontender/README.md
@@ -0,0 +1,36 @@
+# learn css
+
+```bash
+npm i
+npm run dev
+```
+
+open http://127.0.0.1:1234/
+
+## `must have` topics
+
+* css selectors
+* css properties
+* css values
+* css units: `css-property: valu e{unit}`
+  * absolute: mm, cm, px, in, pt, pc
+  * relative: %, em, rm, vw, vh, vmin, vmax
+* css multiple selectors
+* css functions:
+  * rgba: `background-color: rgba(0,0,0,0.4)`
+  * calc: `margin: calc(2em * 5em)`
+  * ...
+* css animations
+  * animation
+  * keyframes
+  * `transitions` between 2 css values
+* css media queries
+  * `@media only screen and (min-width: 650px) { /* scoped css rules... */ }`
+* css selectors weight
+  * by element selector == 1
+  * by class name selector == 100
+  * by id selector == 1000
+
+## resources
+
+* [YouTube: The 2019 Frontend Developer Crash Course - HTML & CSS Tutorial for Beginners](https://www.youtube.com/watch?v=8gNrZ4lAnAw&list=PL0lNJEnwfVVN2weA7ogzp6GlJvQlXnrSj&index=3)
diff --git a/frontender/package.json b/frontender/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "frontender",
+  "version": "1.0.0",
+  "description": "see: https://www.youtube.com/watch?v=8gNrZ4lAnAw&list=PL0lNJEnwfVVN2weA7ogzp6GlJvQlXnrSj&index=3",
+  "main": "src/index.html",
+  "scripts": {
+    "build": "parcel build src/index.html",
+    "dev": "parcel serve src/index.html",
+    "start": "forever start --minUptime 1000 --spinSleepTime 1000 ./node_modules/.bin/parcel serve src/index.html",
+    "stop": "forever stopall --killTree",
+    "test": "npm run stop"
+  },
+  "keywords": [
+    "css",
+    "parcel",
+    "parcel-bundler"
+  ],
+  "author": "daggerok",
+  "license": "ISC",
+  "devDependencies": {
+    "forever": "1.0.0",
+    "parcel-bundler": "1.12.4"
+  }
+}
diff --git a/frontender/src/favicon.ico b/frontender/src/favicon.ico
diff --git a/frontender/src/index.html b/frontender/src/index.html
@@ -0,0 +1,17 @@
+<!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>Frontender</title>
+  <link rel="stylesheet" href="./style.css">
+  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+</head>
+<body>
+  <ul>
+    <li><a href="./template/index.html">template</a></li>
+  </ul>
+</body>
+</html>
diff --git a/frontender/src/style.css b/frontender/src/style.css
@@ -0,0 +1,28 @@
+body,
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    border: 3px solid grey;
+    background-color: grey;
+    text-align: center;
+}
+
+li:hover {
+    border: 3px solid white;
+    background-color: white;
+}
+
+a {
+    text-decoration: none;
+    display: inline-block;
+    min-width: 100%;
+    color: white;
+}
+
+a:hover {
+    color: grey;
+}
diff --git a/frontender/src/template/index.html b/frontender/src/template/index.html
@@ -0,0 +1,15 @@
+<!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>Template</title>
+  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <p>Baseline template</p>
+</body>
+</html>
diff --git a/frontender/src/template/style.css b/frontender/src/template/style.css
