update readme, remove placeholders
borb
1 month ago
parent
ec015a3c0d
commit
e5ffc8a78a
@ -1,26 +1,10 @@
|
|||||||
# Contents
|
# Contents
|
||||||
|
|
||||||
Material completion denoted with 🌑🌘🌗🌖🌕 .
|
| # | Lecture | Slides |
|
||||||
|
|:--|:-------------------------------------------------|:----------------------------------------------------|
|
||||||
| # | Lecture | Materials | Exercises |
|
| 1 | [Introduction to the Web](1-web-introduction.md) | [Download slides](1-web-introduction-slides.html) |
|
||||||
| ---: | ------------------------------------- | --------: | --------: |
|
| 2 | [HTTP](2-http.md) | [Download slides](2-http-slides.html) |
|
||||||
| 1 | [Example Lecture](example-lecture.md) | 🌕 | 🌕 |
|
| 3 | [HTML basics](3-html.md) | [Download slides](3-html-slides.html) |
|
||||||
|
| 4 | [CSS](4-css.md) | [Download slides](4-css-slides.html) |
|
||||||
|
| 5 | [Bootstrap](5-bootstrap.md) | [Download slides](5-bootstrap-slides.html) |
|
||||||
## Repository notes (remove before publishing)
|
| 6 | [JS in HTML & DOM](6-js-in-html-and-dom.md) | [Download slides](6-js-in-html-and-dom-slides.html) |
|
||||||
|
|
||||||
- After reading, remove [example-lecture.md](./example-lecture.md), [example-lecture-slides.html](./example-lecture-slides.html) and [buuttilogo.png](./imgs/buuttilogo.png)
|
|
||||||
- See [Markdown code snippets](.vscode/markdown.code-snippets) for autocomplete stuff.
|
|
||||||
- Remove the .gitkeep files from imgs and solutions folders after adding new files to those folders.
|
|
||||||
|
|
||||||
## Running scripts to convert lectures to MD
|
|
||||||
|
|
||||||
Note: These instructions are for a Windows PC with WSL installed
|
|
||||||
|
|
||||||
1) Install `pptx2md`: in an admin powershell, run `pip install pptx2md`
|
|
||||||
2) copy `.pptx` lecture slides to `.scripts` folder
|
|
||||||
3) In the `.scripts` folder, run `.\convertAndReplaceAll.bat`
|
|
||||||
4) If everything went ok, move the generated `.md` files and the `imgs` folder to the root folder
|
|
||||||
5) Remove .pptx files and the example lecture and its slides html
|
|
||||||
7) In the `.scripts` folder, run `python generateREADME.py`
|
|
||||||
8) Remove everything else from README than the generated table
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,85 +0,0 @@
|
|||||||
---
|
|
||||||
marp: true
|
|
||||||
paginate: true
|
|
||||||
math: mathjax
|
|
||||||
theme: buutti
|
|
||||||
title: N. Example Lecture
|
|
||||||
---
|
|
||||||
|
|
||||||
# Example Lecture
|
|
||||||
|
|
||||||
<!-- headingDivider: 5 -->
|
|
||||||
<!-- class: invert -->
|
|
||||||
|
|
||||||
## Section
|
|
||||||
|
|
||||||
- This line appears instantly
|
|
||||||
* This line appears by pressing spacebar (preferred)
|
|
||||||
* This line has an inline code `variable`
|
|
||||||
1. This line appears instantly
|
|
||||||
2) This line appears by pressing spacebar
|
|
||||||
|
|
||||||
## Code and maths
|
|
||||||
|
|
||||||
* code code code:
|
|
||||||
```js
|
|
||||||
console.log("Here's a syntax-highlighted JavaScript code block");
|
|
||||||
console.log("Remember indentation so it's revealed after the bullet point.");
|
|
||||||
```
|
|
||||||
* This line has an inline LaTeX maths equation $c = \frac{a^2}{\sqrt{b}}$
|
|
||||||
* Here's a maths block:
|
|
||||||
|
|
||||||
$$
|
|
||||||
F(x) = \int_a^b f(x) dx
|
|
||||||
$$
|
|
||||||
|
|
||||||
<!-- _footer: Footers are exclusive to presentation; they are not shown in the webpage markdown document -->
|
|
||||||
|
|
||||||
## Columns
|
|
||||||
|
|
||||||
<div class='columns' markdown='1'>
|
|
||||||
<div markdown='1'>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* Basic image example
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div markdown='1'>
|
|
||||||
|
|
||||||
|
|
||||||
* Wider image
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
* This line is outside the columns and goes from left all the way to the right
|
|
||||||
|
|
||||||
## Columns 2
|
|
||||||
|
|
||||||
<div class='columns21' markdown='1'>
|
|
||||||
<div markdown='1'>
|
|
||||||
|
|
||||||
* Another column example with a wider left panel
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div markdown='1'>
|
|
||||||
|
|
||||||
* Change `class` name to change proportions
|
|
||||||
* If suitable proportions not available, add to `buutti.css`
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Setup
|
|
||||||
|
|
||||||
* In VS Code, install the extensions
|
|
||||||
* [Marp for VS code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
|
|
||||||
* So you can see the slideshow preview when editing.
|
|
||||||
* [Markdown all in one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
|
||||||
* [Markdown table formatter](https://marketplace.visualstudio.com/items?itemName=fcrespo82.markdown-table-formatter)
|
|
||||||
* *Right click > Format document* makes tables pretty
|
|
||||||
* [Save and run](https://marketplace.visualstudio.com/items?itemName=wk-j.save-and-run)
|
|
||||||
* An HTML version of the lecture is created on save
|
|
||||||
* See [settings.json](./.vscode/settings.json)
|
|
||||||
* Add filenames to `notMatch` if a HTML on save is not needed
|
|
||||||
Loading…
Reference in New Issue