manavm1990

This is a header

This is an even smaller header

Even smaller...

Quite small

Here is some normal text. A paragraph, even!

manavm1990

{
  "recommendations": [
    "2gua.rainbow-brackets",
    "aaron-bond.better-comments",
    "codezombiech.gitignore",
    "coenraads.bracket-pair-colorizer-2",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "formulahendry.auto-rename-tag",
    "kisstkondoros.vscode-gutter-preview",

manavm1990

{
  "better-comments.highlightPlainText": true,
  "css.validate": false,
  "editor.accessibilitySupport": "off",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.fontFamily": "'Inconsolata', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.minimap.enabled": false,

manavm1990

{
  "extends": [
    "stylelint-config-standard"
  ],
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true
  }
}

manavm1990

.DS_Store
.cache
dist
node_modules
*.sw*

manavm1990

"devDependencies": {
    "eslint": "^6.6.0",
    "eslint-config-prettier": "^6.5.0",
    "eslint-plugin-prettier": "^3.1.1",
    "prettier": "1.19.1",
    "stylelint": "^11.1.1",
    "stylelint-config-prettier": "^6.0.0",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-prettier": "^1.1.1"
  }

manavm1990

<main>
    <div class="container--students">
      ${generateStudentsHTML(st.students)}
    </div>

    <form action="#">
      <div class="container--form">
        <div>
          <label for="student-pic">Enter a URL for the Student's Pic</label>

manavm1990

/* Developer's Notes:
  1. We add these CSS selectors 'roughly' in the order that we encounter them on the page.
  2. We maintain 'neat and orderly' code, being mindful of any/all 'red marks.'
  */
body {
  color: #333;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;

manavm1990

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-prettier/recommended"
  ]
}

manavm1990

// Build prototype of methods
const proto = {
  hello() {
    return `Hello, my name is ${this.name}`;
  }
};

// Merge a new proto object along with the properties and merge them.
const greeter = name =>
  Object.assign(