Skip to main content

CSS/HTML & JavaScript


Reference a class


Reference an id


Select element by specifying attributes of the node and its ancestors

#grandfatherId .parentClass #targetNodeId


Assign class to page element

<span class="className"> ... </span>
  • A class can be attribute of any tag.

Assign id to page element

<div id="anID">...</div>
  • Has to be unique.
  • Can be attribute of any tag.

HTML5 version identifier

First line of the document should be:

<!DOCTYPE html>

Use style from external CSS file

<link rel="stylesheet" href="targetFile.css" />


Axios API template

import axios from "axios";

const server = "http://localhost:9000";

const API = {
get: (path) =>
axios.get(`${server}${path}`).then((response) =>,
put: (path, body) =>
axios.put(`${server}${path}`, body).then((response) =>,
post: (path, body) =>`${server}${path}`, body).then((response) =>,

export default API;
  • Package name: axios.

Install ESLint and airbnb rules

cd projectDir
npm install --save-dev babel-eslint
npx install-peerdeps --dev eslint-config-airbnb # for react projects
npx install-peerdeps --dev eslint-config-airbnb-base # for projects that don't use react
  • npm 5+ required.
  • Packages are installed for the current project and saved as devDependencies in package.json.
  • Reference.

Create file .eslintrc with the following content.

"env": {
"browser": true,
"es6": true,
"node": true
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"class-methods-use-this": "off",
"import/extensions": "off",
"jsx-a11y/anchor-is-valid": [
{ "components": ["Link"], "specialLink": ["to"] }
"jsx-a11y/label-has-for": "off",
"react/destructuring-assignment": "off",
"react/prefer-stateless-function": "off",
"react/prop-types": "off",
"react/jsx-one-expression-per-line": "off"
  • Enable or disable individual rules in the rules object.