Simple development

config/backstop/backstopConfig.js

@@ -1,9 +1,7 @@
 'use strict';
-
 // https://github.com/garris/BackstopJS#advanced-scenarios
 
 const backstop = require('@mate-academy/backstop-config');
-
 const { basicScenario } = backstop;
 
 const basic = {
@@ -15,41 +13,42 @@ const basic = {
 
 const config = {
   ...backstop,
+  fileNameTemplate: '{scenarioLabel}_{viewportLabel}',
   onBeforeScript: 'puppet/onBefore.js',
   onReadyScript: 'puppet/onReady.js',
   viewports: [
     {
-      name: 'desktop_s',
+      name: '1024px',
       width: 1024,
       height: 768,
     },
     {
-      name: 'desktop_m',
+      name: '1200px',
       width: 1200,
       height: 768,
     },
   ],
   scenarios: [
     {
       ...basic,
-      label: 'header-tag',
+      label: 'Header tag',
       selectors: ['header'],
     },
     {
       ...basic,
-      label: 'nav-tag',
+      label: 'Nav tag',
       selectors: ['nav'],
     },
     {
       ...basic,
-      label: 'nav-item-hovered',
+      label: 'Link with data-qa_hover',
       selectors: ['[data-qa="hover"]'],
       hoverSelector: '[data-qa="hover"]',
       postInteractionWait: 1000,
     },
     {
       ...basic,
-      label: 'nav-item-active',
+      label: 'Link with class_is-active',
       selectors: ['a.is-active'],
     },
   ],

package.json

@@ -6,9 +6,12 @@
   "scripts": {
     "css:test": "rimraf ./backstop_data/bitmaps_test && backstop test --config=config/backstop/backstopConfig",
     "css:reference": "rimraf ./backstop_data/bitmaps_reference && backstop reference --config=config/backstop/backstopConfig",
-    "deploy": "bash ./config/hooks/deploy.sh",
+    "deploy": "npm run publish && git push origin develop",
     "lint": "stylelint src/**/*.css && eslint src/**/*.js && htmllint --rc ./node_modules/@mate-academy/htmllint-config/.htmllintrc src/*.html",
-    "start": "node server.js"
+    "postinstall": "npm run css:reference && git checkout -b develop",
+    "publish": "bash ./config/hooks/deploy.sh",
+    "start": "node server.js",
+    "test": "npm run lint && npm run css:test"
   },
   "keywords": [],
   "author": "Mate Academy",

readme.md

@@ -1,46 +1,29 @@
 # Frontend practice with header
-
-## Main goal:
-Create HTML page with header. Understand `flexbox` usage. Create
-HTML layout from the mockup.
-
-Use this [mockup](https://www.figma.com/file/KAV1NnDp7hgQtPnaD6XdOcnG/Moyo-Header?node-id=0%3A1) 
-for development.
-
-If you don't want to see other users cursors you can disable `Multiplayer 
-Cursors` in figma. [Learn how](https://mate-academy.github.io/layout_task-guideline/figma.html#multiplayer-cursors)
-
-## Common mistakes
-* Do not use tabs. Use 2 spaces for indentation.
-* Don't use repeated styles.
-* Don't use extra elements for blue line. Figure out how to work with `::after`
-* Check font styles. Use [google fonts](https://fonts.google.com/)
-
-## Requirements:
-
-* pay attention the mock is adaptive. Develop the layout to fit on 1024px and
-1200px the same as on the mock.
-* reset browser's default margins
-* use images from [src/images](src/images)
-* Use semantic tags. `<header>`, `<nav>`
-* change links styles on :hover
-* follow styles from the mock
-* link with blue color and line below is an active link. It should have
- `class="is-active"` and relevant styles
-* link with only blue color is an example of `:hover` styles. Every link in the 
-row should have blue color on :hover. 
-* add attribute `data-qa="hover"` to the 4th link for testing (`Ноутбуки и 
-компьютеры`)
-
-Screenshot of the header:
-![screenshot](./references/header-example.png)
-
+1. Replace `<your_account>` with your Github username in the links
+    - [DEMO LINK](https://<your_account>.github.io/layout_moyo-header/) <br>
+    - [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header/report/html_report/)
+2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
+___
+
+## The task
+Create HTML page with the header using `flexbox` basing on [this mockup](https://www.figma.com/file/KAV1NnDp7hgQtPnaD6XdOcnG/Moyo-Header?node-id=0%3A1).
+
+### Common mistakes
+- Do not use tabs. Use 2 spaces for indentation.
+- Don't use repeated styles.
+- Don't use extra elements for blue line. Figure out how to work with `::after`
+- Check font styles. Use [google fonts](https://fonts.google.com/)
+
+### Requirements:
+- pay attention the mock is adaptive. Develop the layout to fit on 1024px and 1200px the same as on the mock.
+- reset browser's default margins
+- use images from [src/images](src/images)
+- Use semantic tags. `<header>`, `<nav>`
+- change links styles on :hover
+- follow styles from the mock
+- the link with blue color and line below is an active link. It should have `class="is-active"` and relevant styles.
+- the link with only blue color is an example of `:hover` styles. Every link in the row should have blue color on `:hover`. 
+- add `data-qa="hover"` attribute to the 4th link for testing (`Ноутбуки и компьютеры`)
 ---
-**Read the guideline before start**
 
-[Guideline](https://mate-academy.github.io/layout_task-guideline/)
-
-**Result**
-
-- [UPDATE DEMO LINK](https://<your_account>.github.io/<repo_name>/)
-- [UPDATE TEST REPORT LINK](https://<your_account>.github.io/<repo_name>/report/html_report/)
+![screenshot](./references/header-example.png)

src/index.html

@@ -3,17 +3,12 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport"
-        content="width=device-width,
-          user-scalable=no,
-          initial-scale=1.0,
-          maximum-scale=1.0,
-          minimum-scale=1.0">
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <title>Moyo header</title>
   <link rel="stylesheet" href="./style.css">
 </head>
 <body>
-
-<script type="text/javascript" src="./main.js"></script>
+  <h1>Moyo header</h1>
 </body>
 </html>