---
# This file is best viewed in vscode using vscode-reveal
# https://marketplace.visualstudio.com/items?itemName=evilz.vscode-reveal
title: "Client-Side Templating"
logoImg: "https://raw.githubusercontent.com/HansUXdev/JavaScript-First/2acf5840c15af96602aceb66303ea69c5b75e344/logo.svg"
theme : "night"
transition: "slide"
highlightTheme: "monokai"
slideNumber: true
loop: true
autoSlide: 5000 
# openButton: false
enableMenu: false
# controlsLayout: 'edges'
# controls: true
enableChalkboard: false
# enableTitleFooter: false
autoSlideStoppable: true
---

<style>
.line.focus{background:none;font-size: xx-large;color: #5cc4ea;}
.reveal ul{ margin:0 !important;}
.line.focus{background:none;font-size: xx-large;color: #5cc4ea;}

.flex-slide{display:flex}
.column {display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 4;
}

.double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.present {}
.flex-slide p.fragment{ font-size: 0.6em; }

h1, h2, h3, h4, h5, h6, p {color:white;}
</style>



## Student Project
```markdown
.
├── /0-student_files/
│   ├── /chp/
│   │   ├── /project/
│   │   │   └── index.html
│   │   │   └── resume.js
│   │   │   └── templates.js
│   │   │   └── index.css
│   │   │   └── /code/
└── readme.md
```

Step 1, using terminal `cd /0-student_files/chp#/`  {.fragment .current-only data-code-focus=1-1 }